自定义导航栏

我们可以直接在 HTML 里定义导航栏，要注意链接要以 #/ 开头。

index.html

<body>
  <nav>
    <a href="#/">EN</a>
    <a href="#/zh-cn/">中文</a>
  </nav>
  <div id="app"></div>
</body>

配置文件

如果不想手工写导航栏组件，或者需要根据不同目录加载不同的导航栏，那我们可以通过 Markdown 文件来配置。首先配置 loadNavbar，默认加载的文件为 _navbar.md。具体配置规则见配置项#load-navbar一节。

index.html

<script>
  window.$docsify = {
    loadNavbar: true
  }
</script>
<script src="//unpkg.com/docsify"></script>

_navbar.md

- [En](/)
- [中文](/zh-cn/)

_navbar.md 加载逻辑和 sidebar 文件一致，从每层目录下获取。例如当前路由为 /zh-cn/custom-navbar 那么是从 /zh-cn/_navbar.md 获取导航栏。

嵌套

如果导航内容过多，可以写成嵌套的列表，会被渲染成下拉列表的形式。

_navbar.md

- 基础
 - [快速开始](zh-cn/quickstart)
 - [多页文档](zh-cn/more-pages)
 - [嵌套导航栏](zh-cn/custom-navbar)
 - [封面](zh-cn/cover)

- 配置
  - [配置项](zh-cn/configuration)
  - [主题](zh-cn/themes)
  - [使用插件](zh-cn/plugins)
  - [Markdown 配置](zh-cn/markdown)
  - [代码高亮](zh-cn/language-highlight)

效果图

1.5 KiB Raw Blame History

自定义导航栏

配置文件

嵌套

1.5 KiB

Raw Blame History