设置导航¶

清晰简洁的导航结构是优秀项目文档的一个重要方面。Material for MkDocs 提供了多种选项来配置导航元素的行为，包括选项卡和部分，以及它的旗舰功能之一：即时加载。

额外的导航可以在页脚以及标签插件中进行配置。博客插件也会设置额外的导航。

配置¶

启用即时加载后，所有内部链接的点击都将被拦截并通过 XHR 调度，而无需完全重新加载页面。将以下行添加到 mkdocs.yml：

theme:
  features:
    - navigation.instant

生成的页面被解析和注入，所有事件处理程序和组件都会自动重新绑定，即 Material for MkDocs 现在的行为类似于单页应用程序。现在，搜索索引在导航后仍然存在，这对于大型文档站点特别有用。

为了在使用即时导航时在慢速连接时提供更好的用户体验，可以启用进度指示器。它将显示在页面顶部，并在页面完全加载后隐藏。您可以在 mkdocs.yml 中使用以下命令启用它：

theme:
  features:
    - navigation.instant
    - navigation.instant.progress

仅当页面在 400 毫秒后仍未完成加载时，才会显示进度指示器，因此快速连接永远不会显示它以获得更好的即时体验。

启用锚点跟踪后，地址栏中的 URL 会自动更新为活动锚点，如目录中突出显示的那样。将以下行添加到 mkdocs.yml：

theme:
  features:
    - navigation.tracking

启用选项卡后，对于大于 1220 像素的视口，顶级部分将呈现在标题下方的菜单层中，但在移动设备上保持原样。将以下行添加到 mkdocs.yml：

theme:
  features:
    - navigation.tabs

启用粘滞选项卡后，导航选项卡将锁定在标题下方，并在向下滚动时始终保持可见。只需将以下两个功能标志添加到mkdocs.yml：

theme:
  features:
    - navigation.tabs
    - navigation.tabs.sticky

启用部分后，对于超过 1220 像素的视口，顶级部分将在侧边栏中呈现为组，但在移动设备上保持原样。将以下行添加到 mkdocs.yml：

theme:
  features:
    - navigation.sections

功能标志 navigation.tabs 和 navigation.sections 可以相互组合。如果启用了两个功能标志，则会为级别 2 导航项呈现部分。

启用扩展后，左侧边栏将默认展开所有可折叠的子部分，因此用户不必手动打开子部分。将以下行添加到 mkdocs.yml：

theme:
  features:
    - navigation.expand

启用修剪后，呈现的 HTML 中仅包含可见的导航项，从而将构建网站的大小减少 33% 或更多。将以下行添加到 mkdocs.yml：

theme:
  features:
    - navigation.prune

此功能标志对于具有 100+ 甚至 1,000+ 个页面的文档网站特别有用，因为导航构成了 HTML 的很大一部分。导航修剪会将所有可展开的分区替换为指向该分区中第一页（或分区索引页）的链接。

启用区域索引页面后，文档可以直接附加到区域，这对于提供概述页面特别有用。将以下行添加到 mkdocs.yml：

theme:
  features:
    - navigation.indexes

为了将页面链接到某个部分，请在相应的文件夹中创建一个名为 index.md 的新文档，并将其添加到导航部分的开头：

nav:
  - Section:
    - section/index.md 
    - Page 1: section/page-1.md
    ...
    - Page n: section/page-n.md

启用目录的锚点跟随后，侧边栏会自动滚动，以便活动锚点始终可见。将以下行添加到 mkdocs.yml：

theme:
  features:
    - toc.follow

启用目录的导航集成后，它始终呈现为左侧导航侧边栏的一部分。将以下行添加到 mkdocs.yml：

theme:
  features:
    - toc.integrate

当用户向下滚动后再次开始向上滚动时，可以显示返回顶部按钮。它呈现在标题的正下方。将以下行添加到 mkdocs.yml：

theme:
  features:
    - navigation.top

导航和/或目录侧边栏可以通过扉页 hide 属性隐藏。在 Markdown 文件的顶部添加以下行：

---
hide:
  - navigation
  - toc
---

# Page title
...

设置内容区域的宽度，使每行的长度不超过 80-100 个字符，具体取决于字符的宽度。虽然这是一个合理的默认值，但由于较长的行往往更难阅读，因此可能需要增加内容区域的整体宽度，甚至使其延伸到整个可用空间。

这可以通过额外的样式表和几行 CSS 轻松实现：

docs/stylesheets/extra.css mkdocs.yml

.md-grid {
  max-width: 1440px; 
}

extra_css:
  - stylesheets/extra.css