一、 第一种配置方式 侧边栏分组

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
[
    {
        "title": "首页",
        "path": "/"
    },
    {
        "title": "Vuepress主题教程",
        "path": "/knowledge/frontEnd/vuepress/vuepress.md"
    },
    {
        "title": "前端小库存",
        "collapsable": true,
        "children": [
            {
                "title": "vue-cli 打包插件",
                "collapsable": true,
                "children": [
                    {
                        "title": "browserslistrc浏览器和nodejs版本控制插件",
                        "path": "/knowledge/frontEnd/inductive/webpack/vue-cli 打包插件/browserslistrc浏览器和nodejs版本控制插件.md"
                    },
                    {
                        "title": "vue-cli3开启Gzip文件压缩",
                        "path": "/knowledge/frontEnd/inductive/webpack/vue-cli 打包插件/vue-cli3开启Gzip文件压缩.md"
                    },
                    {
                        "title": "vue打包优化分析插件",
                        "path": "/knowledge/frontEnd/inductive/webpack/vue-cli 打包插件/vue打包优化分析插件.md"
                    }
                ]
            },
            {
                "title": "webpack",
                "collapsable": true,
                "children": []
            },
            {
                "title": "vue",
                "collapsable": true,
                "children": [
                    {
                        "title": "attrs和inheritAttrs",
                        "path": "/knowledge/frontEnd/inductive/vue/attrs和inheritAttrs.md"
                    },
                    {
                        "title": "vue 九种性能优化",
                        "path": "/knowledge/frontEnd/inductive/vue/vue 九种性能优化.md"
                    },
                    {
                        "title": "vue 动态指令",
                        "path": "/knowledge/frontEnd/inductive/vue/vue 动态指令.md"
                    },
                    {
                        "title": "vue 动态模块导入",
                        "path": "/knowledge/frontEnd/inductive/vue/vue 动态模块导入.md"
                    },
                    {
                        "title": "vue 首屏优化",
                        "path": "/knowledge/frontEnd/inductive/vue/vue 首屏优化.md"
                    },
                    {
                        "title": "处理Vue异常的方式",
                        "path": "/knowledge/frontEnd/inductive/vue/处理Vue异常的方式.md"
                    }
                ]
            },
            {
                "title": "scss",
                "collapsable": true,
                "children": [
                    {
                        "title": "Base-level rules",
                        "path": "/knowledge/frontEnd/inductive/scss/Base-level rules.md"
                    },
                    {
                        "title": "主题切换",
                        "path": "/knowledge/frontEnd/inductive/scss/主题切换.md"
                    }
                ]
            },
            {
                "title": "javascript",
                "collapsable": true,
                "children": [
                    {
                        "title": "ArrayBuffer 转 base64",
                        "path": "/knowledge/frontEnd/inductive/javascript/ArrayBuffer 转 base64.md"
                    },
                    {
                        "title": "FileReader常见的数据转换",
                        "path": "/knowledge/frontEnd/inductive/javascript/FileReader常见的数据转换.md"
                    },
                    {
                        "title": "JS中ArrayBuffer、Uint8Array、Blob与文本字符之间的相互转换",
                        "path": "/knowledge/frontEnd/inductive/javascript/JS中ArrayBuffer、Uint8Array、Blob与文本字符之间的相互转换.md"
                    },
                    {
                        "title": "JS数据容量单位转换",
                        "path": "/knowledge/frontEnd/inductive/javascript/JS数据容量单位转换.md"
                    },
                    {
                        "title": "伪数组转为真数组",
                        "path": "/knowledge/frontEnd/inductive/javascript/伪数组转为真数组.md"
                    },
                    {
                        "title": "判断元素是否到达可视区域",
                        "path": "/knowledge/frontEnd/inductive/javascript/判断元素是否到达可视区域.md"
                    },
                    {
                        "title": "字符串平铺对象属性转换成树状对象",
                        "path": "/knowledge/frontEnd/inductive/javascript/字符串平铺对象属性转换成树状对象.md"
                    },
                    {
                        "title": "手动触发resize事件",
                        "path": "/knowledge/frontEnd/inductive/javascript/手动触发resize事件.md"
                    },
                    {
                        "title": "数值千分位转换",
                        "path": "/knowledge/frontEnd/inductive/javascript/数值千分位转换.md"
                    },
                    {
                        "title": "数组校验重复项",
                        "path": "/knowledge/frontEnd/inductive/javascript/数组校验重复项.md"
                    },
                    {
                        "title": "浏览器中的data类型",
                        "path": "/knowledge/frontEnd/inductive/javascript/浏览器中的data类型.md"
                    },
                    {
                        "title": "进制转换",
                        "path": "/knowledge/frontEnd/inductive/javascript/进制转换.md"
                    }
                ]
            },
            {
                "title": "elementui",
                "collapsable": true,
                "children": [
                    {
                        "title": "复选框组内文本不显示",
                        "path": "/knowledge/frontEnd/inductive/elementui/复选框组内文本不显示.md"
                    }
                ]
            },
            {
                "title": "css",
                "collapsable": true,
                "children": [
                    {
                        "title": "CSS 文本溢出显示省略号",
                        "path": "/knowledge/frontEnd/inductive/css/CSS 文本溢出显示省略号.md"
                    },
                    {
                        "title": "CSS 知识拓扑图",
                        "path": "/knowledge/frontEnd/inductive/css/CSS 知识拓扑图.md"
                    },
                    {
                        "title": "CSS 选择器及其优先级",
                        "path": "/knowledge/frontEnd/inductive/css/CSS 选择器及其优先级.md"
                    },
                    {
                        "title": "CSS 隐藏元素的方法",
                        "path": "/knowledge/frontEnd/inductive/css/CSS 隐藏元素的方法.md"
                    },
                    {
                        "title": "display 的属性值及其作用",
                        "path": "/knowledge/frontEnd/inductive/css/display 的属性值及其作用.md"
                    }
                ]
            }
        ]
    },
    {
        "title": "学习路线",
        "collapsable": true,
        "children": [
            {
                "title": "vue",
                "collapsable": true,
                "children": [
                    {
                        "title": "MVVM模型",
                        "path": "/knowledge/frontEnd/learning/vue/MVVM模型.md"
                    },
                    {
                        "title": "数据代理",
                        "path": "/knowledge/frontEnd/learning/vue/数据代理.md"
                    }
                ]
            }
        ]
    }
]

