自动生成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
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
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
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
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
2
3
4
5
# 3.挂载进config
themeConfig: {
sidebar: require('./sidebarConf'),
}
1
2
3
2
3
# 总结
至此完整的功能已全部写完， 如果此配置还满足不了你的需求，想配置成多个侧边栏，在每个不同的分类生成对应的自己想要的侧边栏，可以看另一篇侧边栏配置 -> 自动生成多个侧边栏