天行健，君子以自强不息；地势坤，君子以厚德载物。
每个人都有惰性，但不断学习是好好生活的根本，共勉！
文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。
燕山雪花大如席，片片吹落轩辕台。
——《北风行》
文章目录
VuePress导航栏配置
站点导航栏配置属于主题配置，因为该配置在主题配置中进行
1. 导航栏参数位置
导航栏的配置在主题theme参数下使用navbar参数进行定义
如下
// 主题配置， 默认内容为空，此时只有一个黑色和白色主题的切换按钮
theme: defaultTheme({
// 导航栏，注意， NavbarGroup嵌套最多两层
navbar: [{
}]
})
在navbar下的花括号中进行参数键值填写，参数有以下几种
| 参数 | 描述 |
|---|---|
text |
页面显示的名称 |
link |
跳转路径，可以是文件路径也可以是外部的网址 |
prefix |
前缀，文件路径前缀 |
children |
子导航路径或文件，可以嵌套使用navgroup，即导航下的子导航，后面会举例 |
2. 首页跳转导航配置
默认使用/进行首页跳转路径配置
扫描二维码关注公众号，回复：
17514653 查看本文章
// 主题配置， 默认内容为空，此时只有一个黑色和白色主题的切换按钮
theme: defaultTheme({
// 导航栏，注意， NavbarGroup嵌套最多两层
navbar: [
// 首页，路径跳转到首页
{
text: '首页',
link: '/'
},
],
}),
3. 内部链接导航
在docs目录下创建notebook.md文件，使用markdown格式填写一些文本内容
然后在navbar参数下配置导航跳转路径如下
// 导航栏，注意， NavbarGroup嵌套最多两层
navbar: [
{
text: '笔记',
// 内部链接
link: '/notebook.md'
},
],
4. 外部链接导航
除了内部文件外，还可以使用外部的网址进行导航跳转
以下使用百度配置一个导航
// 导航栏，注意， NavbarGroup嵌套最多两层
navbar: [
{
text: '百度',
// 外部链接
link: 'https:www.baidu.com'
},
],
页面效果
5. 导航栏组的配置
这里有两种方式配置导航栏组
先在docs目录下创建爱你一个目录functions
然后在functions目录下创建两个文件f1.md和f2.md
然后填写一些文本内容
下面开始配置导航组
5.1 第一种方式
使用前缀，然后将子导航对应的文件列举，如下
// 导航栏，注意， NavbarGroup嵌套最多两层
navbar: [
// 导航栏组 NavbarGroup
// 文件子导航栏1
{
text: '多功能1',
prefix: '/functions/',
children: ['f1.md', 'f2.md']
},
],
页面效果显示如下，这种方式没有子导航的名称
5.2 第二种方式
大多数情况下都是用这种
使用嵌套方式在children参数中添加子导航配置，如下
// 导航栏，注意， NavbarGroup嵌套最多两层
navbar: [
// navbarGroup
// 文件子导航栏2
{
text: '多功能2',
children: [
{
text: 'f1',
link: '/functions/f1.md'
},
{
text: 'f2',
link: '/functions/f2.md'
},
]
},
],
这种方式可以显示子导航名称页面效果如下
5.3 嵌套子目录实现
除了上面这种子导航栏外，还可以在子导航栏中再嵌套一层子子导航栏
// 导航栏，注意， NavbarGroup嵌套最多两层
navbar: [
// 文件子导航栏3
// 导航栏组 navbargroup第一层
{
text: '多功能3',
children: [
{
text: 'f1',
link: '/functions/f1.md'
},
{
text: 'f2',
link: '/functions/f2.md'
},
// 子导航栏组 navbargroup第二层，还可以嵌套第二层，但最多两层
{
text: '多功能4',
prefix: '/functions/',
children: ['f1.md', 'f2.md']
}
]
},
],
页面效果展示，在多功能3下方有子导航f1 f2，在下面还有多功能4也就是子子导航栏
6. 文本导航栏
使用文本内容进行导航栏的配置，该文本内容对应的是md文件路径
如当前在docs/functions/下有f3.md文件
配置导航栏如下
// 导航栏，注意， NavbarGroup嵌套最多两层
navbar: [
// 字符串，页面文件路径
'/functions/f3.md'
],
页面效果如下导航栏名称即文件路径，不过这里需要注意，md文件在显示的时候变成了html文件
7. 完整导航栏配置
导航栏配置的完整内容如下
// 主题配置， 默认内容为空，此时只有一个黑色和白色主题的切换按钮
theme: defaultTheme({
// 导航栏，注意， NavbarGroup嵌套最多两层
navbar: [
// 首页，路径跳转到首页
{
text: '首页',
link: '/'
},
// 内部链接
{
text: '笔记',
link: '/notebook.md'
},
// 外部链接
{
text: '百度',
link: 'https:www.baidu.com'
},
// 导航栏组 NavbarGroup
// 文件子导航栏1
{
text: '多功能1',
prefix: '/functions/',
children: ['f1.md', 'f2.md']
},
// 文件子导航栏2
{
text: '多功能2',
children: [
{
text: 'f1',
link: '/functions/f1.md'
},
{
text: 'f2',
link: '/functions/f2.md'
},
]
},
// 文件子导航栏3
// 导航栏组 navbargroup第一层
{
text: '多功能3',
children: [
{
text: 'f1',
link: '/functions/f1.md'
},
{
text: 'f2',
link: '/functions/f2.md'
},
// 子导航栏组 navbargroup第二层，还可以嵌套第二层，但最多两层
{
text: '多功能4',
prefix: '/functions/',
children: ['f1.md', 'f2.md']
}
]
},
// 字符串，页面文件路径
'/functions/f3.md'
],
}),
感谢阅读，祝君暴富！