VuePress搭建文档网站/个人博客（详细配置）主题配置-导航栏配置

---

天行健，君子以自强不息；地势坤，君子以厚德载物。

---

每个人都有惰性，但不断学习是好好生活的根本，共勉！

---

文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。

---

燕山雪花大如席，片片吹落轩辕台。
——《北风行》

---

---

VuePress个人博客专栏

---

VuePress导航栏配置

站点导航栏配置属于主题配置，因为该配置在主题配置中进行

1. 导航栏参数位置

导航栏的配置在主题theme参数下使用navbar参数进行定义
如下

  // 主题配置， 默认内容为空，此时只有一个黑色和白色主题的切换按钮theme: defaultTheme({// 导航栏，注意， NavbarGroup嵌套最多两层navbar: [{}]})

在navbar下的花括号中进行参数键值填写，参数有以下几种

参数	描述
text	页面显示的名称
link	跳转路径，可以是文件路径也可以是外部的网址
prefix	前缀，文件路径前缀
children	子导航路径或文件，可以嵌套使用navgroup，即导航下的子导航，后面会举例

2. 首页跳转导航配置

默认使用/进行首页跳转路径配置

  // 主题配置， 默认内容为空，此时只有一个黑色和白色主题的切换按钮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'],}),

---

感谢阅读，祝君暴富！

---