docsify

A magical documentation site generator.

## Features - Simple and lightweight (~12kb gzipped) - Multiple themes - Not build static html files ## Quick Start ### Create a project First create a project, then create a `docs` folder ```shell mkdir my-project && cd my-project mkdir docs && cd docs ``` ### Create entry file Create a `404.html` file ```html
``` Create `README.md` as the main page ``` # Title ## balabala ``` ### Deploy! Push and open the **GitHub Pages** feature ![image](https://cloud.githubusercontent.com/assets/7565692/20639058/e65e6d22-b3f3-11e6-9b8b-6309c89826f2.png) ## CLI Easy to setup and preivew a docs. ### Install ```shell npm i docsify-cli -g ``` ### Setup Setup a boilerplate docs ```shell docsify init docs ``` ### Preview Preview and serve your docs using ```shell docsify serve docs ``` Read more [docsify-cli](https://github.com/QingWei-Li/docsify-cli) ## Themes Currently available `vue.css` and `buble.css` ```html ``` Minified files ```html ``` ## More ### Multiple pages If you need other pages, directly create the markdown file, such as `guide.md` is `/guide`. ### Navbar Code in `404.html` ```html ``` ### CDN - UNPKG [https://unpkg.com/docsify/](https://unpkg.com/docsify/) - jsDelivr [http://www.jsdelivr.com/projects/docsify](http://www.jsdelivr.com/projects/docsify) ### Options #### repo Display the [GitHub Corner](http://tholman.com/github-corners/) widget. ```html ``` #### max-level Toc level. ```html ``` #### el Root element. ```html ``` #### sidebar-toggle Sidebar with toggle ```html ``` #### sidebar Custom sidebar. if it'set, the TOC will be disabeld. Bind global variables on the `data-sidebar`. ![image](https://cloud.githubusercontent.com/assets/7565692/20647425/de5ab1c2-b4ce-11e6-863a-135868f2f9b4.png) ```html ``` #### load-sidebar 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. ** you should add `.nojekyll` into docs folder, to prevent GitHub Pages from ignoring the `_sidebar.md`** ```html ``` You can specify a file: ```html ``` The contents of the file can be: ```markdown - [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 Load navbar markdown file. If it is configured, load the current directory `_navbar.md` by default. ```html ``` You can specify a file: ```html ``` The contents of the file can be: ```markdown - [en](/) - [chinese](/zh-cn) ``` If you write a sub level list, it will generate a dropdown list. ```markdown - [download](/download) - language - [en](/) - [chinese](/zh-cn) ``` #### router Hash router. You can replace `404.html` with `index.html`. ```html ``` #### auto2top Scroll to the top on changing hash. ```html ``` #### homepage `README.md` will be render as homepage for your website in docs folder, but sometimes we want to specify another file as a homepage, or even use the `README.md` in your repo. we can use (need `data-router`): ```html ``` #### basePath If your HTML entry file and the markdown files are in different directories, we can use: ```html ```