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
文件。瞎写一些文字。
### 我是课程-首页
是否是的方式方式方式士大夫师傅是
同样的方法,再建立一个生活分享
文件夹和index.md
文件。
### 我是生活-首页
是否是的方式方式方式士大夫师傅是
有了这两个文件后,我们再次编写导航。
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试试。