“这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天
一、涉及知识点：

• Vitepress文档开发网页导航
• Vitepress文档开发路由内容

二、详细知识点介绍：

导航

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

网站标题和徽标

默认情况下，nav 显示引用 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
  }
}

如果要添加属性或基于深色/浅色模式对其进行自定义，也可以将对象作为徽标传递。有关详细信息，请参阅 themeConfig.logo。alt

导航链接

您可以定义选项以向导航添加链接。themeConfig.nav

export default {
  themeConfig: {
    nav: [
      { text: 'Guide', link: '/guide' },
      { text: 'Configs', link: '/configs' },
      { 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' }
        ]
      }
    ]
  }
}

主要操作在js文件中，导航栏是首页搭建的第一步是十分重要的。

五、引用参考：
Vitepress官方文档文档