互勉之

vuePress-theme-reco 梓泓    2020
互勉之 互勉之

Choose mode

  • dark
  • auto
  • light
主页
分类
  • 其他
  • LeetCode
  • 前端
  • vue
  • vuepress
标签
其他
时间轴
github
author-avatar

梓泓

42

文章

10

标签

主页
分类
  • 其他
  • LeetCode
  • 前端
  • vue
  • vuepress
标签
其他
时间轴
github
  • vuepress

    • 自动生成sidebar
    • 自动生成多个侧边栏
    • 路由报错解决方法
  • 定制样式和脚本

自动生成sidebar

vuePress-theme-reco 梓泓    2020

自动生成sidebar

梓泓 2020-08-19 vuepress

# 介绍

在vuepress配置sidebar时,每篇文章都要配置对应的位置

正常情况下咱们会这样配置

// .vuepress/config.js
module.exports = {
  themeConfig: {
    sidebar: [
      {
        title: 'vue',   // 必要的
        collapsable: false, // 是否展开分组 可选的, 默认值是 true,
        sidebarDepth: 2,    // 可选的, 默认值是 1
        children: [
          'document/vue/','document/vue/vue1.md','document/vue/vue2.md'
        ]
      },
      {
        title: 'js',
        children: [ /* ... */ ]
      }
    ]
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

但是显而易见,当我们日后文章数量增加,又或者我们需要更改名称,这时候就又得找到位置更改名称。相当的麻烦。

# 开始配置

首先,我们先整合下目录,根据不同文章分类进行分组,如下:

.
├─document/
│ ├─ vue/
│ │  ├─ README.md
│ │  ├─ vue1.md
│ │  └─ vue2.md
│ └─ js/
│   ├─ README.md
│   ├─ js1.md
│   └─ js2.md
1
2
3
4
5
6
7
8
9
10

接着我们在.vuepress创建两个文件 一个是sidebarConf.js,用来生成对应的侧边栏列表 另一个是getDocPath.js文件,用来获取所有的文章名

.
├─ docs
│  └─.vuepress
│     ├─config.js
│     ├─sidebarConf.js
│     └─getDocPath.js
1
2
3
4
5
6

# 1.获取文件名

getDocPath.js 获取一个目录下的所有文件名

注意需要排除`.DS_Store`文件
  /**
   * 获取目录下的所有文件的相对路径
   * 解决路由名称枚举问题
   */
  const fs = require('fs')
  const path = require('path')
  function getDocPath(title,collapsable,relateivePath) {
    const absolutePath = path.join(__dirname, '../' + relateivePath)
    const files = fs.readdirSync(absolutePath)
    const components = []
    // 排除检查的文件
    var excludes = ['.DS_Store']
    let arr = files.sort(function(a, b) {
      // 截取'.'之前的数字进行排序 例如 1.vue 2.vue 3.vue
      return a.split('.')[0] - b.split('.')[0];
    });
    arr.forEach(function (item) {
      if (excludes.indexOf(item) < 0) {
        let stat = fs.lstatSync(absolutePath + '/' + item)
        if (item == 'README.md') {
          components.unshift(relateivePath + '/')
        } else if (!stat.isDirectory()) {
          components.push(relateivePath + '/' + item)
        } else {
          console.log(relateivePath + '/' + item)
          getDocPath(relateivePath + '/' + item)
        }
      }
    })
    let frame = {
      title:title,
      collapsable:collapsable,
      children:components
    }
    return frame
  }
  module.exports = getDocPath
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# 2.配置侧边栏

在sidebarConf.js 调用getDocPath()方法,组成侧边栏的数据列表,对应文章开头的原始配置格式。

const getDocPath = require('./getDocPath')
module.exports = [
    getDocPath('vue',true,'document/vue'),
    getDocPath('js',true,'document/js')
];
1
2
3
4
5

# 3.挂载进config

themeConfig: {
    sidebar: require('./sidebarConf'),
}
1
2
3

# 总结

至此完整的功能已全部写完, 如果此配置还满足不了你的需求,想配置成多个侧边栏,在每个不同的分类生成对应的自己想要的侧边栏,可以看另一篇侧边栏配置 -> 自动生成多个侧边栏

欢迎来到 互勉之
看板娘