二、第二种配置方式 多个侧边栏

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
{
    "/frontEnd/vue/": [
        {
            "title": "vue全家桶",
            "children": [
                "vue基础",
                "vue-cli",
                "vue-router",
                "vuex",
                "浅谈组件通讯",
                "mapGetters&mapActions",
                "mixin基本使用",
                "vuecli配合svg-sprite-loader使用svg"
            ]
        }
    ],
    "/frontEnd/": [
        {
            "title": "JS",
            "children": [
                "js/ES6核心语法",
                "js/模块化&Webpack",
                "js/Promise&异步函数async",
                "js/WebSocket原理浅析",
                "js/axios",
                "js/变量提升",
                "js/call、apply、bind的用法",
                "js/对象的原始值转换",
                "js/可选链",
                "js/随机数方法",
                "js/深浅拷贝实现",
                "js/Array常用处理",
                "js/防抖与节流",
                "js/postMessage窗口间通讯",
            ]
        },
        {
            "title": "CSS",
            "children": [
                "css/CSS笔记专栏"
            ]
        },
        {
            "title": "其他",
            "children": [
                "other/HTML题目整理",
                "other/Web安全策略"
            ]
        }
    ],
    "/dataBase/": [
        {
            "title": "Mysql",
            "children": [
                "mysql-根据指定字符分隔字符串然后循环做操作",
                "查询函数LOCATE、POSITION、INSTR、FIND_IN_SET、IN、LIKE"
            ]
        }
    ],
    "/other/interview/": [
        {
            "title": "面试",
            "children": [
                "HTML题目整理"
            ]
        }
    ]
}

上面的代码部分是参考别人的菜单配置方式来的，下面是参考之后的代码，目前在考虑如何通过nodejs模块 fs来读取目录，并生成以下代码结构，与下面自动生成菜单方式二代码一致，只不过 读取后的目录 需要生成的代码结构部分有所需要变动！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
"/knowledge/frontEnd/": [{
			// "inductive/"
			title: '前端笔记',
			children: [{
				title: 'Vue',
				children: [
					"inductive/vue/vue 动态模块导入",
					"inductive/vue/vue 首屏优化",
					"inductive/vue/处理Vue异常的方式",
				]

			}]
		},
		{
			// "inductive/"
			title: 'Vuepress',
			children: [
				"vuepress/vuepress",
				"vuepress/vuepress-sidebar配置",
			]
		}
	]

'/frontEnd/vue/'

'/frontEnd/'

'/frontEnd/'

这种方式出现的侧边栏 和 图 方式一 的侧边栏不大一样， 区别 图一的 侧边栏 不管 在首页 还是 在 文章页 都会显示侧边栏，而方式二的侧边栏则只会出现在文章页！

三、自动生成侧边栏菜单

如果你的文章列表不是那么复杂的话，可以手动配置，但是如果，文章比较多，且分组比较多的情况下，你可能需要自动去配置左侧菜单了！下面有两种方式来配置，一种是通过插件形式来配置vuepress-plugin-auto-sidebar，通过这个插件可以帮你完成菜单自动配置，还有一种方式，就是通过nodejs模块 fs文件系统模块来配置加载了!

1. 使用插件

1.1 安装插件
1
cnpm install vuepress-plugin-auto-sidebar -D
1.2 插件配置

在config.js中plugins模块下加入配置，有些配置项在这里不在描述，请查看官方文档，以便了解该插件的相关配置!

1
2
3
[
	["vuepress-plugin-auto-sidebar", {}],
]

此插件使用后，自动配置出来的菜单，好像只有分组效果只有一级效果，不会出现多层分组，具体配置啥的在官方里也没研究明白，所以自己用了第二种方式配置的菜单!

1.3 效果

2. 使用 nodejs fs 模块

首先创建文件 .vuepress > utils > autoGeneralSidebar.js, 其次文件代码如下!

<<< @/docs/.vuepress/utils/autoGeneralSidebar.js

2.1 在代码中使用

<<< @/docs/.vuepress/module/sidebar/sidebarGroup.js

autoSidebar.createSideBar('knowledge/frontEnd/vuepress', ['images'])

第一个参数为加载文档的路径

第二个参数为白名单，当加载路径时遇到images文件夹，不处理！