A magical documentation site generator.
- Easy and lightweight
- Custom themes
- No build
First create a project, then create a docs folder
mkdir my-project && cd my-project
mkdir docs && cd docsCreate a 404.html file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
</head>
<body>
<div id="app"></div>
</body>
<script src="//unpkg.com/docsify"></script>
</html>Create README.md as the main page
# Title
## balabala
Push and open the GitHub Pages feature
Easy to setup and preivew a docs.
npm i docsify-cli -gSetup a boilerplate docs
docsify init docsPreview and serve your docs using
docsify serve docsRead more docsify-cli
Currently available vue.css and buble.css
<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
<link rel="stylesheet" href="//unpkg.com/docsify/themes/buble.css">Minified files
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/buble.css">If you need other pages, directly create the markdown file, such as guide.md is /guide.
Code in 404.html
<nav>
<a href="/docsify/">En</a>
<a href="/docsify/zh-cn">中文</a>
</nav>Display the GitHub Corner widget.
<script src="//unpkg.com/docsify" data-repo="your/repo"></script>Toc level.
<script src="//unpkg.com/docsify" data-max-level="6"></script>Root element.
<script src="//unpkg.com/docsify" data-el="#app"></script>Sidebar with toggle
<script src="//unpkg.com/docsify" data-sidebar-toggle></script>Custom sidebar. if it'set, the TOC will be disabeld. Bind global variables on the data-sidebar.
<script>
window.sidebar = [
{ slug: '/', title: 'Home' },
{
slug: '/pageA',
title: 'page A',
children: [
{ slug: '/pageA/childrenB', title: 'children B' }
]
},
{ slug: '/PageC', title: 'Page C' }
]
</script>
<script src="/lib/docsify.js" data-sidebar="sidebar"></script>Load sidebar markdown file. If it is configured, load the current directory _sidebar.md by default. If the file isn't exist, sidebar will appear TOC.
<script src="/lib/docsify.js" data-load-sidebar></script>You can specify a file:
<script src="/lib/docsify.js" data-load-sidebar="_sidebar.md"></script>The contents of the file can be:
- [Home](/)
- [Installation](/installation)
- Essentials
- [Getting Started](/getting-started)
- [Dynamic Route Matching](/dynamic-matching)
- [Nested Routes](/nested-routes)
- [Programmatic Navigation](/navigation)
- [Named Routes](/named-routes)
- [Named Views](/named-views)
- [Redirect and Alias](/redirect-and-alias)
- [HTML5 History Mode](/history-mode)Load navbar markdown file. If it is configured, load the current directory _navbar.md by default.
<script src="/lib/docsify.js" data-load-navbar></script>You can specify a file:
<script src="/lib/docsify.js" data-load-navbar="_navbar.md"></script>The contents of the file can be:
- [en](/)
- [chinese](/zh-cn)If you write a sub level list, it will generate a dropdown list.
- [download](/download)
- language
- [en](/)
- [chinese](/zh-cn)