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

---

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

---

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

---

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

---

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

---

---

VuePress个人博客专栏

---

VuePress导航栏配置

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

1. 导航栏参数位置

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

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

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

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'
    ],
  }),

---

感谢阅读，祝君暴富！

---