自定义导航栏

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

index.html

  1. <body>
  2. <nav>
  3. <a href="#/">EN</a>
  4. <a href="#/zh-cn/">中文</a>
  5. </nav>
  6. <div id="app"></div>
  7. </body>

配置文件

那我们可以通过 Markdown 文件来配置导航。首先配置 loadNavbar,默认加载的文件为 _navbar.md。具体配置规则见配置项#load-navbar

index.html

  1. <script>
  2. window.$docsify = {
  3. loadNavbar: true
  4. }
  5. </script>
  6. <script src="//unpkg.com/docsify"></script>

_navbar.md

  1. - [En](/)
  2. - [中文](/zh-cn/)

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

嵌套

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

_navbar.md

  1. - 基础
  2. - [快速开始](zh-cn/quickstart.md)
  3. - [多页文档](zh-cn/more-pages.md)
  4. - [定制导航栏](zh-cn/custom-navbar.md)
  5. - [封面](zh-cn/cover.md)
  6. - 配置
  7. - [配置项](zh-cn/configuration.md)
  8. - [主题](zh-cn/themes.md)
  9. - [使用插件](zh-cn/plugins.md)
  10. - [Markdown 配置](zh-cn/markdown.md)
  11. - [代码高亮](zh-cn/language-highlight.md)

效果图

嵌套导航栏