返回介绍

定制导航栏

发布于 2020-11-22 06:30:29 字数 4070 浏览 1692 评论 0 收藏 0

HTML

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

注意:文档的链接都要以 #/ 开头。

<!-- index.html -->

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

配置文件

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

<!-- index.html -->

<script>
  window.$docsify = {
    loadNavbar: true
  }
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<!-- _navbar.md -->

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

你需要在 ./docs 目录下创建一个 .nojekyll 文件,以防止 GitHub Pages 忽略下划线开头的文件。

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

嵌套

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


<!-- _navbar.md -->

* 入门

  * [快速开始](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)

效果图

嵌套导航栏

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

如果你使用 emoji 插件:

<!-- 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>

例如,你可以在自定义导航栏 Markdown 文件中使用旗帜表情:

<!-- _navbar.md -->

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文