自动生成多个侧边栏
前端小菜-贺俊兰 2020-08-20 vuepress
# 介绍
在自动生成sidebar中我们提到了自动化配置侧边栏
但是这仅限于生成同一个侧边栏，所以接下来我们要开始配置自动化多个侧边栏, 在不同的文章匹配对应的侧边栏
首先看看正常情况下配置的多个侧边栏
// .vuepress/config.js
module.exports = {
themeConfig: {
sidebar: {
'/document/study/': [
{
title:'vue',
sidebarDepth: 2,
collapsable:true,
children: ['/document/study/vue/vue1','/document/study/vue/vue2','/document/study/vue/']
},{
title:'js',
sidebarDepth: 2,
collapsable:true,
children: ['/document/study/js/js1','/document/study/js/js2','/document/study/js/']
}
],
'/document/css/': [
{
title:'css',
sidebarDepth: 2,
collapsable:true,
children: ['/document/css/css1','/document/css/css2']
}
],
}
}
}
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
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
显而易见，手动配置多个侧边栏也是需要自己手动的添加子级，十分麻烦，所以接下来我们就开始配置自动化生成多个侧边栏
# 开始配置
首先，我们还是一样先整合下目录，根据不同文章分类进行分组，如下：
.
├─document/
│ ├─study/
│ │ ├─ vue/
│ │ │ ├─ README.md
│ │ │ ├─ vue1.md
│ │ │ └─ vue2.md
│ │ └─ js/
│ │ ├─ README.md
│ │ ├─ js1.md
│ │ └─ js2.md
│ ├─css/
│ │ ├─ README.md
│ │ ├─ css1.md
│ │ └─ css2.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
接着我们在.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 获取一个目录下的所有文件名
/**
* 获取目录下的所有文件的相对路径
* 解决路由名称枚举问题
*/
const fs = require('fs')
const path = require('path')
// 排除检查的文件
var excludes = ['.DS_Store']
function getDocPath(title,collapsable,relateivePath) {
const absolutePath = path.join(__dirname, '..' + relateivePath)
const files = fs.readdirSync(absolutePath)
const components = []
let arr = files.sort(function(a, b) {
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()) {
let res = item.replace('.md', '');
components.push(relateivePath + res)
} else {
let res = item.replace('.md', '');
getDocPath(relateivePath + res)
}
}
})
let frame = {
title:title,
sidebarDepth: 2,
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
38
39
40
41
42
43
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
38
39
40
41
42
43
# 2.配置侧边栏
在sidebarConf.js 调用getDocPath()方法，组成侧边栏的数据列表，对应文章开头的原始配置格式。
const getDocPath = require('./getDocPath')
module.exports = {
'/document/study/': [
getDocPath('vue',true,'/document/study/vue/'),
getDocPath('js',true,'/document/study/js/'),
],
'/document/css/': [
getDocPath('css',true,'/document/css/'),
],
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 3.挂载进config
themeConfig: {
sidebar: require('./sidebarConf'),
}
1
2
3
2
3
# 总结
到这里我们多个侧边栏配置也完成了，方法其实和单个侧边栏差不多，只是部分写法有差异，
配置完多个侧边栏后，可以发现在不同文章中，对应的侧边栏也存在着不同，以我自己的博客举个栗子
可以看到多个侧边栏配置成功，不同的文章对应着不同的侧边栏，如果配置过程出现问题，可以在下面评论留言