VitePress 中文网导航
Nav 是显示在页面顶部的导航栏。它包含站点标题、全局菜单链接等。
网站标题和Logo
默认情况下，nav 显示引用 config.title 值的站点标题。如果您想更改导航上显示的内容，您可以在"themeConfig.siteTitle"选项中定义自定义文本。
export default {
themeConfig: {
siteTitle: 'My Custom Title'
}
}如果您的站点有logo，则可以通过传递图像的路径来显示它。您应该将徽标直接放置在public中，并定义它的绝对路径。
export default {
themeConfig: {
logo: '/my-logo.svg'
}
}添加logo时，它会与站点标题一起显示。如果您只需要logo，并且想要隐藏站点标题文本，请将siteTitle选项设置为false。
export default {
themeConfig: {
logo: '/my-logo.svg',
siteTitle: false
}
}如果您想添加"alt"属性或根据暗/亮模式自定义它，您还可以将对象作为logo传递。有关详细信息，请参阅 themeConfig.logo。
导航链接
您可以定义themeConfig.nav选项来添加导航到您的导航的链接。
export default {
themeConfig: {
nav: [
{ text: 'Guide', link: '/guide' },
{ text: 'Config', link: '/config' },
{ text: 'Changelog', link: 'https://github.com/...' }
]
}
}text是导航中显示的实际文本，link是单击文本时将导航到的链接。对于链接，将路径设置为实际文件的路径，不带.md前缀，并始终以/开头。
导航链接也可以是下拉菜单。为此，请在链接选项上设置items键。
export default {
themeConfig: {
nav: [
{ text: 'Guide', link: '/guide' },
{
text: 'Dropdown Menu',
items: [
{ text: 'Item A', link: '/item-1' },
{ text: 'Item B', link: '/item-2' },
{ text: 'Item C', link: '/item-3' }
]
}
]
}
}请注意，下拉菜单标题（上例中的Dropdown Menu）不能具有link属性，因为它成为打开下拉对话框的按钮。
您还可以通过传入更多嵌套项目来进一步向下拉菜单项添加"部分"。
export default {
themeConfig: {
nav: [
{ text: 'Guide', link: '/guide' },
{
text: 'Dropdown Menu',
items: [
{
// Title for the section.
text: 'Section A Title',
items: [
{ text: 'Section A Item A', link: '...' },
{ text: 'Section B Item B', link: '...' }
]
}
]
},
{
text: 'Dropdown Menu',
items: [
{
// You may also omit the title.
items: [
{ text: 'Section A Item A', link: '...' },
{ text: 'Section B Item B', link: '...' }
]
}
]
}
]
}
}自定义链接的"active"状态
当当前页面位于匹配路径下时，导航菜单项将突出显示。如果您想自定义要匹配的路径，请将activeMatch属性和正则表达式定义为字符串值。
export default {
themeConfig: {
nav: [
// This link gets active state when the user is
// on `/config/` path.
{
text: 'Guide',
link: '/guide',
activeMatch: '/config/'
}
]
}
}WARNING
activeMatch 应该是正则表达式字符串，但您必须将其定义为字符串。我们不能在这里使用实际的 RegExp 对象，因为它在构建期间不可序列化。
自定义链接的"target"和"rel"属性
默认情况下，VitePress 根据链接是否为外部链接自动判断 target 和 rel 属性。但如果您愿意，您也可以自定义它们。
export default {
themeConfig: {
nav: [
{
text: 'Merchandise',
link: 'https://www.thegithubshop.com/',
target: '_self',
rel: 'sponsored'
}
]
}
}社交链接
请参阅 socialLinks。