导航

导航是页面顶部显示的导航栏。它包含网站标题、全局菜单链接等。

网站标题和徽标

默认情况下，导航会显示网站标题，引用 config.title 值。如果您想更改导航上显示的内容，可以在 themeConfig.siteTitle 选项中定义自定义文本。

export default {
  themeConfig: {
    siteTitle: 'My Custom Title'
  }
}

如果您有网站徽标，可以通过传入图像路径来显示它。您应该将徽标直接放置在 public 中，并定义其绝对路径。

export default {
  themeConfig: {
    logo: '/my-logo.svg'
  }
}

添加徽标后，它会与网站标题一起显示。如果您的徽标是您需要的全部内容，并且您想隐藏网站标题文本，请将 false 设置为 siteTitle 选项。

export default {
  themeConfig: {
    logo: '/my-logo.svg',
    siteTitle: false
  }
}

您也可以将对象作为徽标传递，如果您想添加 alt 属性或根据深色/浅色模式进行自定义。有关详细信息，请参阅 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: '...' }
            ]
          }
        ]
      }
    ]
  }
}

自定义链接的“活动”状态

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

export default {
  themeConfig: {
    nav: [
      // This link gets active state when the user is
      // on `/config/` path.
      {
        text: 'Guide',
        link: '/guide',
        activeMatch: '/config/'
      }
    ]
  }
}

警告

activeMatch 预计是一个正则表达式字符串，但您必须将其定义为字符串。我们不能在这里使用实际的 RegExp 对象，因为它在构建时不可序列化。

自定义链接的“目标”和“rel”属性

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

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

社交链接

参阅 socialLinks。