# 简介
如下目录结构实现第一层目录生成一级导航，二层目录生成二级导航，二级导航内的md文件构成每页的侧边导航栏
# 目录结构
docs
├── .vuepress
├── 一级导航
│ ├── 二级导航
│ └── index.md
├── 教程
│ └── vuepress
│ ├── index.md
│ └── 定制目录自动配置导航.md
└── 源码系列详解
├── React
│ ├── react源码解析.md
│ └── redux原理.md
└── Vue
├── index.md
├── vueRouter源码解析.md
├── VueX源码解析.md
└── vue源码解析.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# initPage.js
新建
.vuepress/utils/initPage.js
initPage.js
const fs = require('fs');
const path = require('path');
let init = {
navs:[],
sideBar:{},
excludes : ['.vuepress'],
getFileName:function(rpath) {
let fullPath = '';
let fileTypes = /\.md$/; //只匹配以md结尾的文件
const readDir = function (rpath, type, relativePath, index = 0) {
let dir;
let list = fs.readdirSync(rpath);
if (list && list.length > 0) {
for (let i = 0; i < list.length; i++) {
dir = rpath + '/' + list[i];
let isFile = fs.statSync(dir);
if (init.excludes.indexOf(list[i]) >= 0) continue;
if (type === 0) {
if (isFile && isFile.isDirectory()) {
init._initNav(list[i]);
} else {
continue;
}
}
if (type === 1)
if (isFile && isFile.isDirectory()) {
init._initNavChild(list[i], relativePath, index);
} else {
continue;
}
if (type === 2) {
if (isFile && isFile.isFile()) {
if (fileTypes.test(list[i]) > 0)
init._initSideBar(list[i], relativePath);
else
continue;
} else {
continue;
}
}
}
}
}
//读取一级导航 type = 0;
readDir(rpath, 0);
//读取二级导航 type = 1
for (let i = 0; i < init.navs.length; i++) {
readDir(rpath + init.navs[i].path, 1, init.navs[i].path, i)
}
//读取主要文件（侧边栏）
for (let i in init.sideBar) {
readDir(rpath + i, 2, i)
}
return {
nav : init.navs,
sidebar: init.sideBar
}
},
_initNav(name) {
let navItems = {
text: name,
path:`/${name}/`,
items: [
]
}
init.navs.push(navItems);
},
_initNavChild(name, relPath, index) {
let link = `${relPath}${name}/`
let item = {
text: name,
link: link
};
init.navs[index]["items"].push(item);
init.sideBar[link] = [ {
title: name, // 必要的
collapsable: false, // 可选的, 默认值是 true,
sidebarDepth: 1, // 可选的, 默认值是 1
children:[]
}];
},
_initSideBar(name, relPath) {
let pathName = name = name.replace('.md','');
if (name === 'index' || name.toUpperCase() === 'README') {
name = '简介';
pathName = '';
}
let path = `${relPath}${pathName}`
let barItem = {
title: name, // 必要的
collapsable: false, // 可选的, 默认值是 true,
path: path,
sidebarDepth: 1, // 可选的, 默认值是 1
}
init.sideBar[relPath][0]['children'].push(barItem);
}
}
module.exports = init;
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
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
# config.js
在.vuepress/config.js中,themeConfig: 中配置nav与sideBar
const rootpath = path.dirname(__dirname); //执行一次dirname将目录定位到docs目录
const { getFileName } = require('./utils/initPage.js');
const {nav, sidebar} = getFileName(rootpath);
module.exports = {
base:'/',
head: [
['link', { rel: 'icon', href: '/img/logo.png' }]
],
markdown: {
lineNumbers: true
},
title: '魁首的个人网站',
description: '机会只留给有准备的人',
themeConfig: {
lastUpdated: 'Last Updated',
logo: '/img/logo.png',
smoothScroll: true,
nav: nav,
sidebar: sidebar
},
plugins:[
['@vuepress/back-to-top'],
['@vuepress/active-header-links'],
[
'@vuepress/google-analytics',
{
'ga': '' // UA-00000000-0
}
]
]
}
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
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
← 简介