导航栏
Mr.Hope 2020-10-13 大约 11 分钟
导航栏可能包含你的站点名称、搜索框、 导航栏链接、多语言切换 (opens new window)、仓库链接，它们均取决于你的配置。
# 导航栏链接
你可以通过 themeConfig.nav 增加一些导航栏链接。
基础的配置项有 text 导航栏文字，link 导航栏链接， icon 导航栏图标:
当你提供了一个 items 数组而不是一个单一的 link 时，它将显示为下拉列表 :
由于大多数情况下，导航栏的分组项目都属于同一类别，会放在同一个子目录下，它们具有相同的路径前缀。为了简化配置，你可以添加 prefix 字段为分组的每一个子链接添加一个前缀:
此外，你还可以通过嵌套的 items 来在下拉列表中设置分组:
例子
# 禁用导航栏
你可以使用 themeConfig.navbar 来禁用所有页面的导航栏:
o disable the navbar globally, use themeConfig.navbar:
你也可以通过 YAML front matter 来禁用某个指定页面的导航栏:
---
navbar: false
---
1
2
3
2
3
# 导航栏图标
你可以使用 themeConfig.logo 来配置导航栏的图标，请填入绝对路径。
当配置图标之后，在移动视图上，图标将取代先前的站点名称显示在导航栏上。
提示
你可以设置 themeConfig.darkLogo 以在暗黑模式下显示另一个 Logo。
# 搜索框
# 内置搜索
你可以通过设置 themeConfig.search: false 来禁用默认的搜索框，或是通过 themeConfig.searchMaxSuggestions 来调整默认搜索框显示的搜索结果数量:
你可以通过 YAML front matter 来对单独的页面禁用内置的搜索框:
---
search: false
---
1
2
3
2
3
提示
内置搜索只会为页面的标题、h2 和 h3 构建搜索索引，如果你需要全文搜索，你可以使用 Algolia 搜索。
# Algolia 搜索
你可以通过 themeConfig.algolia 选项来用 Algolia 搜索 (opens new window) 替换内置的搜索框。要启用 Algolia 搜索，你需要至少提供 apiKey 和 indexName:
注意
不同于开箱即用的 内置搜索，Algolia 搜索 (opens new window) 需要你在使用之前将你的网站提交给它们用于创建索引。
更多选项请参考 Algolia DocSearch 的文档 (opens new window)。
# 搜索占位符
# Git 仓库和编辑链接
当你提供了 themeConfig.repo 选项，将会自动在每个页面的导航栏生成生成一个 GitHub 链接，以及在页面的底部生成一个 "Edit this page" 链接。
你可以通过 YAML front matter 来禁用指定页面的编辑链接:
---
editLink: false
---
1
2
3
2
3
# 主题色切换按钮
具体详情请见 主题色 章节。
# 深色模式切换按钮
具体详情请见 深色模式 章节。
# 全屏按钮
具体详情请见 全屏按钮 章节。
# navbarConfig
我们提供了一个 navbarConfig Helper 函数。你可以从 vuepress-theme-hope 中将其引入，并包裹你的导航栏配置来让编辑器提供自动补全并帮助你校验导航栏配置是否正确。
提示
当你将 VuePress 配置拆分成多个部分时，你可以使用该 Helper 函数来保持自动补全与校验。