mirror of https://gitee.com/docsifyjs/docsify.git synced 2024-12-02 12:10:04 +08:00

History

cinwell.li 37e7984e7e feat: custom sidebar, #4 (#5 ) * feat: custom sidebar, #4 * fix dev html * fix doc * fix doc		2016-11-27 18:53:31 +08:00
..
404.html	fix cdn path	2016-11-27 13:35:10 +08:00
README.md	feat: custom sidebar, #4 (#5 )	2016-11-27 18:53:31 +08:00
zh-cn.md	feat: custom sidebar, #4 (#5 )	2016-11-27 18:53:31 +08:00

README.md

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

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

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

Multiple pages

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>

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>

sidebar

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>