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


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


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


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


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



VuePress个人博客专栏


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

感谢阅读,祝君暴富!


猜你喜欢

转载自blog.csdn.net/mo_sss/article/details/142026775