feat: vuepress update v1.8.0

docs/.vuepress/config/themeConfig.js

@@ -1,4 +1,5 @@
 const nav = require('./themeConfig/nav.js');
+const sidebar = require('./themeConfig/sidebar.js');
 const htmlModules = require('./themeConfig/htmlModules.js');
 
 // 主题配置

docs/01.前端/25.JavaScript文章/1110.三级目录/00.四级文件.md

@@ -12,3 +12,18 @@ tags:
 
 ## 测试文件
 Test Test
+
+<code-group>
+  <code-block title="YARN" active>
+  ```bash
+  yarn create vuepress-site [optionalDirectoryName]
+  # OR npx create-vuepress-site [optionalDirectoryName]
+  ```
+  </code-block>
+
+  <code-block title="NPM">
+  ```bash
+  npx create-vuepress-site [optionalDirectoryName]
+  ```
+  </code-block>
+</code-group>

package.json

@@ -15,7 +15,7 @@
     "dayjs": "^1.9.7",
     "inquirer": "^7.1.0",
     "json2yaml": "^1.1.0",
-    "vuepress": "1.5.2",
+    "vuepress": "1.8.0",
     "vuepress-plugin-baidu-autopush": "^1.0.1",
     "vuepress-plugin-baidu-tongji": "^1.0.1",
     "vuepress-plugin-demo-block": "^0.7.2",

theme-vdoing/components/AlgoliaSearchBox.vue

@@ -46,7 +46,8 @@ export default {
             }, algoliaOptions),
             handleSelected: (input, event, suggestion) => {
               const { pathname, hash } = new URL(suggestion.url)
-              this.$router.push(`${pathname}${hash}`)
+              const _hash = decodeURIComponent(hash)
+              this.$router.push(`${routepath}${_hash}`)
             }
           }
         ))

theme-vdoing/components/PageEdit.vue

@@ -1,33 +1,23 @@
 <template>
   <div class="page-edit">
-    <div
-      class="edit-link"
-      v-if="editLink"
-    >
-      <a
-        :href="editLink"
-        target="_blank"
-        rel="noopener noreferrer"
-      >{{ editLinkText }}</a>
+    <div class="edit-link" v-if="editLink">
+      <a :href="editLink" target="_blank" rel="noopener noreferrer">{{
+        editLinkText
+      }}</a>
       <OutboundLink />
     </div>
 
-    <div
-      class="tags"
-      v-if="$themeConfig.tag !== false && tags && tags[0]"
-    >
+    <div class="tags" v-if="$themeConfig.tag !== false && tags && tags[0]">
       <router-link
         :to="`/tags/?tag=${encodeURIComponent(item)}`"
         v-for="(item, index) in tags"
         :key="index"
         title="标签"
-      >#{{item}}</router-link>
+        >#{{ item }}</router-link
+      >
     </div>
 
-    <div
-      class="last-updated"
-      v-if="lastUpdated"
-    >
+    <div class="last-updated" v-if="lastUpdated">
       <span class="prefix">{{ lastUpdatedText }}:</span>
       <span class="time">{{ lastUpdated }}</span>
     </div>
