文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
定制导航栏
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论