04.【导航管理】顶部导航栏Nav的设置

这篇讲解顶部导航栏（Nav）的设置,包括如何设置、如何嵌套、如何独立出单独的配置页面。

设置独立的文档目录

导航的目的就是对文档的规划，所以这里我们先把所有文档都设置在一个统一目录内，方便以后的维护。打开 /.vitepress/config.mts 文件，在 description 配置项下，增加 srcDir:'docs' 属性。

export default defineConfig({
  title: "技术胖博客",
  description: "关注前端技术，每年出100集免费前端视频教程",
  srcDir:'docs',
  // ...
})

意思是把原根目录下的文章（文档目录）放到 docs 文件夹下了。

我们把对应的index.md、markdown-examples.md和api-examples.md三个文件移动到docs文件夹下。

导航栏Nav基本设置

Nav是现在在也买你顶部的导航栏。它包含站点标题、全局菜单链接等。配置这个也需要在config.mt文件的themeConfig配置项下进行配置。

可以找到如下代码

nav: [
    { text: 'Home', link: '/' },
    { text: 'Examples', link: '/markdown-examples' }
  ],

我们试着去修改一下导航，在docs文件夹下新建一个文件夹系统课程,然后在里边新建一个index.md文件。瞎写一些文字。

yaml

### 我是课程-首页

是否是的方式方式方式士大夫师傅是

同样的方法，再建立一个生活分享文件夹和index.md文件。

yaml

### 我是生活-首页

是否是的方式方式方式士大夫师傅是

有了这两个文件后，我们再次编写导航。

 nav:[
      {text:'首页',link:'/'},
      {text:'系统课程',link:'/系统课程/index'},
      {text:'生活分享',link:'/生活分享/index'}
     ],

这是最简单的配置，配置了三个导航，然后给了相应的链接。这里 text 是nav中显示的实际文本，而 link 是单击文本时跳转的链接。

当然导航链接也可以是下拉菜单。只要把普通导航的 link 换成 items 数组。比如在系统课程文件夹下再一个文件夹VitePress,然后复制几篇文章过来。

export default {
  themeConfig: {
   nav:[
      {text:'首页',link:'/'},
      {
        text:'系统课程',
        items:[{
                text:'VitePress',
                link:'/系统教程/VitePress/01.【邂逅初遇】VitePress介绍和安装.md'
            }]
        
      },
      {text:'生活分享',link:'/生活分享/index'}
     ],
  }
}

当然你也可以在下拉菜单中继续嵌套。我这里不建议嵌套太多，过度嵌套反而不好用。

自定义Nav激活状态

当前页面位于匹配路径下时，导航菜单项将突出显示。如果想自定义要匹配的路径，请将 activeMatch 属性和正则表达式定义为字符串值。


export default {
  themeConfig: {
    nav: [
     [
      {text:'首页',link:'/'},
      {
        text:'系统课程',
        items:[{
                text:'VitePress',
                link:'/系统教程/VitePress/01.【邂逅初遇】VitePress介绍和安装.md'
            }]
         activeMatch: '/系统课程/'
      },
      {text:'生活分享',link:'/生活分享/index'}
     ],
  }
}

自定义Nav的target和rel属性

默认情况下，VitePress 会根据链接是否为外部链接自动判断 target 和 rel 属性。但如果愿意，也可以自定义它们。

export default {
  themeConfig: {
    nav: [
      {
        text: 'Merchandise',
        link: 'https://www.thegithubshop.com/',
        target: '_self',
        rel: 'sponsored'
      }
    ]
  }
}

把Nav独立出去

当我们的网站边复杂后，导航栏的设置也将变得复杂起来。为了方便日后维护，我们可以把nav独立出一个 nav.mts 文件，里边只配置导航内容。这样作的好处是让配置文件看起来更加简单，利于日后的维护。

在 .vitepress 文件夹下新建一个nav.mts文件，然后编写如下代码。、

export default [
    {
        text:'系统课程',
        items:[{
            text:'系统课程',
            items:[{
                text:'VitePress',
                link:'/系统教程/VitePress/01.【邂逅初遇】VitePress介绍和安装.md'
            }]
        }]
    }
];

好了这就是本节学习的内容了，小伙伴可以赶紧打开自己的VitePress试试。

04.【导航管理】顶部导航栏Nav的设置 ​

设置独立的文档目录 ​

导航栏Nav基本设置 ​

自定义Nav激活状态 ​

自定义Nav的target和rel属性 ​