2016-11-27 15:24:07 +08:00
..
2016-11-27 13:35:10 +08:00
2016-11-27 13:30:40 +08:00
2016-11-27 15:24:07 +08:00

docsify

A magical documentation site generator.

Features

  • Easy and lightweight
  • Custom themes
  • No build

Quick Start

Create a project

First create a project, then create a docs folder

mkdir my-project && cd my-project
mkdir docs && cd docs

Create entry file

Create 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

Deploy!

Push and open the GitHub Pages feature image

CLI

Easy to setup and preivew a docs.

Install

npm i docsify-cli -g

Setup

Setup a boilerplate docs

docsify init docs

Preview

Preview and serve your docs using

docsify serve docs

Read more docsify-cli

Themes

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

More

Multiple pages

If you need other pages, directly create the markdown file, such as guide.md is /guide.

Navbar

Code in 404.html

<nav>
  <a href="/docsify/">En</a>
  <a href="/docsify/zh-cn">中文</a>
</nav>

Options

repo

Display the GitHub Corner widget.

<script src="//unpkg.com/docsify" data-repo="your/repo"></script>

max-level

Toc level.

<script src="//unpkg.com/docsify" data-max-level="6"></script>

el

Root element.

<script src="//unpkg.com/docsify" data-el="#app"></script>