diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
index e4844a1387..d683ccf9d9 100644
--- a/docs/.vuepress/config.ts
+++ b/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: '/' },
diff --git a/docs/.vuepress/config/catalogueLink.ts b/docs/.vuepress/config/catalogueLink.ts
new file mode 100644
index 0000000000..026d13d1ec
--- /dev/null
+++ b/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/' },
+      ],
+    }
+  ]
+
+}
\ No newline at end of file
diff --git "a/docs/00.\347\233\256\345\275\225\351\241\265/05.\347\233\256\345\275\225\351\223\276\346\216\245\346\230\240\345\260\204-\346\240\221\345\275\242\346\274\224\347\244\272.md" "b/docs/00.\347\233\256\345\275\225\351\241\265/05.\347\233\256\345\275\225\351\223\276\346\216\245\346\230\240\345\260\204-\346\240\221\345\275\242\346\274\224\347\244\272.md"
new file mode 100644
index 0000000000..d8687be95d
--- /dev/null
+++ "b/docs/00.\347\233\256\345\275\225\351\241\265/05.\347\233\256\345\275\225\351\223\276\346\216\245\346\230\240\345\260\204-\346\240\221\345\275\242\346\274\224\347\244\272.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
+---
diff --git "a/docs/00.\347\233\256\345\275\225\351\241\265/06.\347\233\256\345\275\225\351\223\276\346\216\245\346\230\240\345\260\204-\351\235\236\346\240\221\345\275\242\346\274\224\347\244\272.md" "b/docs/00.\347\233\256\345\275\225\351\241\265/06.\347\233\256\345\275\225\351\223\276\346\216\245\346\230\240\345\260\204-\351\235\236\346\240\221\345\275\242\346\274\224\347\244\272.md"
new file mode 100644
index 0000000000..d12fc785cb
--- /dev/null
+++ "b/docs/00.\347\233\256\345\275\225\351\241\265/06.\347\233\256\345\275\225\351\223\276\346\216\245\346\230\240\345\260\204-\351\235\236\346\240\221\345\275\242\346\274\224\347\244\272.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
+---
diff --git a/vdoing/components/Catalogue.vue b/vdoing/components/Catalogue.vue
index c2648e9b54..9ee403b8f0 100644
--- a/vdoing/components/Catalogue.vue
+++ b/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) {
diff --git a/vdoing/components/CatalogueLink.vue b/vdoing/components/CatalogueLink.vue
new file mode 100644
index 0000000000..915a211c6f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/vdoing/components/CatalogueLinkChildrenItems.vue b/vdoing/components/CatalogueLinkChildrenItems.vue
new file mode 100644
index 0000000000..9e12040f66
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/vdoing/components/CatalogueLinkNoTree.vue b/vdoing/components/CatalogueLinkNoTree.vue
new file mode 100644
index 0000000000..43f0daed55
--- /dev/null
+++ b/vdoing/components/CatalogueLinkNoTree.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="catalogue-content">
+    <template v-for="(item, index) in itemsData">
+      <dl :key="index" class="inline">
+        <dt>
+          <router-link :to="item.link"
+            >{{ `${index + 1}. ${item.text}` }}
+          </router-link>
+        </dt>
+      </dl>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    itemsData: {
+      type: [],
+      required: true,
+    },
+  },
+};
+</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 1rem
+    a:not(.header-anchor)
+      margin-bottom 0.5rem
+      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>
\ No newline at end of file
diff --git a/vdoing/components/CatalogueLinkTree.vue b/vdoing/components/CatalogueLinkTree.vue
new file mode 100644
index 0000000000..08c9653199
--- /dev/null
+++ b/vdoing/components/CatalogueLinkTree.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="catalogue-content">
+    <dl v-for="(item, index) in treeData" :key="index">
+      <CatalogueLinkTreeItem :data="item"></CatalogueLinkTreeItem>
+    </dl>
+  </div>
+</template>
+
+<script>
+import CatalogueLinkTreeItem from "./CatalogueLinkTreeItem";
+export default {
+  props: {
+    treeData: {
+      type: [Object, Array],
+      required: true,
+    },
+  },
+  components: {
+    CatalogueLinkTreeItem,
+  },
+};
+</script>
+
+
+
+<style scoped lang="stylus" rel="stylesheet/stylus">
+dl, dd
+  margin 0
+.column-wrapper
+  margin-top 1rem
+  display flex
+  padding-bottom 2rem
+  border-bottom 1px solid var(--borderColor)
+  img
+    width 80px
+    height 80px
+    border-radius 2px
+    margin-right 1rem
+  .column-info
+    .title
+      font-size 1.6rem
+    .description
+      color var(--textColor)
+      opacity 0.8
+      margin 0.5rem 0
+.catalogue-wrapper
+  .catalogue-title
+    font-size 1.45rem
+    margin 2rem 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 1rem
+      a:not(.header-anchor)
+        margin-bottom 0.5rem
+        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>
diff --git a/vdoing/components/CatalogueLinkTreeItem.vue b/vdoing/components/CatalogueLinkTreeItem.vue
new file mode 100644
index 0000000000..3e21c58c59
--- /dev/null
+++ b/vdoing/components/CatalogueLinkTreeItem.vue
@@ -0,0 +1,157 @@
+<template>
+  <div>
+    <dt>
+      <span id='expandSpan' @click="toggle" v-if="!data.link" :style="cursorPointer">
+        <em v-if="hasChild && iconShow" class="icon">{{ open ? "-" : "+" }}</em>
+        <em v-if="!hasChild" class="icon file-text"></em>
+        <template v-if="data.number">
+          {{ `${data.number}. ` }}
+        </template>
+        {{ `${data.title}` }}
+      </span>
+    </dt>
+    <dd v-show="open" v-if="data.items">
+      <CatalogueLinkChildrenItems :itemsData="data.items"/>
+    </dd>
+    <dd v-show="open" v-if="hasChild" >
+      <CatalogueLinkTreeItem
+        v-for="(item, index) in data.children"
+        :data="item"
+        :key="index"
+      >
+      </CatalogueLinkTreeItem>
+    </dd>
+
+  </div>
+</template>
+
+<script>
+import CatalogueLinkChildrenItems from "./CatalogueLinkChildrenItems";
+export default {
+  name: "CatalogueLinkTreeItem",
+  components: {
+    CatalogueLinkChildrenItems,
+  },
+  props: {
+    data: {
+      type: [Object, Array],
+      required: true,
+    },
+  },
+  data() {
+    return {
+      open: true,
+      iconShow: false,
+      cursorPointer: null,
+    };
+  },
+  mounted() {
+    this.init()
+  },
+  computed: {
+    hasChild() {
+      return this.data.children && this.data.children.length || this.data.items;
+    },
+  },
+  methods: {
+    init() {
+      let catalogueLink = this.$themeConfig.catalogueLink
+      let expand = catalogueLink.expand
+      let iconShow = catalogueLink.iconShow
+
+      this.open = expand == undefined ? true : expand
+      this.iconShow = iconShow == undefined ? false : iconShow
+      if (this.iconShow) {
+        this.cursorPointer = 'cursor:pointer'
+      }
+    },
+    toggle() {
+      if (this.hasChild && this.iconShow) {
+        this.open = !this.open;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="stylus" rel="stylesheet/stylus">
+em.icon {
+  display: inline-block;
+  width: 10px;
+  height: 25px;
+  margin-top: -5px
+  // margin-right: 1px;
+  background-repeat: no-repeat;
+  vertical-align: middle;
+}
+
+dl, dd
+  margin 0
+.column-wrapper
+  margin-top 1rem
+  display flex
+  padding-bottom 2rem
+  border-bottom 1px solid var(--borderColor)
+  img
+    width 80px
+    height 80px
+    border-radius 2px
+    margin-right 1rem
+  .column-info
+    .title
+      font-size 1.6rem
+    .description
+      color var(--textColor)
+      opacity 0.8
+      margin 0.5rem 0
+.catalogue-wrapper
+  .catalogue-title
+    font-size 1.45rem
+    margin 2rem 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
+        margin 0
+        font-size 1.1rem
+        &:hover .header-anchor
+          opacity 1
+      dd
+        margin-top 0.2rem
+        margin-left 0.7rem
+      a:not(.header-anchor)
+        margin-bottom 0.5rem
+        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>