feat: 新增自定义目录页映射

docs/.vuepress/config.ts

@@ -7,10 +7,11 @@ import { VdoingThemeConfig } from 'vuepress-theme-vdoing/types'
 import dayjs from 'dayjs'
 import baiduCode from './config/baiduCode' // 百度统计hm码
 import htmlModules from './config/htmlModules' // 自定义插入的html块
+import catalogueLink from "./config/catalogueLink";
 
 export default defineConfig4CustomTheme<VdoingThemeConfig>({
-  theme: 'vdoing', // 使用npm包主题
-  // theme: resolve(__dirname, '../../vdoing'), // 使用本地主题
+  // theme: 'vdoing', // 使用npm包主题
+  theme: resolve(__dirname, '../../vdoing'), // 使用本地主题
 
   locales: {
     '/': {
@@ -23,6 +24,7 @@ export default defineConfig4CustomTheme<VdoingThemeConfig>({
 
   // 主题配置
   themeConfig: {
+    catalogueLink,
     // 导航配置
     nav: [
       { text: '首页', link: '/' },

docs/.vuepress/config/catalogueLink.ts

@@ -0,0 +1,91 @@
+// 目录链接映射配置
+export default {
+  // 是否展开（默认true）
+  expand: true,
+  // 是否显示图标（默认false）
+  iconShow: false,
+  // 树形序号相关的设置
+  treeNumberSet: {
+    // 序号显示的总开关（默认true）
+    show: true,
+    // 序号显示到的级别（此处填写整数，例如：1、2、3。默认-1，负数表示显示全部级别。）
+    level: -1,
+    // 只有链接才显示序号（默认false）
+    onlyLink: false,
+    // 链接是否显示序号（默认true）
+    link: true,
+  },
+  // 目录链接映射
+  linksMap: [
+    // 这是第一种配置：树形（有children）
+    {
+      catalogueLink: '/tree-demo',
+      title: '一级标题',
+      children: [
+        {
+          title: '二级标题1',
+          items: [
+            { text: '二级标题1 - 三级链接1', link: '/demo-link/' },
+            { text: '二级标题1 - 三级链接2', link: '/demo-link/' },
+          ],
+          children: [
+            { 
+              title: '三级标题1',
+              items: [
+                { text: '三级标题1 - 四级链接1', link: '/demo-link/' },
+                { text: '三级标题1 - 四级链接2', link: '/demo-link/' },
+                { text: '三级标题1 - 四级链接3', link: '/demo-link/' },
+              ],
+            },
+            { 
+              title: '三级标题2',
+              items: [
+                { text: '三级标题2 - 四级链接1', link: '/demo-link/' },
+                { text: '三级标题2 - 四级链接2', link: '/demo-link/' },
+              ],
+              children: [
+                { 
+                  title: '四级标题1',
+                  items: [
+                    { text: '四级标题1 - 五级链接1', link: '/demo-link/' },
+                    { text: '四级标题1 - 五级链接2', link: '/demo-link/' },
+                  ],
+                },
+                { 
+                  title: '四级标题2',
+                  items: [
+                    { text: '四级标题2 - 五级链接1', link: '/demo-link/' },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          title: '二级标题2',
+          items: [
+            { text: '二级标题2 - 三级链接1', link: '/demo-link/' },
+          ],
+          children: [
+            {
+              title: '三级标题1',
+              items: [
+                { text: '三级标题1 - 四级链接1', link: '/demo-link/' },
+              ],
+              }
+          ]
+        },
+      ],
+    },
+    // 这是第二种配置：非树形（没有children，只有items）
+    {
+      catalogueLink: '/no-tree-demo/',
+      items: [
+        { text: '非树形1', link: '/demo-link/' },
+        { text: '非树形2', link: '/demo-link/' },
+        { text: '非树形3', link: '/demo-link/' },
+      ],
+    }
+  ]
+
+}

docs/00.目录页/05.目录链接映射-树形演示.md

@@ -0,0 +1,15 @@
+---
+pageComponent: 
+  name: Catalogue
+  data: 
+    key: CatalogueLink
+    imgUrl: /img/more.png
+    description: 这是目录链接映射-树形演示
+title: 目录链接映射-树形演示
+date: 2022-04-05 21:23:16
+permalink: /tree-demo
+sidebar: false
+article: false
+comment: false
+editLink: false
+---

docs/00.目录页/06.目录链接映射-非树形演示.md

@@ -0,0 +1,15 @@
+---
+pageComponent: 
+  name: Catalogue
+  data: 
+    key: CatalogueLink
+    imgUrl: /img/more.png
+    description: 这是目录链接映射-非树形演示
+title: 目录链接映射-非树形演示
+date: 2022-04-05 21:23:16
+permalink: /no-tree-demo
+sidebar: false
+article: false
+comment: false
+editLink: false
+---

vdoing/components/Catalogue.vue

@@ -64,14 +64,18 @@
           </dl>
         </template>
       </div>
+      <CatalogueLink v-if="isCatalogueLink"/>
     </div>
   </div>
 </template>
 
 <script>
+import CatalogueLink from './CatalogueLink'
 export default {
+  components: {CatalogueLink},
   data() {
     return {
+      isCatalogueLink: false,
       pageData: null,
       isStructuring: true,
       appointDir: {}
@@ -87,6 +91,7 @@ export default {
   },
   methods: {
     getPageData() {
+      this.isCatalogueLink = false
       const pageComponent = this.$frontmatter.pageComponent
       if (pageComponent && pageComponent.data) {
         this.pageData = {
@@ -101,6 +106,10 @@ export default {
       const { sidebar } = this.$site.themeConfig
       const { data } = this.$frontmatter.pageComponent
       const key = data.path || data.key
+      if (key.toLowerCase() == 'CatalogueLink'.toLowerCase()) {
+        this.isCatalogueLink = true
+        return
+      }
       let keyArray = key.split('/');
       let catalogueList = (sidebar[`/${keyArray[0]}/`]);
       if (keyArray.length > 1) {

vdoing/components/CatalogueLink.vue

@@ -0,0 +1,120 @@
+<template>
+  <!-- 非树形 -->
+  <CatalogueLinkNoTree v-if="isItems" :itemsData="itemsData"/>
+  <!-- 树形 -->
+  <CatalogueLinkTree v-else :treeData="treeData"/>
+</template>
+
+<script>
+import CatalogueLinkTree from "./CatalogueLinkTree";
+import CatalogueLinkNoTree from "./CatalogueLinkNoTree";
+export default {
+  components: {
+    CatalogueLinkTree,
+    CatalogueLinkNoTree,
+  },
+  data() {
+    return {
+      treeData: null,
+      itemsData: null,
+      isItems: false,
+      level: null,
+      onlyLink: null,
+      linkNumberShow: null,
+
+    };
+  },
+  created() {
+    this.init();
+  },
+  watch: {
+    $route(to, from) {
+      if (to.path != from.path) {
+        this.init();
+      }
+    },
+  },
+  methods: {
+    init() {
+      let treeNumberSet = this.$themeConfig.catalogueLink.treeNumberSet
+      this.level = treeNumberSet.level == undefined ? -1 : treeNumberSet.level;
+      this.onlyLink = treeNumberSet.onlyLink == undefined ? false : treeNumberSet.onlyLink;
+      this.linkNumberShow = treeNumberSet.link == undefined ? true : treeNumberSet.link;
+
+      let linksMap = this.getCatalogueMapLinks();
+
+      if (linksMap) {
+        if (treeNumberSet.show && !this.onlyLink) {
+          this.addNumber(linksMap);
+        }
+        this.treeData = linksMap;
+      }
+    },
+    /**
+     * 获取目录映射的链接
+     */
+    getCatalogueMapLinks() {
+      this.isItems = false;
+      let catalogueLink = this.$themeConfig.catalogueLink;
+      let linksMap = catalogueLink.linksMap;
+      // 替换目录永久链接中的全部/字符, 以防有些人漏了后面/
+      let permalink = this.$page.frontmatter.permalink.replace(/\//g, "");
+      for (let index = 0; index < linksMap.length; index++) {
+        let obj = linksMap[index];
+        let link = obj.catalogueLink.replace(/\//g, "");
+        if (permalink == link) {
+          if (obj.title == undefined) {
+            this.isItems = true;
+            this.itemsData = obj.items;
+          } else {
+            return (linksMap = new Array(obj));
+          }
+        }
+      }
+    },
+    /**
+     * 添加序号
+     * @param obj 对象
+     * @param parentNumber 父级序号
+     * @param currentLevel 当前级别
+     * @param sn 序号
+     */
+    addNumber(obj, parentNumber, currentLevel = 1, sn = 0) {
+      for (let index = 0; index < obj.length; index++) {
+        let maxLevelShow = this.level > 0 && currentLevel > this.level
+        if (maxLevelShow) {
+          return;
+        }
+        const element = obj[index];
+        let children = element.children;
+        let items = element.items;
+        if (!this.linkNumberShow) {
+          sn = 0
+        }
+        let newSn = (index + 1 + sn).toString();
+        let itemsLen = items == undefined ? 0 : items.length;
+        let itemSn;
+        if (children) {
+          if (parentNumber) {
+            element.number = itemSn = parentNumber.toString() + newSn;
+          } else {
+            element.number = index + 1;
+          }
+          this.addNumber(children, element.number + "-", currentLevel + 1, itemsLen);
+        } else {
+          element.number = itemSn = parentNumber.toString() + newSn;
+        }
+        // items序号处理
+        if (items && itemSn && !(maxLevelShow || currentLevel == this.level)) {
+          for (let k = 0; k < items.length; k++) {
+            const item = items[k];
+            if (this.linkNumberShow) {
+              item.number = itemSn + "-" + (k + 1);
+            }
+          }
+        }
+      }
+    },
+  },
+};
+</script>

vdoing/components/CatalogueLinkChildrenItems.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="catalogue-content">
+    <template v-for="(item, index) in itemsData">
+      <dl :key="index" class="inline">
+        <dd>
+          <router-link :to="item.link">
+            <template v-if="item.number && !onlyLink">
+              {{ `${item.number}. ` }}
+            </template>
+            <template v-else-if="onlyLink && show">
+              {{ `${index + 1}. ` }}
+            </template>
+            {{ `${item.text}` }}
+          </router-link>
+        </dd>
+      </dl>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    itemsData: {
+      type: [],
+      required: true,
+    },
+  },
+  data() {
+    return {
+      onlyLink: null,
+      show: null,
+    };
+  },
+  mounted() {
+    let treeNumberSet = this.$themeConfig.catalogueLink.treeNumberSet;
+    this.onlyLink = treeNumberSet.onlyLink == undefined ? false : treeNumberSet.onlyLink;
+    this.show = treeNumberSet.show;
+  },
+};
+</script>
+
+<style scoped lang="stylus" rel="stylesheet/stylus">
+dl, dd
+  margin 0
+.catalogue-content
+  dl
+    // margin-bottom 1.8rem
+    &.inline
+      display inline-block
+      width 50%
+      // margin-bottom 1rem
+      @media (max-width $MQMobileNarrow)
+        width 100%
+      a
+        width 100%
+    &:not(.inline)
+      dt
+        margin-top -($navbarHeight)
+        padding-top $navbarHeight
+    dt
+      font-size 1.1rem
+      &:hover .header-anchor
+        opacity 1
+    dd
+      // margin-top 0.7rem
+      // margin-left 0.5rem
+    a:not(.header-anchor)
+      margin-bottom 0.7rem
+      display inline-block
+      width 50%
+      &:hover
+        color $activeColor
+        text-decoration none
+      @media (max-width $MQMobileNarrow)
+        width 100%
+    .sub-cat-wrap
+      margin 5px 0 8px 0
+      font-size 0.95rem
+      &> a
+        padding-left 1rem
+        box-sizing border-box
+      .sub-title
+        margin-top -($navbarHeight)
+        padding-top $navbarHeight
+        margin-bottom 6px
+        font-size 1rem
+      &:hover
+        .header-anchor
+          opacity 1
+</style>