@@ -94,8 +84,8 @@ export default {
   methods: {
     createEditLink (repo, docsRepo, docsDir, docsBranch, path) {
       const bitbucket = /bitbucket.org/
-      if (bitbucket.test(repo)) {
-        const base = outboundRE.test(docsRepo) ? docsRepo : repo
+      if (bitbucket.test(docsRepo)) {
+        const base = docsRepo
         return (
           base.replace(endingSlashRE, '')
           + `/src`
@@ -106,6 +96,18 @@ export default {
         )
       }
 
+      const gitlab = /gitlab.com/
+      if (gitlab.test(docsRepo)) {
+        const base = docsRepo
+        return (
+          base.replace(endingSlashRE, '')
+          + `/-/edit`
+          + `/${docsBranch}/`
+          + (docsDir ? docsDir.replace(endingSlashRE, '') + '/' : '')
+          + path
+        )
+      }
+
       const base = outboundRE.test(docsRepo)
         ? docsRepo
         : `https://github.com/${docsRepo}`

theme-vdoing/components/SidebarGroup.vue

@@ -14,7 +14,7 @@
       class="sidebar-heading clickable"
       :class="{
         open,
-        'active': isActive($route, item.path)
+        active: isActive($route, item.path)
       }"
       :to="item.path"
       @click.native="$emit('toggle')"
@@ -46,7 +46,8 @@
         class="sidebar-group-items"
         :items="item.children"
         v-if="open || !collapsable"
-        :sidebarDepth="item.sidebarDepth"
+        :sidebar-depth="item.sidebarDepth"
+        :initial-open-group-index="item.initialOpenGroupIndex"
         :depth="depth + 1"
       />
     </DropdownTransition>

theme-vdoing/components/SidebarLinks.vue

@@ -1,12 +1,6 @@
 <template>
-  <ul
-    class="sidebar-links"
-    v-if="items.length"
-  >
-    <li
-      v-for="(item, i) in items"
-      :key="i"
-    >
+  <ul class="sidebar-links" v-if="items.length">
+    <li v-for="(item, i) in items" :key="i">
       <SidebarGroup
         v-if="item.type === 'group'"
         :item="item"
@@ -15,11 +9,7 @@
         :depth="depth"
         @toggle="toggleGroup(i)"
       />
-      <SidebarLink
-        v-else
-        :sidebarDepth="sidebarDepth"
-        :item="item"
-      />
+      <SidebarLink v-else :sidebarDepth="sidebarDepth" :item="item" />
     </li>
   </ul>
 </template>
@@ -37,12 +27,13 @@ export default {
   props: [
     'items',
     'depth',  // depth of current sidebar links
-    'sidebarDepth' // depth of headers to be extracted
+    'sidebarDepth', // depth of headers to be extracted
+    'initialOpenGroupIndex'
   ],
 
   data () {
     return {
-      openGroupIndex: 0
+      openGroupIndex: this.initialOpenGroupIndex || 0
     }
   },
 

theme-vdoing/enhanceApp.js

@@ -1,5 +1,6 @@
-import postsMixin from '@theme/mixins/posts'
 
+//  注：此文件在浏览器端运行
+import postsMixin from '@theme/mixins/posts'
 export default ({
   Vue, // VuePress 正在使用的 Vue 构造函数
   options, // 附加到根实例的一些选项

theme-vdoing/global-components/CodeBlock.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="theme-code-block" :class="{ 'theme-code-block__active': active }">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CodeBlock',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    active: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.theme-code-block {
+  display: none;
+}
+.theme-code-block__active {
+  display: block;
+}
+.theme-code-block > pre {
+  background-color: orange;
+}
+</style>

theme-vdoing/global-components/CodeGroup.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="theme-code-group">
+    <div class="theme-code-group__nav">
+      <ul class="theme-code-group__ul">
+        <li
+          v-for="(tab, i) in codeTabs"
+          :key="tab.title"
+          class="theme-code-group__li"
+        >
+          <button
+            class="theme-code-group__nav-tab"
+            :class="{
+              'theme-code-group__nav-tab-active': i === activeCodeTabIndex
+            }"
+            @click="changeCodeTab(i)"
+          >
+            {{ tab.title }}
+          </button>
+        </li>
+      </ul>
+    </div>
+    <slot />
+    <pre v-if="codeTabs.length < 1" class="pre-blank">
+// Make sure to add code blocks to your code group</pre
+    >
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CodeGroup',
+  data () {
+    return {
+      codeTabs: [],
+      activeCodeTabIndex: -1
+    }
+  },
+  watch: {
+    activeCodeTabIndex (index) {
+      this.codeTabs.forEach(tab => {
+        tab.elm.classList.remove('theme-code-block__active')
+      })
+      this.codeTabs[index].elm.classList.add('theme-code-block__active')
+    }
+  },
+  mounted () {
+    this.codeTabs = (this.$slots.default || []).filter(slot => Boolean(slot.componentOptions)).map((slot, index) => {
+      if (slot.componentOptions.propsData.active === '') {
+        this.activeCodeTabIndex = index
+      }
+
+      return {
+        title: slot.componentOptions.propsData.title,
+        elm: slot.elm
+      }
+    })
+
+    if (this.activeCodeTabIndex === -1 && this.codeTabs.length > 0) {
+      this.activeCodeTabIndex = 0
+    }
+  },
+  methods: {
+    changeCodeTab (index) {
+      this.activeCodeTabIndex = index
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.theme-code-group, .theme-code-group__nav
+  background-color var(--codeBg)
+  padding-bottom 22px
+  border-radius 6px
+  padding-left 10px
+  padding-top 10px
+.theme-code-group__nav
+  margin-bottom -35px
+.theme-code-group__ul
+  margin auto 0
+  padding-left 0
+  display inline-flex
+  list-style none
+.theme-code-group__li, .theme-code-group__nav-tab
+  border 0
+  padding 5px
+  cursor pointer
+  background-color transparent
+  font-size 0.85em
+  line-height 1.4
+  color var(--codeColor)
+  font-weight 600
+  opacity 0.85
+.theme-code-group__nav-tab-active
+  border-bottom $accentColor 1px solid
+  opacity 1
+.pre-blank
+  color $accentColor
+</style>

theme-vdoing/styles/index.styl

@@ -188,6 +188,7 @@ h1, h2, h3, h4, h5, h6
       + p, + pre, + .custom-block
         margin-top 2rem
 
+  &:focus .header-anchor,
   &:hover .header-anchor
     opacity: 1
 
@@ -221,6 +222,7 @@ a.header-anchor
   margin-top 0.125em
   opacity 0
 
+  &:focus,
   &:hover
     text-decoration none
 

theme-vdoing/util/index.js

@@ -138,6 +138,9 @@ export function resolveSidebarItems (page, regularPath, site, localePath) {
     return []
   } else {
     const { base, config } = resolveMatchingConfig(regularPath, sidebarConfig)
+    if (config === 'auto') {
+      return resolveHeaders(page)
+    }
     return config
       ? config.map(item => resolveItem(item, pages, base))
       : []
@@ -238,6 +241,7 @@ function resolveItem (item, pages, base, groupDepth = 1) {
       path: item.path,
       title: item.title,
       sidebarDepth: item.sidebarDepth,
+      initialOpenGroupIndex: item.initialOpenGroupIndex,
       children: children.map(child => resolveItem(child, pages, base, groupDepth + 1)),
       collapsable: item.collapsable !== false
     }