自动生成多个侧边栏
梓泓 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
获取一个目录下的所有文件名
注意需要排除`.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) {
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
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
# 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
# 总结
到这里我们多个侧边栏配置也完成了,方法其实和单个侧边栏差不多,只是部分写法有差异,
配置完多个侧边栏后,可以发现在不同文章中,对应的侧边栏也存在着不同,以我自己的博客举个栗子
可以看到多个侧边栏配置成功,不同的文章对应着不同的侧边栏,如果配置过程出现问题,可以在下面评论留言