4ae87bb18b
* Update JS build - Change rollup build from API to config file - Change output dir from lib to dist - Update lib to dist path in related files - Update dependencies - Add banner comment to bundles - Add unminified plugin bundles * Update docs with v5 version lock and dist path * Update docs to reference minified themes * Clean up docs * Update CSS build - Change CSS build from API to CLI - Change output dir from lib to dist - Update lib to dist path in related files - Update dependencies - Add sourcemaps * Update dependencies * Clean up package.json and add keywords * Fix rimraf globs on Windows * Fix PostCSS CLI glob on Windows * Update test-related dependencies * Update emoji * Add engines prop to package.json
2.2 KiB
Custom navbar
HTML
If you need custom navigation, you can create a HTML-based navigation bar.
!> Note that documentation links begin with #/.
<!-- index.html -->
<body>
<nav>
<a href="#/">EN</a>
<a href="#/zh-cn/">简体中文</a>
</nav>
<div id="app"></div>
</body>
Markdown
Alternatively, you can create a custom markdown-based navigation file by setting loadNavbar to true and creating _navbar.md, compare loadNavbar configuration.
<!-- index.html -->
<script>
window.$docsify = {
loadNavbar: true,
};
</script>
<script src="//cdn.jsdelivr.net/npm/docsify@5/dist/docsify.min.js"></script>
<!-- _navbar.md -->
- [En](/)
- [chinese](/zh-cn/)
!> You need to create a .nojekyll in ./docs to prevent GitHub Pages from ignoring files that begin with an underscore.
_navbar.md is loaded from each level directory. If the current directory doesn't have _navbar.md, it will fall back to the parent directory. If, for example, the current path is /guide/quick-start, the _navbar.md will be loaded from /guide/_navbar.md.
Nesting
You can create sub-lists by indenting items that are under a certain parent.
<!-- _navbar.md -->
- Getting started
- [Quick start](quickstart.md)
- [Writing more pages](more-pages.md)
- [Custom navbar](custom-navbar.md)
- [Cover page](cover.md)
- Configuration
- [Configuration](configuration.md)
- [Themes](themes.md)
- [Using plugins](plugins.md)
- [Markdown configuration](markdown.md)
- [Language highlight](language-highlight.md)
renders as
Combining custom navbars with the emoji plugin
If you use the emoji plugin:
<!-- index.html -->
<script>
window.$docsify = {
// ...
};
</script>
<script src="//cdn.jsdelivr.net/npm/docsify@5/dist/docsify.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify@5/dist/plugins/emoji.min.js"></script>
you could, for example, use flag emojis in your custom navbar Markdown file:
<!-- _navbar.md -->
- [:us:, :uk:](/)
- [:cn:](/zh-cn/)