查看“Docsify 自定义导航栏”的源代码

= 自定义导航栏 =

<span id="html"></span>
== HTML ==

如果你需要定制导航栏，可以用 HTML 创建一个导航栏。

!&gt; 注意：文档的链接都要以 <code>#/</code> 开头。

<pre lang="html"><!-- index.html -->

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

那我们可以通过 Markdown 文件来配置导航。首先配置 <code>loadNavbar</code>，默认加载的文件为 <code>_navbar.md</code>。具体配置规则见配置项#loadNavbar。

<pre lang="html"><!-- index.html -->

<script>
  window.$docsify = {
    loadNavbar: true
  }
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script></pre>
<pre class="markdown">&lt;!-- _navbar.md --&gt;

* [En](/)
* [简体中文](/zh-cn/)</pre>
!&gt; 你需要在 <code>./docs</code> 目录下创建一个 <code>.nojekyll</code> 文件，以防止 GitHub Pages 忽略下划线开头的文件。

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

== 嵌套 ==

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

<pre class="markdown">
&lt;!-- _navbar.md --&gt;

* 入门

  * [快速开始](zh-cn/quickstart.md)
  * [多页文档](zh-cn/more-pages.md)
  * [定制导航栏](zh-cn/custom-navbar.md)
  * [封面](zh-cn/cover.md)


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

<span id="整合自定义导航栏与-emoji-插件"></span>

== 整合自定义导航栏与 emoji 插件 ==

如果你使用 emoji 插件:

<pre lang="html"><!-- index.html -->

<script>
  window.$docsify = {
    // ...
  }
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script></pre>
例如，你可以在自定义导航栏 Markdown 文件中使用旗帜表情：

<pre class="markdown">&lt;!-- _navbar.md --&gt;

* [:us:, :uk:](/)
* [:cn:](/zh-cn/)</pre>