-> v2.3.0

2.3.0

.eslintrc

@@ -1,6 +1,9 @@
 {
   "extends": ["vue"],
+  "env": {
+    "browser": true
+  },
   "globals": {
-    "XMLHttpRequest": true
+    "$docsify": true
   }
 }

.gitignore

@@ -1,5 +1,4 @@
 .DS_Store
 *.log
 node_modules
-yarn.lock
 /themes

CHANGELOG.md

@@ -1,205 +1,66 @@
-## 1.5.1
-### Bug fixes
-- Remove HTML tag when handling slug
+### 2.3.0
 
-## 1.5.0
+> 2017-02-13
 
-### Bug fixes
-- Fix slugify.
-- Fix nav highlight.
+#### Features
 
-### Features
-- Initialize the configuration by `window.$docsify`.
-- Markdown parser is configurable.
+- feat(src): add alias feature
+- docs: update all documents
+- feat(src): dynamic title
+- feat(hook): support custom plugin
+- feat(themes): add dark theme
 
-## 1.4.3
-### Bug fixes
-- Tweak style.
+#### Bug fixes
+- fix(event): `auto2top` has no effect on a FF mobile browser, fixed #67
+- fix: sidebar style
+- fix(render): fix render link
 
-## 1.4.2
+### 2.2.1
 
-### Bug fixes
-- Fix toggle button style.
-- Support `mailto`, `tel`, etc. href type
-- Fix scroll to top.
+> 2017-02-11
 
+#### Bug fixes
+- fix(search): crash when not content, fixed #68
+- fix(event): scroll active sidebar
+- fix(search): not work in mobile
 
-## 1.4.1
-### Bug fixes
-- Fix generate slug.
+### 2.2.0
 
-## 1.4.0 Happly new year 🎉
-### Features
-- Display TOC in the custom sidebar, `data-sub-max-level`.
-- Custom background in coverpage.
+#### Features
+- Add `Google Analytics` plugin.
+```html
+<script src="//unpkg.com/docsify" data-ga="UA-XXXXX-Y"></script>
+<script src="//unpkg.com/docsify/lib/plugins/ga.js"></script>
+```
 
-### Bug fixes
-- Fix scroll highlight when Vue exist.
+### 2.1.0
+#### Features
+- Add search plugin
+```html
+<script src="//unpkg.com/docsify"></script>
+<script src="//unpkg.com/docsify/lib/plugins/search.js"></script>
+```
 
-## 1.3.5
-### Bug fixes
-- Fix vue
+#### Bug fixes
+- fix sidebar style
 
-## 1.3.4
-### Bug fixes
+### 2.0.3
+#### Bug fixes
+- fix: rendering emojis
+- fix: css var polyfill
 
-- Supports [vuep](https://github.com/QingWei-Li/vuep)
+### 2.0.2
 
-## 1.3.3
-### Bug fixes
-- Fixed cover rendering timing
+#### Bug fixes
+- fix button style in cover page.
 
-## 1.3.2
+### 2.0.1
+#### Bug fixes
+- border style.
 
-### Bug fixes
-- Fixed render link
+### 2.0.0
+#### Features
+- Customize the theme color
 
-## 1.3.1
-
-### Bug fixes
-- Fixed cover page style
-- Generate the correct link when rendering the article
-
-## 1.3.0
-### Features
-- Add cover page
-- add `<kbd>` style
-- headling can be cliked
-
-### Bug fixes
-- sidebar highlight
-
-
-### break change
-- Navbar no longer fixed at the top
-
-## 1.2.0
-### Features
-- custom basePath
-- custom homepage
-
-## 1.1.7
-### Bug fixes
-- Optimize progress bar
-
-## 1.1.6
-### Features
-- Add logo 😂
-
-### Bug fixes
-- Remove table background color
-- Fixed highlight sidebar using chinese ids
-
-## 1.1.5
-### Features
-- Add table style
-
-### Bug fixes
-- Not fixed position of hte navbar in the mobile browser
-- Correct calculation of whether the mobile browser
-
-## 1.1.4
-### Bug fixes
-- Fixed chinese auchor link
-
-## 1.1.3
-### Bug fixes
-- Optimize progress bar again
-
-## 1.1.2
-### Bug fixes
-- fix failed `auto2top` in mobile
-
-
-## 1.1.1
-### Bug fixes
-- Optimize progress bar
-
-## 1.1.0
-## Features
-- Add progress bar
-- Add `auto2top` option for hash router
-
-## 1.0.3
-### Bug fixes
-- Fix cache
-
-## 1.0.2
-### Bug fixes
-- Fix binding events bug, fixed #24
-- Fix regular expression, fixed #23
-
-## 1.0.1
-### Bug fixes
-- `img` style
-
-## 1.0.0
-## Features
-- Support hash router
-
-### Bug fixes
-- Improved scrolling on mobile
-
-## 0.7.0
-### Breaking change
-- `themes/` was removed, only exists in the npm package.
-
-### Bug fixes
-- Fix style.
-- Fix sidebar animation again.
-
-## 0.6.1
-### Bug fixes
-- In the mobile, it should collapse the sidebar when toggle is clicked.
-- Fix the dropdown list style.
-- Fix sidebar animation.
-
-## 0.6.0
-### Features
-- Navbar support dropdown list, #6
-- Sidebar with toggle
-
-### Bug fixes
-- Fix ineffective option, fixed #10
-
-## 0.5.0
-### Features
-- Custom sidebars and navbars by markdown file
-
-## 0.4.2
-### Bug fixes
-- Correct catch ajax error
-
-## 0.4.1
-### Bug fixes
-- catch ajax error
-
-## 0.4.0
-### Features
-- Custom sidebar
-
-### Bug fixes
-- Fix undefined language
-
-## 0.3.1
-### Bug fixes
-- Strip HTML tag when rendering the headings
-
-## 0.3.0
-### Features
-- Add minified css files
-- Add max level option
-- Add pure.css
-
-## 0.2.1
-### Bug fixes
-- Fix vue.css
-
-## 0.2.0
-### Bug fixes
-- Fix route
-- Remove dynamic title
-
-## 0.1.0
-### Features
-- Add buble.css
+#### Break change
+- Remove `data-router`, `data-sidebar`, `data-sidebar-toggle` APIs

HISTORY.md

@@ -0,0 +1,287 @@
+### 1.10.5
+#### Bug fixes
+- fix initialize the Vue instance
+
+### 1.10.4
+#### Bug fixes
+- fix execute script
+
+### 1.10.3
+#### Bug fixes
+- compatible vuep QingWei-Li/vuep/issues/2
+- fix sidebar scroll, fixed #63
+
+### 1.10.2
+#### Bug fixes
+- Fix render emojis again
+
+### 1.10.1
+#### Bug fixes
+- Fix render emojis
+
+### 1.10.0
+#### Features
+- Support emoji :laughing:
+
+### 1.9.0
+
+#### Bug fixes
+- Destroys the vue instance when the route is changed
+
+#### Features
+- Add `!>` and `?>` doc helper.
+
+#### Break change
+- Remove `!` doc helper.
+
+### 1.8.0
+#### Bug fixes
+- Using `v-pre` skip compilation.
+
+### Features
+- Execute script when vue exists.
+
+### 1.7.4
+#### Bug fixes
+- Fix bugs caused by the previous version
+
+### 1.7.3
+#### Bug fixes
+- Add `hr` style
+- Fixed option is an empty string
+
+### 1.7.2
+#### Bug fixes
+- Fix sidebar click event in mobile browser.
+
+### 1.7.1
+#### Bug fixes
+- Fix sidebar style in mobile browser.
+
+### 1.7.0
+
+#### Bug fixes
+- Fixed custom cover background, fixed #52
+- Fixed sticky sidebar
+
+### Features
+- Add `name` and `nameLink`
+
+### 1.6.1
+#### Bug fixes
+- Fixed sidebar bug when the coverpage exist
+
+### 1.6.0
+#### Features
+- Improve sidebar performance. The active item is automatically scrolled in the visible view.
+- New doc helper: `! `. e.g. `! content` will be rendered as `<p class="tip">content</p>`
+
+### 1.5.2
+#### Bug fixes
+- Fixed number at the beginning of the slug
+
+### 1.5.1
+#### Bug fixes
+- Remove HTML tag when handling slug
+
+### 1.5.0
+
+#### Bug fixes
+- Fix slugify.
+- Fix nav highlight.
+
+#### Features
+- Initialize the configuration by `window.$docsify`.
+- Markdown parser is configurable.
+
+### 1.4.3
+#### Bug fixes
+- Tweak style.
+
+### 1.4.2
+
+#### Bug fixes
+- Fix toggle button style.
+- Support `mailto`, `tel`, etc. href type
+- Fix scroll to top.
+
+
+### 1.4.1
+#### Bug fixes
+- Fix generate slug.
+
+### 1.4.0 Happly new year 🎉
+#### Features
+- Display TOC in the custom sidebar, `data-sub-max-level`.
+- Custom background in coverpage.
+
+#### Bug fixes
+- Fix scroll highlight when Vue exist.
+
+### 1.3.5
+#### Bug fixes
+- Fix vue
+
+### 1.3.4
+#### Bug fixes
+
+- Supports [vuep](https://github.com/QingWei-Li/vuep)
+
+### 1.3.3
+#### Bug fixes
+- Fixed cover rendering timing
+
+### 1.3.2
+
+#### Bug fixes
+- Fixed render link
+
+### 1.3.1
+
+#### Bug fixes
+- Fixed cover page style
+- Generate the correct link when rendering the article
+
+### 1.3.0
+#### Features
+- Add cover page
+- add `<kbd>` style
+- headling can be cliked
+
+#### Bug fixes
+- sidebar highlight
+
+
+#### break change
+- Navbar no longer fixed at the top
+
+### 1.2.0
+#### Features
+- custom basePath
+- custom homepage
+
+### 1.1.7
+#### Bug fixes
+- Optimize progress bar
+
+### 1.1.6
+#### Features
+- Add logo 😂
+
+#### Bug fixes
+- Remove table background color
+- Fixed highlight sidebar using chinese ids
+
+### 1.1.5
+#### Features
+- Add table style
+
+#### Bug fixes
+- Not fixed position of hte navbar in the mobile browser
+- Correct calculation of whether the mobile browser
+
+### 1.1.4
+#### Bug fixes
+- Fixed chinese auchor link
+
+### 1.1.3
+#### Bug fixes
+- Optimize progress bar again
+
+### 1.1.2
+#### Bug fixes
+- fix failed `auto2top` in mobile
+
+
+### 1.1.1
+#### Bug fixes
+- Optimize progress bar
+
+### 1.1.0
+#### Features
+- Add progress bar
+- Add `auto2top` option for hash router
+
+### 1.0.3
+#### Bug fixes
+- Fix cache
+
+### 1.0.2
+#### Bug fixes
+- Fix binding events bug, fixed #24
+- Fix regular expression, fixed #23
+
+### 1.0.1
+#### Bug fixes
+- `img` style
+
+### 1.0.0
+#### Features
+- Support hash router
+
+#### Bug fixes
+- Improved scrolling on mobile
+
+### 0.7.0
+#### Breaking change
+- `themes/` was removed, only exists in the npm package.
+
+#### Bug fixes
+- Fix style.
+- Fix sidebar animation again.
+
+### 0.6.1
+#### Bug fixes
+- In the mobile, it should collapse the sidebar when toggle is clicked.
+- Fix the dropdown list style.
+- Fix sidebar animation.
+
+### 0.6.0
+#### Features
+- Navbar support dropdown list, #6
+- Sidebar with toggle
+
+#### Bug fixes
+- Fix ineffective option, fixed #10
+
+### 0.5.0
+#### Features
+- Custom sidebars and navbars by markdown file
+
+### 0.4.2
+#### Bug fixes
+- Correct catch ajax error
+
+### 0.4.1
+#### Bug fixes
+- catch ajax error
+
+### 0.4.0
+#### Features
+- Custom sidebar
+
+#### Bug fixes
+- Fix undefined language
+
+### 0.3.1
+#### Bug fixes
+- Strip HTML tag when rendering the headings
+
+### 0.3.0
+#### Features
+- Add minified css files
+- Add max level option
+- Add pure.css
+
+### 0.2.1
+#### Bug fixes
+- Fix vue.css
+
+### 0.2.0
+#### Bug fixes
+- Fix route
+- Remove dynamic title
+
+### 0.1.0
+#### Features
+- Add buble.css

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2016 cinwell.li
+Copyright (c) 2016 - 2017 cinwell.li
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -11,7 +11,7 @@
 <p align="center">
   <a href="https://travis-ci.org/QingWei-Li/docsify"><img alt="Travis Status" src="https://img.shields.io/travis/rust-lang/rust/master.svg?style=flat-square"></a>
   <a href="https://www.npmjs.com/package/docsify"><img alt="npm" src="https://img.shields.io/npm/v/docsify.svg?style=flat-square"></a>
-  <a href="https://github.com/vuejs/vue"><img alt="code style" src="https://img.shields.io/badge/code%20style-vue-orange.svg?style=flat-square"></a>
+  <a href="https://github.com/QingWei-Li/donate"><img alt="donate" src="https://img.shields.io/badge/%24-donate-ff69b4.svg?style=flat-square"></a>
 </p>
 
 ## Links
@@ -19,12 +19,15 @@
 - [CLI](https://github.com/QingWei-Li/docsify-cli)
 
 ## Features
-- Simple and lightweight (~13kB gzipped)
-- Multiple themes
 - Not build static html files
+- Simple and lightweight (~13kB gzipped)
+- Smart full-text search plugin
+- Multiple themes
+- Useful plugin API
+- Compatible with IE9+
 
 ## Quick start
-Create a `index.html` and using `hash router`.
+Create a `index.html`.
 
 index.html
 
@@ -38,20 +41,23 @@ index.html
 <body>
   <div id="app"></div>
 </body>
-<script src="//unpkg.com/docsify" data-router></script>
+<script src="//unpkg.com/docsify"></script>
 </html>
 ```
 
-## CDN
-- UNPKG [https://unpkg.com/docsify/](https://unpkg.com/docsify/)
-- jsDelivr [http://www.jsdelivr.com/projects/docsify](http://www.jsdelivr.com/projects/docsify)
+## Browser Support
+
+Modern browsers and Internet Explorer 9+.
 
 ## Showcase
 These open-source projects are using docsify to generate their sites. Pull requests welcome : )
 
-- [docsify](https://docsify.js.org) - A magical documentation site generator.
 - [Snipaste](https://docs.snipaste.com/) - A new way to boost your productivity.
 - [puck](https://puck.zz173.com/) - A small & magical php framework.
+- [Samaritan](http://samaritan.stockdb.org) - An Algorithmic Trading Framework for Digital Currency.
+- [Vudash](http://vudash.github.io/vudash/) - Powerful, Flexible, Open Source dashboards for anything
+- [Trilogy](http://trilogy.js.org) - No-hassle SQLite with a Promise-based, document store style API.
+- [Mybatis-Plus](http://mp.baomidou.com/) - An enhanced toolkit of Mybatis to simplify development
 
 ## Similar projects
 - [docute](https://github.com/egoist/docute) - 📜 Effortlessly documentation done right
@@ -68,20 +74,10 @@ These open-source projects are using docsify to generate their sites. Pull reque
 
 ## Development
 
-### prepare
-```shell
+```bash
 npm i && npm run dev
 open http://localhost:3000
 ```
 
-### More Language Highlight
-
-```html
-<script src="//unpkg.com/docsify"></script>
-<script src="//unpkg.com/prismjs/components/prism-bash.js"></script>
-<script src="//unpkg.com/prismjs/components/prism-php.js"></script>
-```
-
 ## License
 MIT
-

build/build-css.js

@@ -2,8 +2,17 @@ var fs = require('fs')
 var cssnano = require('cssnano').process
 var resolve = require('path').resolve
 var postcss = require('postcss')
+var isProd = process.argv[process.argv.length - 1] !== '--dev'
 
-var processor = postcss([require('postcss-salad')])
+var processor = postcss([require('postcss-salad')({
+  features: {
+    precss: {
+      properties: {
+        preserve: true
+      }
+    }
+  }
+})])
 
 var saveMin = function (file, content) {
   fs.writeFileSync(resolve(__dirname, '../lib/themes/', file), content)
@@ -26,7 +35,7 @@ list.forEach(function (file) {
     .then(function (result) {
       save(file, result.css)
       console.log('salad - ' + file)
-      cssnano(loadLib(file))
+      isProd && cssnano(loadLib(file))
         .then(function (result) {
           saveMin(file, result.css)
           console.log('cssnao - ' + file)

build/build.js

@@ -3,6 +3,7 @@ var buble = require('rollup-plugin-buble')
 var commonjs = require('rollup-plugin-commonjs')
 var nodeResolve = require('rollup-plugin-node-resolve')
 var uglify = require('rollup-plugin-uglify')
+var isProd = process.argv[process.argv.length - 1] !== '--dev'
 
 var build = function (opts) {
   rollup
@@ -16,7 +17,7 @@ var build = function (opts) {
       console.log(dest)
       bundle.write({
         format: 'iife',
-        moduleName: opts.moduleName || 'Docsify',
+        moduleName: opts.moduleName || 'D',
         dest: dest
       })
     })
@@ -30,8 +31,30 @@ build({
   output: 'docsify.js',
   plugins: [commonjs(), nodeResolve()]
 })
-build({
+isProd && build({
   entry: 'index.js',
   output: 'docsify.min.js',
   plugins: [commonjs(), nodeResolve(), uglify()]
 })
+build({
+  entry: 'plugins/search.js',
+  output: 'plugins/search.js',
+  moduleName: 'D.Search'
+})
+isProd && build({
+  entry: 'plugins/search.js',
+  output: 'plugins/search.min.js',
+  moduleName: 'D.Search',
+  plugins: [uglify()]
+})
+build({
+  entry: 'plugins/ga.js',
+  output: 'plugins/ga.js',
+  moduleName: 'D.GA'
+})
+isProd && build({
+  entry: 'plugins/ga.js',
+  output: 'plugins/ga.min.js',
+  moduleName: 'D.GA',
+  plugins: [uglify()]
+})

dev.html

@@ -2,11 +2,33 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
+  <title>docsify</title>
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <link rel="stylesheet" href="/themes/vue.css">
 </head>
-<body class="">
+<body>
+  <nav>
+    <a href="#/">EN</a>
+    <a href="#/zh-cn/">中文</a>
+  </nav>
   <div id="app"></div>
 </body>
-<script src="/lib/docsify.js" data-repo="qingwei-li/docsify" data-auto2top data-sidebar-toggle data-router></script>
+<script>
+  window.$docsify = {
+    alias: {
+      '/zh-cn/changelog': '/changelog',
+      '/changelog': 'https://raw.githubusercontent.com/QingWei-Li/docsify/master/CHANGELOG'
+    },
+    search: {
+      maxAge: 0
+    }
+  }
+</script>
+<script
+  src="/lib/docsify.js"
+  data-name="docsify"
+  data-load-sidebar
+  data-sub-max-level="2"
+  data-base-path="docs/"
+  data-auto2top></script>
 </html>

docs/README.md

@@ -1,413 +1,27 @@
-## 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 `index.html` file
-
-```html
-<!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" data-router></script>
-</html>
-```
-
-Create `README.md` as the main page
-
-```
-# Title
-
-## blabla
-```
-
-### Deploy!
-Push code and activate **GitHub Pages** via your repo's settings
-![image](https://cloud.githubusercontent.com/assets/7565692/20639058/e65e6d22-b3f3-11e6-9b8b-6309c89826f2.png)
-
-## CLI
-
-Easy to setup and preview 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)
-
-
-
-## More
-
-### Themes
-Currently available `vue.css` and `buble.css`
-```html
-<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
-<link rel="stylesheet" href="//unpkg.com/docsify/themes/buble.css">
-```
-
-Minified files
-
-```html
-<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`.
-
-### Navbar
-Code in `index.html`
-
-```html
-<nav>
-  <a href="/#/docsify/">En</a>
-  <a href="/#/docsify/zh-cn">中文</a>
-</nav>
-```
-
-### CDN
-- UNPKG [https://unpkg.com/docsify/](https://unpkg.com/docsify/)
-- jsDelivr [http://www.jsdelivr.com/projects/docsify](http://www.jsdelivr.com/projects/docsify)
-
-
-### Cover Page
-
-Generate a cover page with markdown. Create a `_coverpage.md` and set `data-coverpage` in the script tag.
-
-```markdown
-![logo](_media/icon.svg)
-
-# docsify <small>1.2.0</small>
+## docsify
 
 > A magical documentation site generator.
 
-- Simple and lightweight (~12kb gzipped)
-- Multiple themes
+## What is it
+
+docsify generates your documentation website on the fly. Unlike GitBook, it does not generate static html files. It smartly loads and parses your Markdown files and displays them in website. All you need to do is create an `index.html` to start and [deploy it on GitHub Pages](/deploy).
+
+See the [Quick start](/quickstart) for more details.
+
+## Features
+
 - Not build static html files
+- Simple and lightweight (~13kB gzipped)
+- Smart full-text search plugin
+- Multiple themes
+- Useful plugin API
+- Compatible with IE9+
 
+## Examples
 
-[GitHub](https://github.com/QingWei-Li/docsify/)
-[Get Started](#quick-start)
-```
+Check out the [Showcase](https://github.com/QingWei-Li/docsify/#showcase) to see use the docsify generated website.
 
-#### Custom background
-Currently the background of the cover page is generated randomly. We can customize the background color, or add a background image.
+## Donate
 
-```markdown
-# docsify <small>1.2.0</small>
+If you think docsify is helpful to you or that my work is valuable. I am happy if you can help me [buy a cup of coffee](https://github.com/QingWei-Li/donate). :heart:
 
-> xxx
-
-[GitHub](https://github.com/QingWei-Li/docsify/)
-[Get Started](#quick-start)
-
-<!-- background image -->
-![](_media/bg.png)
-<!-- background color -->
-![color](#f0f0f0)
-```
-
-### Markdown parser
-
-Docsify uses [marked](https://github.com/chjj/marked) to parse markdown. We can configure it
-
-```js
-window.$docsify = {
-  markdown: {
-    smartypants: true
-  }
-}
-```
-
-And it can even be customized
-
-```js
-window.$docsify = {
-  markdown: function(marked) {
-    // ...
-
-    return marked
-  }
-}
-```
-
-## Options
-
-You can add configurations in the script tag attributes or with `window.$docsify`.
-
-### repo
-Display the [GitHub Corner](http://tholman.com/github-corners/) widget.
-
-```html
-<script src="//unpkg.com/docsify" data-repo="your/repo"></script>
-```
-
-
-```js
-window.$docsify = {
-  repo: 'your/repo'
-}
-```
-
-### max-level
-TOC level.
-
-```html
-<script src="//unpkg.com/docsify" data-max-level="6"></script>
-```
-
-```js
-window.$docsify = {
-  maxLevel: 6
-}
-```
-
-### el
-Root element.
-
-```html
-<script src="//unpkg.com/docsify" data-el="#app"></script>
-```
-
-```js
-window.$docsify = {
-  el: '#app'
-}
-```
-
-### sidebar-toggle
-
-Sidebar with toggle
-
-```html
-<script src="//unpkg.com/docsify" data-sidebar-toggle></script>
-```
-
-```js
-window.$docsify = {
-  sidebarToggle: true
-}
-```
-
-### sidebar
-
-Custom sidebar. If it's set, the TOC will be disabled. Bind global variables on the `data-sidebar`.
-
-![image](https://cloud.githubusercontent.com/assets/7565692/20647425/de5ab1c2-b4ce-11e6-863a-135868f2f9b4.png)
-
-```html
-<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>
-```
-
-
-```js
-window.$docsify = {
-  sidebar: 'sidebar'
-}
-```
-
-### load-sidebar
-
-Load sidebar markdown file. If it is configured, load the current directory `_sidebar.md` by default. If the file doesn't exist, the sidebar will appear as a TOC.
-** you should add `.nojekyll` into docs folder to prevent GitHub Pages from ignoring the `_sidebar.md`**
-
-```html
-<script src="/lib/docsify.js" data-load-sidebar></script>
-```
-
-You can specify a file:
-
-```html
-<script src="/lib/docsify.js" data-load-sidebar="_sidebar.md"></script>
-```
-
-```js
-window.$docsify = {
-  loadSidebar: '_sidebar.md'
-}
-```
-
-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)
-```
-
-### sub-max-level
-
-Display TOC in the custom sidebar. The default value is 0.
-
-
-```html
-<script src="/lib/docsify.js" data-load-sidebar data-max-sub-level="4"></script>
-```
-
-
-```js
-window.$docsify = {
-  maxSubLevel: 4
-}
-```
-
-### load-navbar
-
-Load navbar markdown file. If it is configured, load the current directory `_navbar.md` by default.
-
-```html
-<script src="/lib/docsify.js" data-load-navbar></script>
-```
-
-You can specify a file:
-
-```html
-<script src="/lib/docsify.js" data-load-navbar="_navbar.md"></script>
-```
-
-```js
-window.$docsify = {
-  loadNavbar: '_navbar.md'
-}
-```
-
-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.
-
-```html
-<script src="/lib/docsify.js" data-router></script>
-```
-
-```js
-window.$docsify = {
-  router: true
-}
-```
-
-
-### auto2top
-
-Scroll to the top on changing hash.
-
-
-```html
-<script src="/lib/docsify.js" data-auto2top></script>
-```
-
-```js
-window.$docsify = {
-  auto2top: true
-}
-```
-
-### homepage
-
-`README.md` will be rendered as a homepage for your website in the 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
-<script src="/lib/docsify.js" data-homepage="https://raw.githubusercontent.com/QingWei-Li/docsify/master/README.md"></script>
-<!-- Or using `Welcome.md` as homepge -->
-<script src="/lib/docsify.js" data-homepage="Welcome.md"></script>
-```
-
-
-```js
-window.$docsify = {
-  homepage: true
-}
-```
-
-
-### basePath
-
-If your HTML entry file and the markdown files are in different directories, we can use:
-
-```html
-<script src="/lib/docsify.js" data-base-path="/base/"></script>
-
-<!-- Even if the docs is on another site 😄 -->
-<script src="/lib/docsify.js" data-base-path="https://docsify.js.org/"></script>
-```
-
-
-```js
-window.$docsify = {
-  basePath: '/base/'
-}
-```
-
-
-### coverpage
-
-Generate cover page.
-
-```html
-<script src="/lib/docsify.js" data-coverpage></script>
-<!-- or -->
-<script src="/lib/docsify.js" data-coverpage="other.md"></script>
-```
-
-```js
-window.$docsify = {
-  coverpage: true
-}
-```

docs/_coverpage.md

@@ -1,12 +1,12 @@
 ![logo](_media/icon.svg)
 
-# docsify <small>1.5.1</small>
+# docsify <small>2.3.0</small>
 
 > A magical documentation site generator.
 
 - Simple and lightweight (~13kB gzipped)
-- Multiple themes
 - Not build static html files
+- Multiple themes
 
 
 [GitHub](https://github.com/QingWei-Li/docsify/)

docs/_sidebar.md

@@ -0,0 +1,20 @@
+- Getting started
+ - [Quick start](/quickstart)
+ - [Writing more pages](/more-pages)
+ - [Custom navbar](/custom-navbar)
+ - [Cover page](/cover)
+
+- Configuration
+  - [Configuration](/configuration)
+  - [Themes](/themes)
+  - [Using plugins](/plugins)
+  - [Markdown configuration](/markdown)
+  - [Lanuage highlight](/language-highlight)
+
+- Guide
+ - [Deploy](/deploy)
+ - [Doc helper](/helpers)
+ - [Compatible Vue](/vue)
+ - [CDN](/cdn)
+
+- [Changelog](/changelog)

docs/cdn.md

@@ -0,0 +1,42 @@
+# CDN
+
+Recommended: [unpkg](//unpkg.com), which will reflect the latest version as soon as it is published to npm. You can also browse the source of the npm package at [unpkg.com/docsify/](//unpkg.com/docsify/).
+
+
+## Latest version
+
+
+```html
+<!-- load css -->
+<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
+
+<!-- load script -->
+<script src="//unpkg.com/docsify/lib/docsify.js"></script>
+```
+
+## Specific version
+
+
+```html
+<!-- load css -->
+<link rel="stylesheet" href="//unpkg.com/docsify@2.0.0/themes/vue.css">
+
+<!-- load script -->
+<script src="//unpkg.com/docsify@2.0.0/lib/docsify.js"></script>
+```
+
+## Compressed file
+
+
+```html
+<!-- load css -->
+<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
+
+<!-- load script -->
+<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
+```
+
+## Other CDN
+
+[jsDelivr](http://www.jsdelivr.com/projects/docsify) is available.
+

docs/configuration.md

@@ -0,0 +1,256 @@
+# Configuration
+
+docsify supports two ways to configure. You can configure the `window.$docsify` or write configuration on the script tag via `data-*` attributes.
+
+```html
+<!-- by $docsify -->
+<script>
+  window.$docsify = {
+    repo: 'QingWei-Li/docsify',
+    maxLevel: 3,
+    coverpage: true
+  }
+</script>
+
+<!-- or data-* -->
+<script
+  src="//unpkg.com/docsify"
+  data-repo="QingWei-Li/docsify"
+  data-max-level="3"
+  data-coverpage>
+</script>
+```
+
+Both ways are compatible. However, the first way is recommended. It is clear and can be configured in a separate file.
+
+!> In `window.$docsfiy`, the options should be written by camelCase.
+
+## el
+
+- Type: `String`
+- Default: `#app`
+
+The DOM element to be mounted on initialization. It can be a CSS selector string or an actual HTMLElement.
+
+```js
+window.$docsify = {
+  el: '#app'
+}
+```
+
+## repo
+
+- Type: `String`
+- Default: `null`
+
+Configure the repository url or a string of `username/repo` can add the [GitHub Corner](http://tholman.com/github-corners/) widget in the top right corner of the site.
+
+```js
+window.$docsify = {
+  repo: 'QingWei-Li/docsify',
+  // or
+  repo: 'https://github.com/QingWei-Li/docsify/'
+}
+```
+
+
+## max-level
+
+- Type: `Number`
+- Default: `6`
+
+Maximum Table of content level.
+
+```js
+window.$docsify = {
+  maxLevel: 4
+}
+```
+
+## load-navbar
+
+- Type: `Boolean|String`
+- Default: `false`
+
+Load navbar from Markdown file. If **true** it will be loaded from `_navbar.md`.
+
+```js
+window.$docsify = {
+  // load from _navbar.md
+  loadNavbar: true,
+
+  // load from nav.md
+  loadNavbar: 'nav.md'
+}
+```
+
+## load-sidebar
+
+- Type: `Boolean|String`
+- Default: `false`
+
+
+Load sidebar from Markdown file. If **true** it will be loaded from `_sidebar.md`.
+
+```js
+window.$docsify = {
+  // load from _sidebar.md
+  loadSidebar: true,
+
+  // load from summary.md
+  loadSidebar: 'summary.md'
+}
+```
+
+## sub-max-level
+
+- Type: `Number`
+- Default: `0`
+
+Add TOC in custom sidebar.
+
+```js
+window.$docsify = {
+  subMaxLevel: 3
+}
+```
+
+
+## auto2top
+
+- Type: `Boolean`
+- Default: `false`
+
+
+Scrolls to the top of the screen when the route is changed.
+
+```js
+window.$docsify = {
+  auto2top: true
+}
+```
+
+
+## homepage
+
+- Type: `String`
+- Default: `README.md`
+
+
+`README.md` in your docs folder will be treated as homepage for your website, but sometimes you may need to serve another file as your homepage.
+
+```js
+window.$docsify = {
+  // Change to /home.md
+  homepage: 'home.md',
+
+  // Or use the readme in your repo
+  homepage: 'https://raw.githubusercontent.com/QingWei-Li/docsify/master/README.md'
+}
+```
+
+## base-path
+
+- Type: `String`
+
+Base path of the website. You can set it to another directory or another domain name.
+
+```js
+window.$docsify = {
+  basePath: '/path/',
+
+  // Load the files from another site
+  basePath: 'https://docsify.js.org/',
+
+  // Even can load files from other repo
+  basePath: 'https://raw.githubusercontent.com/ryanmcdermott/clean-code-javascript/master/'
+}
+```
+
+
+## coverpage
+
+- Type: `Boolean|String`
+- Default: `false`
+
+Activate the [cover feature](/cover). If ture, it will load from `_coverpage.md`.
+
+```js
+window.$docsify = {
+  coverpage: true,
+
+  // Custom file name
+  coverpage: 'cover.md'
+}
+```
+
+## name
+
+- Type: `String`
+
+
+Website name appears in the sidebar.
+
+```js
+window.$docsify = {
+  name: 'docsify'
+}
+```
+
+## name-link
+
+- Type: `String`
+- Default: `window.location.pathname`
+
+The name of the link.
+
+```js
+window.$docsify = {
+  nameLink: '/'
+}
+```
+
+## markdown
+
+- Type: `Function`
+
+See [Markdown configuration](/markdown).
+
+
+```js
+window.$docsify = {
+  markdown: function (marked, renderer) {
+    // ...
+    return marked
+  }
+}
+```
+
+## theme-color
+
+- Type: `String`
+
+Customize the theme color.
+Use [CSS3 variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) feature and polyfill in old browser.
+
+```js
+window.$docsify = {
+  themeColor: '#3F51B5'
+}
+```
+
+## alias
+
+- Type: `Object`
+
+
+Set the route alias. You can freely manage routing rules.
+
+```js
+window.$docsify = {
+  alias: {
+    '/zh-cn/changelog': '/changelog',
+    '/changelog': 'https://raw.githubusercontent.com/QingWei-Li/docsify/master/CHANGELOG'
+  }
+}
+```

docs/cover.md

@@ -0,0 +1,57 @@
+# Cover
+
+Activate the cover feature by setting `coverpage`. The detail in [Configuration#coverpage](zh-cn/configuration#coverpage).
+
+## Basic usage
+
+Set `coverpage` to **true**, and create a `_coverpage.md`. You can see the effect in current website.
+
+
+*index.html*
+
+```html
+<script>
+  window.$docsify = {
+    coverpage: true
+  }
+</script>
+<script src="//unpkg.com/docsify"></script>
+```
+
+*_coverpage.md*
+
+```markdown
+![logo](_media/icon.svg)
+
+# docsify
+
+> A magical documentation site generator.
+
+- Simple and lightweight (~12kb gzipped)
+- Multiple themes
+- Not build static html files
+
+
+[GitHub](https://github.com/QingWei-Li/docsify/)
+[Get Started](#quick-start)
+```
+
+!> A document site can have only one cover page.
+
+## Custom background
+
+The background color is generated randomly by default. You can customize the background color or image.
+
+*_coverpage.md*
+
+```markdown
+# docsify
+
+[GitHub](https://github.com/QingWei-Li/docsify/)
+[Get Started](#quick-start)
+
+<!-- background image -->
+![](_media/bg.png)
+<!-- background color -->
+![color](#f0f0f0)
+```

docs/custom-navbar.md

@@ -0,0 +1,66 @@
+# Custom navbar
+
+You can create navbar in HTML file. But note that the link begins with `#/`.
+
+*index.html*
+
+```html
+<body>
+  <nav>
+    <a href="#/">EN</a>
+    <a href="#/zh-cn/">中文</a>
+  </nav>
+  <div id="app"></div>
+</body>
+```
+
+## Writing by Markdown
+
+You can custom navbar by Markdown file. Set the `loadNavbar` to **true** and create a `_navbar.md`. The detail in [Configuration#load-navbar](configuration#load-navbar).
+
+*index.html*
+
+
+```html
+<script>
+  window.$docsify = {
+    loadNavbar: true
+  }
+</script>
+<script src="//unpkg.com/docsify"></script>
+```
+
+*_navbar.md*
+
+
+```markdown
+- [En](/)
+- [chinese](/zh-cn/)
+```
+
+`_navbar.md` is loaded from each level directory. If this directory doesn't have `_navbar.md`, it will fallback to parent directory. 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.
+
+```markdown
+- Getting started
+ - [Quick start](/quickstart)
+ - [Writing more pages](/more-pages)
+ - [Custom navbar](/custom-navbar)
+ - [Cover page](/cover)
+
+- Configuration
+  - [Configuration](/configuration)
+  - [Themes](/themes)
+  - [Using plugins](/plugins)
+  - [Markdown configuration](/markdown)
+  - [Lanuage highlight](/language-highlight)
+```
+
+Example.
+
+![Nesting navbar](_images/nested-navbar.png "Nesting navbar")
+
+

docs/deploy.md

@@ -0,0 +1,33 @@
+# Deploy
+
+As as GitBook, you can deploy files to GitHub Pages or VPS.
+
+## GitHub Pages
+
+There're three places to populate your docs
+
+- `docs/` folder
+- master branch
+- gh-pages branch
+
+You can save your files in `./docs` and setting `master branch /docs folder`.
+
+![github pages](_images/deploy-github-pages.png)
+
+!> You can also save files in the root directory and select `master branch`.
+
+## VPS
+
+Try following nginx config.
+
+```nginx
+server {
+  listen 80;
+  server_name  your.domain.com;
+
+  location / {
+    alias /path/to/dir/of/docs;
+    index index.html;
+  }
+}
+```

docs/helpers.md

@@ -0,0 +1,26 @@
+# Doc helper
+
+docsify extends Markdown syntax to make your documents more readable.
+
+## important content
+
+Suitable for displaying important information.
+
+```markdown
+!> **Time** is money, my friend!
+```
+
+!> **Time** is money, my friend!
+
+
+## General tips
+
+General tips.
+
+
+```markdown
+?> *TODO* unit test
+```
+
+?> *TODO* unit test
+

docs/index.html

@@ -2,8 +2,9 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>docsify - A magical documentation site generator.</title>
-  <link rel="icon" href="favicon.ico">
+  <title>docsify</title>
+  <link rel="icon" href="_media/favicon.ico">
+  <meta name="keywords" content="doc,docs,documentation,gitbook,creator,generator,github,jekyll,github-pages">
   <meta name="description" content="A magical documentation generator.">
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
@@ -11,14 +12,27 @@
 <body>
   <nav>
     <a href="#/">En</a>
-    <a href="#/zh-cn">中文</a>
+    <a href="#/zh-cn/">中文</a>
   </nav>
   <div id="app"></div>
 </body>
-<script
-  src="//unpkg.com/docsify/lib/docsify.min.js"
-  data-max-level="4"
-  data-sidebar-toggle
-  data-coverpage
-  data-router></script>
+<script>
+  window.$docsify = {
+    name: 'docsify',
+    maxLevel: 4,
+    subMaxLevel: 2,
+    auto2top: true,
+    coverpage: true,
+    loadSidebar: true,
+    alias: {
+      '/zh-cn/changelog': '/changelog',
+      '/changelog': 'https://raw.githubusercontent.com/QingWei-Li/docsify/master/CHANGELOG'
+    }
+  }
+</script>
+<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
+<script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
+<script src="//unpkg.com/prismjs/components/prism-bash.min.js"></script>
+<script src="//unpkg.com/prismjs/components/prism-markdown.min.js"></script>
+<script src="//unpkg.com/prismjs/components/prism-nginx.min.js"></script>
 </html>

docs/language-highlight.md

@@ -0,0 +1,13 @@
+# language highlight
+
+
+The code language highlight tool is [Prism](https://github.com/PrismJS/prism). Only supports CSS, JavaScipt and HTML by default. You can load its component to highlight the language you need.
+
+
+```html
+<script src="//unpkg.com/docsify"></script>
+<script src="//unpkg.com/prismjs/components/prism-bash.js"></script>
+<script src="//unpkg.com/prismjs/components/prism-php.js"></script>
+```
+
+?> See fully supported highlight component [files list](https://github.com/PrismJS/prism/tree/gh-pages/components).

docs/markdown.md

@@ -0,0 +1,26 @@
+# Markdown configuration
+
+The Markdown parser is [marked](https://github.com/chjj/marked). You can customize how docsify renders your Markdown content to HTML.
+
+```js
+window.$docsify = {
+  markdown: {
+    smartypants: true
+    // ...
+  }
+}
+```
+
+?> Configuration Options Reference [marked documentation](https://github.com/chjj/marked#options-1)
+
+Even you can completely customize the parsing rules.
+
+```js
+window.$docsify = {
+  markdown: function(marked, renderer) {
+    // ...
+
+    return marked
+  }
+}
+```

docs/more-pages.md

@@ -0,0 +1,66 @@
+# More pages
+
+If you need more pages multi-level routing site. It is easy to achieve in docsify. A simple example: If you create a `guide.md`, then get the route is `/#/guide`.
+
+For example, the directory structure is as follows:
+
+
+```text
+-| docs/
+  -| README.md
+  -| guide.md
+  -| zh-cn/
+    -| README.md
+    -| guide.md
+```
+
+Matching routes
+
+
+```text
+docs/README.md        => http://domain.com
+docs/guide.md         => http://domain.com/guide
+docs/zh-cn/README.md  => http://domain.com/zh-cn/
+docs/zh-cn/guide.md   => http://domain.com/zh-cn/guide
+```
+
+## Custom sidebar
+
+By default, the TOC in sidebar is automatically generated based on Markdown file. You can create a Table of Contents page to list down pages in your site.
+
+First, you need to set `loadSidebar` to **true**. The detail in [Configuration#load-sidebar](configuration#load-sidebar).
+
+```html
+<script>
+  window.$docsify = {
+    loadSidebar: true
+  }
+</script>
+<script src="//unpkg.com/docsify"></script>
+```
+
+Create the `_sidebar.md`
+
+```markdown
+- [Home](/)
+- [Guide](/guide)
+```
+
+!> Need create a `.nojekyll` in `./docs` to prevent GitHub Pages from ignoring files that begin with an underscore.
+
+`_sidebar.md` is loaded from each level directory. If this directory doesn't have `_sidebar.md`, it will fallback to parent directory. For example, the current path is `/guide/quick-start`,  the `_sidebar.md` will be loaded from `/guide/_sidebar.md`.
+
+## Table of Contents
+
+Custom sidebar can also be automatically generate TOC by setting `subMaxLevel`. The detail in [Configuration#sub-max-level](configuration#sub-max-level).
+
+```html
+<script>
+  window.$docsify = {
+    loadSidebar: true,
+    subMaxLevel: 2
+  }
+</script>
+<script src="//unpkg.com/docsify"></script>
+```
+

docs/plugins.md

@@ -0,0 +1,119 @@
+# Using plugins
+
+## List of Plugins
+
+### Full text search
+
+By default, the hyperlink on the current page is recognized and the content is saved in `localStorage`. You can also specify the path to the files.
+
+
+```html
+<script>
+  window.$docsify = {
+    search: 'auto', // default
+
+    search : [
+      '/',            // => /README.md
+      '/guide',       // => /guide.md
+      '/get-started', // => /get-started.md
+      '/zh-cn/',      // => /zh-cn/README.md
+    ],
+
+    // 完整配置参数
+    search: {
+      maxAge: 86400000, // Expiration time, the default one day
+      paths: [], // or 'auto'
+      placeholder: 'Type to search'
+    }
+  }
+</script>
+<script src="//unpkg.com/docsify"></script>
+<script src="//unpkg.com/docsify/lib/plugins/search.js"></script>
+```
+
+
+### Google Analytics
+
+Install the plugin and configure the track id.
+
+```html
+<script>
+  window.$docsify = {
+    ga: 'UA-XXXXX-Y'
+  }
+</script>
+<script src="//unpkg.com/docsify"></script>
+<script src="//unpkg.com/docsify/lib/plugins/ga.js"></script>
+```
+
+Configure by `data-ga`.
+
+
+```html
+<script src="//unpkg.com/docsify" data-ga="UA-XXXXX-Y"></script>
+<script src="//unpkg.com/docsify/lib/plugins/ga.js"></script>
+```
+
+
+## Write a plugin
+
+A plugin is simply a function that takes `hook` as arguments.
+The hook supports handling asynchronous tasks.
+
+#### Full configuration
+
+```js
+window.$docsify = {
+ plugins: [
+  function (hook) {
+    hook.init(function() {
+      // Called when the script starts running, only trigger once.
+    })
+
+    hook.beforeEach(function(content) {
+      // Invoked each time before parsing the Markdown file.
+      // ...
+      return content
+    })
+
+    hook.afterEach(function(html, next) {
+      // Invoked each time after the Markdown file is parsed.
+      // beforeEach and afterEach support asynchronous。
+      // ...
+      // call `next(html)` when task is done.
+      next(html)
+    })
+
+    hook.ready(function() {
+      // Called after initialization is complete. Only trigger once.
+    })
+  }
+ ]
+}
+```
+
+!> You can get internal methods through `window.Docsify.utils`.
+
+#### Example
+
+Add footer component in each pages.
+
+```js
+window.$docsify = {
+  plugins: [
+    function (hook) {
+      var footer = [
+        '<hr/>',
+        '<footer>',
+        '<span><a href="https://github.com/QingWei-Li">cinwell</a> &copy;2017.</span>',
+        '<span>Proudly published with <a href="https://github.com/QingWei-Li/docsify" target="_blank">docsify</a>.</span>',
+        '</footer>'
+      ].join('')
+
+      hook.afterEach(function (html) {
+        return html + footer
+      })
+    }
+  ]
+}
+```

docs/quickstart.md

@@ -0,0 +1,63 @@
+# Quick start
+
+Recommended install `docsify-cli` globally, which can help us to initialize and preview the website locally.
+
+```bash
+npm i docsify-cli -g
+```
+
+## initialize
+
+If you want to write the documentation in `./docs` directory, you can use the `init` command.
+
+```bash
+docsify init ./docs
+```
+
+## Writing content
+
+After the init is complete, you can see the file list in the docs directory.
+
+
+- `index.html` as the entry file
+- `README.md` as the home page
+- `.nojekyll` can prevent GitHub Pages from ignoring files that begin with an underscore
+
+You can easily update the documentation in `docs/README.md`, of course you can add [more pages](more-pages).
+
+## Preview your site
+
+Run the local server via `docsify serve`. You can preview your site in browser via http://localhost:3000.
+
+
+```bash
+docsify serve docs
+```
+
+?> More usages of reference [docsify-cli documentation](https://github.com/QingWei-Li/docsify-cli).
+
+## Manually
+
+If you don't like npm or feel the trouble to install the tool. What we need is an `index.html`.
+
+*index.html*
+
+```html
+<!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>
+```
+
+If your system has Python, you can easily to run a static server to preview your site.
+
+```bash
+cd docs && python -m SimpleHTTPServer 3000
+```

docs/themes.md

@@ -0,0 +1,14 @@
+# Themes
+
+There are currently three themes available. Copy [Vue](//vuejs.org) and [buble](//buble.surge.sh) website custom theme and [@liril-net](https://github.com/liril-net) contribution to the theme of the black style.
+
+
+```html
+  <link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
+  <link rel="stylesheet" href="//unpkg.com/docsify/themes/buble.css">
+  <link rel="stylesheet" href="//unpkg.com/docsify/themes/dark.css">
+```
+
+!> This compressed files in `/lib/themes/`.
+
+If you have any ideas or would like to develop new theme, welcome submit [PR](https://github.com/QingWei-Li/docsify/pulls).

docs/vue.md

@@ -0,0 +1,89 @@
+# Compatible with Vue
+
+You can write Vue components directly in the Markdown file, and it will be parsed.
+You can use this feature to write vue demo and documentation together.
+
+## Basic usage
+
+Load the Vue in `index.html`.
+
+```html
+<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/docsify"></script>
+```
+
+Then you can immediately write Vue code at Markdown file.
+`new Vue({ el: 'main' })` script is executed by default to create instance.
+
+*README.md*
+
+```markdown
+# Vue guide
+
+`v-for` usage.
+
+```html
+<ul>
+  <li v-for="i in 10">{{ i }}</li>
+</ul>
+``
+
+<ul>
+  <li v-for="i in 10">{{ i }}</li>
+</ul>
+```
+
+You can manually initialize a Vue instance.
+
+*README.md*
+
+```markdown
+# Vue demo
+
+<div>hello {{ msg }}</div>
+
+<script>
+  new Vue({
+    el: 'main',
+    data: { msg: 'Vue' }
+  })
+</script>
+```
+
+!> In a Markdown file, only the script within the first script tag is executed.
+
+## Combine Vuep to write playground
+
+[Vuep](https://github.com/QingWei-Li/vuep) is a component for rendering Vue components with live editor and preview. Supports Vue component spec and JSX.
+
+*index.html*
+
+```html
+<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/vuep"></script>
+<script src="//unpkg.com/docsify"></script>
+```
+
+*README.md*
+```markdown
+# Vuep
+
+<vuep template="#example"></vuep>
+
+<script type="text/x-template" id="example">
+  <template>
+    <div>Hello, {{ name }}!</div>
+  </template>
+
+  <script>
+    export default {
+      data: function () {
+        return { name: 'Vue' }
+      }
+    }
+  </script>
+</script>
+```
+
+?> Example Refer to the vuep [documentation](https://qingwei-li.github.io/vuep/).
+

docs/zh-cn.md

@@ -1,421 +0,0 @@
-
-## 特性
-- 无需构建，写完 markdown 直接发布
-- 支持自定义主题
-- 容易使用并且轻量 (~12kb gzipped)
-
-## 快速上手
-
-### 创建项目
-新建一个空项目，接着创建一个 `docs` 目录并进入到 docs 目录下
-```shell
-mkdir my-project && cd my-project
-mkdir docs && cd docs
-```
-
-### 创建入口文件
-创建一个 `index.html` 文件，内容为
-```html
-<!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" data-router></script>
-</html>
-```
-
-新建 `README.md` 文件，作为主页面
-
-```
-# Title
-
-## balabala
-```
-
-### 部署！
-将项目 `push` 到 GitHub 仓库后到设置页面开启 **GitHub Pages** 功能，选择 `docs/` 选项
-![image](https://cloud.githubusercontent.com/assets/7565692/20639058/e65e6d22-b3f3-11e6-9b8b-6309c89826f2.png)
-
-## 命令行工具
-
-方便快速创建文档目录，会读取项目的 `package.json` 里的选项作为 docsify 的配置，支持本地预览。
-
-### 安装
-```shell
-npm i docsify-cli -g
-```
-
-### 初始化文档
-
-默认初始化在当前目录，推荐将文档放在 `docs` 目录下
-```shell
-docsify init docs
-```
-
-### 启动本地服务
-启动一个 server 方便预览，打开 http://localhost:3000
-```shell
-docsify serve docs
-```
-
-更多选项参考 [docsify-cli](https://github.com/QingWei-Li/docsify-cli)
-
-
-## 更多功能
-
-### 主题
-目前提供 vue.css 和 buble.css，直接修改 `index.html` 里的 cdn 地址即可
-```html
-<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
-<link rel="stylesheet" href="//unpkg.com/docsify/themes/buble.css">
-```
-
-压缩版
-
-```html
-<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
-<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/buble.css">
-```
-
-### 多页面
-`README.md` 作为主页面，如果需要其他页面，直接在文档目录下创建对应的 `*.md` 文件，例如创建一个 `guide.md` 那么对应的路由就是 `/#/guide`。
-
-### 导航
-导航需要自己写在 `index.html` 文件里，效果参考本文档
-
-```html
-<nav>
-  <a href="/#/docsify/">En</a>
-  <a href="/#/docsify/zh-cn">中文</a>
-</nav>
-```
-
-
-
-### CDN
-- UNPKG [https://unpkg.com/docsify/](https://unpkg.com/docsify/)
-- jsDelivr [http://www.jsdelivr.com/projects/docsify](http://www.jsdelivr.com/projects/docsify)
-
-### 封面
-
-只需要写几行简单的 markdown 就可以拥有一页精致的封面，通过添加 `data-coverpage` 属性，并创建 `_coverpage.md`，按照下面的格式书写即可。
-
-```markdown
-![logo](_media/icon.svg)
-
-# docsify <small>1.2.0</small>
-
-> A magical documentation site generator.
-
-- Simple and lightweight (~12kb gzipped)
-- Multiple themes
-- Not build static html files
-
-
-[GitHub](https://github.com/QingWei-Li/docsify/)
-[Get Started](#quick-start)
-```
-
-
-#### 自定义封面背景
-默认的背景是随机生成的，你可以自定义背景色或者背景图片。只需要在文档末尾用添加图片的 Markdown 语法
-
-```markdown
-# docsify <small>1.2.0</small>
-
-> xxx
-
-[GitHub](https://github.com/QingWei-Li/docsify/)
-[Get Started](#quick-start)
-
-<!-- 背景图片 -->
-![](_media/bg.png)
-<!-- 背景色 -->
-![color](#f0f0f0)
-```
-
-### 自定义 Markdown parser
-
-默认使用 [marked](https://github.com/chjj/marked) 处理 markdown 部分，你可以修改默认配置
-
-```js
-window.$docsify = {
-  markdown: {
-    smartypants: true
-  }
-}
-```
-
-甚至可以完全定制化
-
-```js
-window.$docsify = {
-  markdown: function(marked) {
-    // ...
-
-    return marked
-  }
-}
-```
-
-
-## 配置参数
-
-你可以通过在标签上添加属性的方式，或者给 `window.$docsify` 传配置信息。
-
-### repo
-参考本文档的右上角的 GitHub 图标，如果要开启的话，将 `index.html` 里的 script 改成
-
-```html
-<script src="//unpkg.com/docsify" data-repo="your/repo"></script>
-```
-
-
-```js
-window.$docsify = {
-  repo: 'your/repo'
-}
-```
-
-### max-level
-目录最大展开层级，默认值为 6
-
-```html
-<script src="//unpkg.com/docsify" data-max-level="6"></script>
-```
-
-
-```js
-window.$docsify = {
-  maxLevel: 6
-}
-```
-
-### el
-替换节点元素，默认为 `#app`
-```html
-<script src="//unpkg.com/docsify" data-el="#app"></script>
-```
-
-
-```js
-window.$docsify = {
-  el: '#app'
-}
-```
-
-### sidebar-toggle
-
-Sidebar 开关按钮
-
-```html
-<script src="//unpkg.com/docsify" data-sidebar-toggle></script>
-```
-
-
-```js
-window.$docsify = {
-  sidebarToggle: true
-}
-```
-
-### sidebar
-
-设置后 TOC 功能将不可用，适合导航较多的文档，`data-sidebar` 传入全局变量名。
-
-![image](https://cloud.githubusercontent.com/assets/7565692/20647425/de5ab1c2-b4ce-11e6-863a-135868f2f9b4.png)
-
-```html
-<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>
-```
-
-
-```js
-window.$docsify = {
-  sidebar: 'sidebar'
-}
-```
-
-### load-sidebar
-
-读取侧边栏配置文件，如果配置，默认加载当前目录下的 `_sidebar.md`。如果文件不存在，会显示 TOC 作为侧边栏内容。如果你有二级目录，也应该放置一份配置文件。
-**如果用 `_` 开头作为文件名，你应该在文档目录下添加 `.nojekyll`，阻止 GitHub Pages 忽略下划线开头的文件。**
-
-```html
-<script src="/lib/docsify.js" data-load-sidebar></script>
-```
-
-
-你可以指定侧边栏文件名
-
-```html
-<script src="/lib/docsify.js" data-load-sidebar="_sidebar.md"></script>
-```
-
-```js
-window.$docsify = {
-  loadSidebar: '_sidebar.md'
-}
-```
-
-`_sidebar.md` 的内容可以是这样的
-
-```markdown
-- [Home](/)
-- [Installation](/installation)
-- Essentials
-  - [Getting Started](/getting-started)
-  - [Dynamic Route Matching](/dynamic-matching)
-  - [Nested Routes](/nested-routes)
-```
-
-### sub-max-level
-
-显示 TOC 在自定义的侧边栏里，默认最大显示 0 层。
-
-
-```html
-<script src="/lib/docsify.js" data-load-sidebar data-max-sub-level="4"></script>
-```
-
-```js
-window.$docsify = {
-  maxSubLevel: 4
-}
-```
-
-### load-navbar
-
-读取导航配置文件，如果配置，默认加载当前目录下的 `_navbar.md`。如果文件不存在，会显示 html 里定义的导航栏。
-
-```html
-<script src="/lib/docsify.js" data-load-navbar></script>
-```
-
-你可以指定导航栏文件名
-
-```html
-<script src="/lib/docsify.js" data-load-navbar="_navbar.md"></script>
-```
-
-```js
-window.$docsify = {
-  loadNavbar: '_navbar.md'
-}
-```
-
-`_navbar.md` 的内容可以是这样
-
-```markdown
-- [en](/)
-- [中文](/zh-cn)
-```
-
-当然也支持二级列表，将生成一个下拉列表
-```markdown
-- [download](/download)
-- language
-  - [en](/)
-  - [中文](/zh-cn)
-```
-
-
-### router
-
-开启 hash router 功能，同时多页面切换不会重新加载资源。资源路径会被替换成 `/#/` 的形式。
-
-```html
-<script src="/lib/docsify.js" data-router></script>
-```
-
-```js
-window.$docsify = {
-  router: true
-}
-```
-
-### auto2top
-
-切换路由时自动跳转到页面顶部
-
-
-```html
-<script src="/lib/docsify.js" data-auto2top></script>
-```
-
-```js
-window.$docsify = {
-  auto2top: true
-}
-```
-
-### homepage
-
-默认情况下网站会将根目录下 `README.md` 作为首页渲染，但是有些时候我们想指定其他文件，甚至想直接将 repo 下的 README 作为首页。你可以这样做（需要设置 `data-router`）：
-
-
-```html
-<script src="/lib/docsify.js" data-homepage="https://raw.githubusercontent.com/QingWei-Li/docsify/master/README.md"></script>
-<!-- 或者将 Welcome.md 作为首页 -->
-<script src="/lib/docsify.js" data-homepage="Welcome.md"></script>
-```
-
-```js
-window.$docsify = {
-  homepage: true
-}
-```
-
-### basePath
-
-指定加载文档的路径，如果你的 HTML 入口文件和文档是放在不同地方，你可以设置：
-
-```html
-<script src="/lib/docsify.js" data-base-path="/base/"></script>
-
-<!-- 甚至文档是在其他站点下 😄 -->
-<script src="/lib/docsify.js" data-base-path="https://docsify.js.org/"></script>
-```
-
-
-```js
-window.$docsify = {
-  basePath: '/base/'
-}
-```
-
-### coverpage
-
-生成封面，参考 [#封面](/zh-cn#封面).
-
-```html
-<script src="/lib/docsify.js" data-coverpage></script>
-<!-- or -->
-<script src="/lib/docsify.js" data-coverpage="other.md"></script>
-
-```
-
-
-```js
-window.$docsify = {
-  coverpage: true
-}
-```

docs/zh-cn/README.md

@@ -0,0 +1,27 @@
+## docsify
+
+> 一个神奇的文档网站生成工具
+
+## 是什么
+
+docsify 是一个动态生成文档网站的工具。不同于 GitBook、Hexo 的地方是它不会生成将 `.md` 转成 `.html` 文件，所有转换工作都是在运行时进行。
+
+这将非常实用，如果只是需要快速的搭建一个小型的文档网站，或者不想因为生成的一堆 `.html` 文件“污染” commit 记录，只需要创建一个 `index.html` 就可以开始写文档而且直接[部署在 GitHub Pages](zh-cn/deploy)。
+
+查看[快速开始](zh-cn/quickstart)了解详情。
+
+## 特性
+- 无需构建，写完文档直接发布
+- 容易使用并且轻量 (~13Kb gzipped)
+- 智能的全文检索
+- 提供多套主题
+- 丰富的 API
+- 兼容 IE9+
+
+## 例子
+
+可以查看 [Showcase](https://github.com/QingWei-Li/docsify/#showcase) 来了解使用 docsify 的文档项目。
+
+## 捐赠
+
+如果你觉得 docsify 对你有帮助，或者想对我微小的工作一点资瓷，欢迎给我[捐赠](https://github.com/QingWei-Li/donate)。

docs/zh-cn/_sidebar.md

@@ -0,0 +1,20 @@
+- 入门
+ - [快速开始](zh-cn/quickstart)
+ - [多页文档](zh-cn/more-pages)
+ - [定制导航栏](zh-cn/custom-navbar)
+ - [封面](zh-cn/cover)
+
+- 配置
+  - [配置项](zh-cn/configuration)
+  - [主题](zh-cn/themes)
+  - [使用插件](zh-cn/plugins)
+  - [Markdown 配置](zh-cn/markdown)
+  - [代码高亮](zh-cn/language-highlight)
+
+- 指南
+ - [部署](zh-cn/deploy)
+ - [文档助手](zh-cn/helpers)
+ - [兼容 Vue](zh-cn/vue)
+ - [CDN](zh-cn/cdn)
+
+- [Changelog](zh-cn/changelog)

docs/zh-cn/cdn.md

@@ -0,0 +1,48 @@
+# CDN
+
+推荐使用 [unpkg](//unpkg.com) —— 能及时获取到最新版。
+
+## 获取最新版本
+
+根据 UNPKG 的规则，不指定特定版本号时将引入最新版。
+
+```html
+<!-- 引入 css -->
+<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
+
+<!-- 引入 script -->
+<script src="//unpkg.com/docsify/lib/docsify.js"></script>
+```
+
+## 获取指定版本
+
+如果担心频繁地版本更新又可能引入未知 Bug，我们也可以使用具体的版本。规则是 `//unpkg.com/docsify@VERSION/`
+
+```html
+<!-- 引入 css -->
+<link rel="stylesheet" href="//unpkg.com/docsify@2.0.0/themes/vue.css">
+
+<!-- 引入 script -->
+<script src="//unpkg.com/docsify@2.0.0/lib/docsify.js"></script>
+```
+
+!> 指定 *VERSION* 为 `latest` 可以强制每次都请求最新版本。
+
+## 压缩版
+
+CSS 的压缩文件位于 `/lib/themes/` 目录下
+
+```html
+<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
+```
+
+JS 的压缩文件是原有文件路径的基础上加 `.min`后缀
+
+```html
+<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
+```
+
+## 其他 CDN
+
+[jsDelivr](http://www.jsdelivr.com/projects/docsify) 也是可用的，具体用法参考其文档。
+

docs/zh-cn/configuration.md

@@ -0,0 +1,255 @@
+# 配置项
+
+docsify 有两种配置参数的方式。一种是配置在 `window.$docsify` 里，另一种是给 `script` 标签添加 `data-*` 属性。
+
+```html
+<!-- 方法 1 -->
+<script>
+  window.$docsify = {
+    repo: 'QingWei-Li/docsify',
+    maxLevel: 3,
+    coverpage: true
+  }
+</script>
+
+<!-- 方法 2 -->
+<script
+  src="//unpkg.com/docsify"
+  data-repo="QingWei-Li/docsify"
+  data-max-level="3"
+  data-coverpage>
+</script>
+```
+
+两种方式可以共存，推荐第一种做法——直接配置 `window.$docsify` 对象——这会让你的配置更加清晰，同时也可以方便的将配置单独写到另一个文件里。
+
+!> 通过 `window.$docsify` 配置属性，需要将属性改成驼峰命名法。通过 `data-*` 属性配置，保持短横线的命名规则。
+
+
+## el
+
+- 类型：`String`
+- 默认值：`#app`
+
+docsify 初始化的挂载元素，可以是一个 CSS 选择器，默认为 `#app` 如果不存在就直接绑定在 `body` 上。
+
+```js
+window.$docsify = {
+  el: '#app'
+}
+```
+
+## repo
+
+- 类型：`String`
+- 默认值: `null`
+
+配置仓库地址或者 `username/repo` 的字符串，会在页面右上角渲染一个 [GitHub Corner](http://tholman.com/github-corners/) 挂件。
+
+```js
+window.$docsify = {
+  repo: 'QingWei-Li/docsify',
+  // or
+  repo: 'https://github.com/QingWei-Li/docsify/'
+}
+```
+
+
+## max-level
+
+- 类型：`Number`
+- 默认值: `6`
+
+默认情况下会抓取文档中所有标题渲染成目录，可配置最大支持渲染的标题层级。
+
+
+```js
+window.$docsify = {
+  maxLevel: 4
+}
+```
+
+## load-navbar
+
+- 类型：`Boolean|String`
+- 默认值: `false`
+
+加载自定义导航栏，参考[定制导航栏](zh-cn/custom-navbar) 了解用法。设置为 `true` 后会加载 `_navbar.md` 文件，也可以自定义加载的文件名。
+
+```js
+window.$docsify = {
+  // 加载 _navbar.md
+  loadNavbar: true,
+
+  // 加载 nav.md
+  loadNavbar: 'nav.md'
+}
+```
+
+## load-sidebar
+
+- 类型：`Boolean|String`
+- 默认值: `false`
+
+加载自定义侧边栏，参考[多页文档](zh-cn/more-pages)。设置为 `true` 后会加载 `_sidebar.md` 文件，也可以自定义加载的文件名。
+
+```js
+window.$docsify = {
+  // 加载 _sidebar.md
+  loadSidebar: true,
+
+  // 加载 summary.md
+  loadSidebar: 'summary.md'
+}
+```
+
+## sub-max-level
+
+- 类型：`Number`
+- 默认值: `0`
+
+自定义侧边栏后默认不会再生成目录，你也可以通过设置生成目录的最大层级开启这个功能，
+
+
+```js
+window.$docsify = {
+  subMaxLevel: 3
+}
+```
+
+
+## auto2top
+
+- 类型：`Boolean`
+- 默认值: `false`
+
+切换页面后是否自动跳转到页面顶部。
+
+```js
+window.$docsify = {
+  auto2top: true
+}
+```
+
+
+## homepage
+
+- 类型：`String`
+- 默认值: `README.md`
+
+设置首页文件加载路径。适合不想将 `README.md` 作为入口文件渲染，或者是文档存放在其他位置的情况使用。
+
+```js
+window.$docsify = {
+  // 入口文件改为 /home.md
+  homepage: 'home.md',
+
+  // 文档和仓库根目录下的 README.md 内容一致
+  homepage: 'https://raw.githubusercontent.com/QingWei-Li/docsify/master/README.md'
+}
+```
+
+## base-path
+
+- 类型：`String`
+
+文档加载的根路径，可以是二级路径或者是其他域名的路径。
+
+```js
+window.$docsify = {
+  basePath: '/path/',
+
+  // 直接渲染其他域名的文档
+  basePath: 'https://docsify.js.org/',
+
+  // 甚至直接渲染其他仓库 readme
+  basePath: 'https://raw.githubusercontent.com/ryanmcdermott/clean-code-javascript/master/'
+}
+```
+
+
+## coverpage
+
+- 类型：`Boolean|String`
+- 默认值: `false`
+
+启用[封面页](/zh-cn/cover)。开启后是加载 `_coverpage.md` 文件，也可以自定义文件名。
+
+```js
+window.$docsify = {
+  coverpage: true,
+
+  // 自定义文件名
+  coverpage: 'cover.md'
+}
+```
+
+## name
+
+- 类型：`String`
+
+
+文档标题，会显示在侧边栏顶部。
+
+```js
+window.$docsify = {
+  name: 'docsify'
+}
+```
+
+## name-link
+
+- 类型：`String`
+- 默认值：`window.location.pathname`
+
+点击文档标题后跳转的链接地址。
+
+```js
+window.$docsify = {
+  nameLink: '/'
+}
+```
+
+## markdown
+
+- 类型: `Function`
+
+参考 [Markdown 配置](/zh-cn/markdown)。
+
+```js
+window.$docsify = {
+  markdown: function (marked, renderer) {
+    // ...
+    return marked
+  }
+}
+```
+
+## theme-color
+
+- 类型：`String`
+
+替换主题色。利用 [CSS3 支持变量]((https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables)的特性，对于老的浏览器有 polyfill 处理。
+
+```js
+window.$docsify = {
+  themeColor: '#3F51B5'
+}
+```
+
+## alias
+
+- 类型：`Object`
+
+定义路由别名，可以更自由的定义路由规则。
+
+
+```js
+window.$docsify = {
+  alias: {
+    '/zh-cn/changelog': '/changelog',
+    '/changelog': 'https://raw.githubusercontent.com/QingWei-Li/docsify/master/CHANGELOG'
+  }
+}
+```
+

docs/zh-cn/cover.md

@@ -0,0 +1,58 @@
+# 封面
+
+通过设置 `coverpage` 参数，可以开启渲染封面的功能。具体用法见[配置项#coverpage](zh-cn/configuration#coverpage)。
+
+## 基本用法
+
+封面的生成同样是从 markdown 文件渲染来的。开启渲染封面功能后在文档根目录创建 `_coverpage.md` 文件。渲染效果如本文档。
+
+*index.html*
+
+```html
+<script>
+  window.$docsify = {
+    coverpage: true
+  }
+</script>
+<script src="//unpkg.com/docsify"></script>
+```
+
+*_coverpage.md*
+
+```markdown
+![logo](_media/icon.svg)
+
+# docsify
+
+> A magical documentation site generator.
+
+- Simple and lightweight (~12kb gzipped)
+- Multiple themes
+- Not build static html files
+
+
+[GitHub](https://github.com/QingWei-Li/docsify/)
+[Get Started](#quick-start)
+```
+
+
+
+!> 一份文档只会在根目录下加载封面，其他页面或者二级目录下都不会加载。
+
+## 自定义背景
+
+目前的背景是随机生成的渐变色，我们自定义背景色或者背景图。在文档末尾用添加图片的 Markdown 语法设置背景。
+
+*_coverpage.md*
+
+```markdown
+# docsify
+
+[GitHub](https://github.com/QingWei-Li/docsify/)
+[Get Started](#quick-start)
+
+<!-- 背景图片 -->
+![](_media/bg.png)
+<!-- 背景色 -->
+![color](#f0f0f0)
+```

docs/zh-cn/custom-navbar.md

@@ -0,0 +1,67 @@
+# 自定义导航栏
+
+我们可以直接在 HTML 里定义导航栏，要注意链接要以 `#/` 开头。
+
+*index.html*
+
+```html
+<body>
+  <nav>
+    <a href="#/">EN</a>
+    <a href="#/zh-cn/">中文</a>
+  </nav>
+  <div id="app"></div>
+</body>
+```
+
+
+## 配置文件
+
+那我们可以通过 Markdown 文件来配置导航。首先配置 `loadNavbar`，默认加载的文件为 `_navbar.md`。具体配置规则见[配置项#load-navbar](zh-cn/configuration#load-navbar)。
+
+*index.html*
+
+
+```html
+<script>
+  window.$docsify = {
+    loadNavbar: true
+  }
+</script>
+<script src="//unpkg.com/docsify"></script>
+```
+
+*_navbar.md*
+
+```markdown
+- [En](/)
+- [中文](/zh-cn/)
+```
+
+`_navbar.md` 加载逻辑和 `sidebar` 文件一致，从每层目录下获取。例如当前路由为 `/zh-cn/custom-navbar` 那么是从 `/zh-cn/_navbar.md` 获取导航栏。
+
+## 嵌套
+
+如果导航内容过多，可以写成嵌套的列表，会被渲染成下拉列表的形式。
+
+*_navbar.md*
+
+
+```markdown
+- 基础
+ - [快速开始](zh-cn/quickstart)
+ - [多页文档](zh-cn/more-pages)
+ - [定制导航栏](zh-cn/custom-navbar)
+ - [封面](zh-cn/cover)
+
+- 配置
+  - [配置项](zh-cn/configuration)
+  - [主题](zh-cn/themes)
+  - [使用插件](zh-cn/plugins)
+  - [Markdown 配置](zh-cn/markdown)
+  - [代码高亮](zh-cn/language-highlight)
+```
+
+效果图
+
+![嵌套导航栏](_images/zh-cn/nested-navbar.png "嵌套导航栏")

docs/zh-cn/deploy.md

@@ -0,0 +1,34 @@
+# 部署
+
+和 GitBook 生成的文档一样，我们可以直接把文档网站部署到 GitHub Pages 或者 VPS 上。
+
+## GitHub Pages
+
+GitHub Pages 支持从三个地方读取文件
+- `docs/` 目录
+- master 分支
+- gh-pages 分支
+
+我们推荐直接将文档放在 `docs/` 目录下，在设置页面开启 **GitHub Pages** 功能并选择 `master branch /docs folder` 选项。
+
+![github pages](_images/deploy-github-pages.png)
+
+!> 可以将文档放在根目录下，然后选择 **master 分支** 作为文档目录。
+
+## VPS
+
+和部署所有静态网站一样，只需将服务器的访问根目录设定为 `index.html` 文件。
+
+例如 nginx 的配置
+
+```nginx
+server {
+  listen 80;
+  server_name  your.domain.com;
+
+  location / {
+    alias /path/to/dir/of/docs;
+    index index.html;
+  }
+}
+```

docs/zh-cn/helpers.md

@@ -0,0 +1,26 @@
+# 文档助手
+
+docsify 扩展了一些 Markdown 语法，可以让文档更易读。
+
+
+## 强调内容
+
+适合显示重要的提示信息，语法为 `!> 内容`。
+
+```markdown
+!> 一段重要的内容，可以和其他 **Markdown** 语法混用。
+```
+
+!> 一段重要的内容，可以和其他 **Markdown** 语法混用。
+
+
+## 普通提示
+
+普通的提示信息，比如写 TODO 或者参考内容等。
+
+```markdown
+?> *TODO* 完善示例
+```
+
+?> *TODO* 完善示例
+

docs/zh-cn/language-highlight.md

@@ -0,0 +1,11 @@
+# 代码高亮
+
+内置的代码高亮工具是 [Prism](https://github.com/PrismJS/prism)，默认支持 CSS、JavaScript 和 HTML。如果需要高亮其语言——例如 PHP——可以手动引入代码高亮插件。
+
+```html
+<script src="//unpkg.com/docsify"></script>
+<script src="//unpkg.com/prismjs/components/prism-bash.js"></script>
+<script src="//unpkg.com/prismjs/components/prism-php.js"></script>
+```
+
+?> 其他的语言高亮插件可以查看[Prims 仓库](https://github.com/PrismJS/prism/tree/gh-pages/components)。

docs/zh-cn/markdown.md

@@ -0,0 +1,26 @@
+# Markdown 配置
+
+内置的 Markdown 解析器是 [marked](https://github.com/chjj/marked)，可以修改它的配置。
+
+```js
+window.$docsify = {
+  markdown: {
+    smartypants: true
+    // ...
+  }
+}
+```
+
+?> 完整配置参数参考 [marked 文档](https://github.com/chjj/marked#options-1)
+
+当然也可以完全定制 Markdown 解析规则。
+
+```js
+window.$docsify = {
+  markdown: function(marked, renderer) {
+    // ...
+
+    return marked
+  }
+}
+```

docs/zh-cn/more-pages.md

@@ -0,0 +1,66 @@
+# 多页文档
+
+如果需要创建多个页面，或者需要多级路由的网站，在 docsify 里也能很容易的实现。例如创建一个 `guide.md` 文件，那么对应的路由就是 `/#/guide`。
+
+假设你的目录结构如下：
+
+```text
+-| docs/
+  -| README.md
+  -| guide.md
+  -| zh-cn/
+    -| README.md
+    -| guide.md
+```
+
+那么对应的访问页面将是
+
+```text
+docs/README.md        => http://domain.com
+docs/guide.md         => http://domain.com/guide
+docs/zh-cn/README.md  => http://domain.com/zh-cn/
+docs/zh-cn/guide.md   => http://domain.com/zh-cn/guide
+```
+
+## 定制侧边栏
+
+默认情况下，侧边栏会根据当前文档的标题生成目录。也可以设置文档链接，通过 Markdown 文件生成，效果如当前的文档的侧边栏。
+
+首先配置 `loadSidebar` 选项，具体配置规则见[配置项#load-sidebar](zh-cn/configuration#load-sidebar)。
+
+```html
+<script>
+  window.$docsify = {
+    loadSidebar: true
+  }
+</script>
+<script src="//unpkg.com/docsify"></script>
+```
+
+接着创建 `_sidebar.md` 文件，内容如下
+
+```markdown
+- [首页](zh-cn/)
+- [指南](zh-cn/guide)
+```
+
+!> 需要在文档根目录创建 `.nojekyll` 命名的空文件，阻止 GitHub Pages 忽略命名是下划线开头的文件。
+
+
+`_sidebar.md` 的加载逻辑是从每层目录下获取文件，如果当前目录不存在该文件则回退到上一级目录。例如当前路径为 `/zh-cn/more-pages` 则从 `/zh-cn/_sidebar.md` 获取文件，如果不存在则从 `/_sidebar.md` 获取。
+
+## 显示目录
+
+自定义侧边栏同时也可以开启目录功能。设置 `subMaxLevel` 配置项，具体介绍见 [配置项#sub-max-level](zh-cn/configuration#sub-max-level)。
+
+```html
+<script>
+  window.$docsify = {
+    loadSidebar: true,
+    subMaxLevel: 2
+  }
+</script>
+<script src="//unpkg.com/docsify"></script>
+```
+
+

docs/zh-cn/plugins.md

@@ -0,0 +1,114 @@
+# 使用插件
+
+## 内置插件
+
+### 全文检索 - Search
+
+全文检索插件会根据当前页面上的超链接获取文档内容，在 `localStorage` 内建立文档索引。默认过期时间为一天，当然我们可以自己指定需要缓存的文件列表或者配置过期时间。
+
+
+```html
+<script>
+  window.$docsify = {
+    search: 'auto', // 默认值
+
+    search : [
+      '/',            // => /README.md
+      '/guide',       // => /guide.md
+      '/get-started', // => /get-started.md
+      '/zh-cn/',      // => /zh-cn/README.md
+    ],
+
+    // 完整配置参数
+    search: {
+      maxAge: 86400000, // 过期时间，单位毫秒，默认一天
+      paths: [], // or 'auto'
+      placeholder: 'Type to search'
+    }
+  }
+</script>
+<script src="//unpkg.com/docsify"></script>
+<script src="//unpkg.com/docsify/lib/plugins/search.js"></script>
+```
+
+### 谷歌统计 - Google Analytics
+
+需要配置 track id 才能使用。
+
+```html
+<script>
+  window.$docsify = {
+    ga: 'UA-XXXXX-Y'
+  }
+</script>
+<script src="//unpkg.com/docsify"></script>
+<script src="//unpkg.com/docsify/lib/plugins/ga.js"></script>
+```
+
+也可以通过 `data-ga` 配置 id。
+
+```html
+<script src="//unpkg.com/docsify" data-ga="UA-XXXXX-Y"></script>
+<script src="//unpkg.com/docsify/lib/plugins/ga.js"></script>
+```
+
+## 自定义插件
+
+docsify 提供了一套插件机制，其中提供的钩子（hook）支持处理异步逻辑，可以很方便的扩展功能。
+
+#### 完整功能
+
+```js
+window.$docsify = {
+ plugins: [
+  function (hook) {
+    hook.init(function() {
+      // 初始化时调用，只调用一次
+    })
+
+    hook.beforeEach(function(content) {
+      // 每次开始解析 Markdown 内容时调用
+      // ...
+      return content
+    })
+
+    hook.afterEach(function(html, next) {
+      // 解析成 html 后调用。beforeEach 和 afterEach 支持处理异步逻辑
+      // ...
+      // 异步处理完成后调用 next(html) 返回结果
+      next(html)
+    })
+
+    hook.ready(function() {
+      // docsify 初始化完成后调用，只调用一次
+    })
+  }
+ ]
+}
+```
+
+!> 如果需要用 docsify 的内部方法，可以通过 `window.Docsify.utils` 获取。
+
+#### 例子
+
+给每个页面的末尾加上 `footer`
+
+```js
+window.$docsify = {
+  plugins: [
+    function (hook) {
+      var footer = [
+        '<hr/>',
+        '<footer>',
+        '<span><a href="https://github.com/QingWei-Li">cinwell</a> &copy;2017.</span>',
+        '<span>Proudly published with <a href="https://github.com/QingWei-Li/docsify" target="_blank">docsify</a>.</span>',
+        '</footer>'
+      ].join('')
+
+      hook.afterEach(function (html) {
+        return html + footer
+      })
+    }
+  ]
+}
+```

docs/zh-cn/quickstart.md

@@ -0,0 +1,61 @@
+# 快速开始
+
+推荐安装 `docsify-cli` 工具，可以方便创建及本地预览文档网站。
+
+```bash
+npm i docsify-cli -g
+```
+
+## 初始化项目
+
+如果想在项目的 `./docs` 目录里写文档，直接通过 `init` 初始化项目。
+
+```bash
+docsify init ./docs
+```
+
+## 开始写文档
+
+初始化成功后，可以看到 `./docs` 目录下创建的几个文件
+
+- `index.html` 入口文件
+- `README.md` 会做为主页内容渲染
+- `.nojekyll` 用于阻止 GitHub Pages 会忽略掉下划线开头的文件
+
+直接编辑 `docs/README.md` 就能更新网站内容，当然也可以[写多个页面](zh-cn/more-pages)。
+
+## 本地预览网站
+
+运行一个本地服务器通过 `docsify serve` 可以方便的预览效果，而且提供 LiveReload 功能，可以让实时的预览。默认访问 http://localhost:3000 。
+
+```bash
+docsify serve docs
+```
+
+?> 更多命令行工具用法，参考 [docsify-cli 文档](https://github.com/QingWei-Li/docsify-cli)。
+
+## 手动初始化
+
+如果不喜欢 npm 或者觉得安装工具太麻烦，我们其实只需要直接创建一个 `index.html` 文件。
+
+*index.html*
+
+```html
+<!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>
+```
+
+如果系统里安装 Python 的话，也可以很轻易的启动一个静态服务器。
+
+```bash
+cd docs && python -m SimpleHTTPServer 3000
+```

docs/zh-cn/themes.md

@@ -0,0 +1,13 @@
+# 主题
+
+目前提供三套主题可供选择，模仿 [Vue](//vuejs.org) 和 [buble](//buble.surge.sh) 官网订制的主题样式。还有 [@liril-net](https://github.com/liril-net) 贡献的黑色风格的主题。
+
+```html
+  <link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
+  <link rel="stylesheet" href="//unpkg.com/docsify/themes/buble.css">
+  <link rel="stylesheet" href="//unpkg.com/docsify/themes/dark.css">
+```
+
+!> CSS 的压缩文件位于 `/lib/themes/`
+
+如果你有其他想法或者想开发别的主题，欢迎提 [PR](https://github.com/QingWei-Li/docsify/pulls)。

docs/zh-cn/vue.md

@@ -0,0 +1,87 @@
+# 兼容 Vue
+
+你可以直接在 Markdown 文件里写 Vue 代码，它将被执行。我们可以用它写一些 Vue 的 Demo 或者示例代码。
+
+
+## 基础用法
+
+在 `index.html` 里引入 Vue。
+
+```html
+<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/docsify"></script>
+```
+
+接着就可以愉快地在 Markdown 里写 Vue 了。默认会执行 `new Vue({ el: 'main' })` 创建示例。
+
+*README.md*
+
+```markdown
+# Vue 介绍
+
+`v-for` 的用法
+
+```html
+<ul>
+  <li v-for="i in 10">{{ i }}</li>
+</ul>
+``
+
+<ul>
+  <li v-for="i in 10">{{ i }}</li>
+</ul>
+```
+
+当然你也可以手动初始化 Vue，这样你可以自定义一些配置。
+
+*README.md*
+
+```markdown
+# Vue 的基本用法
+
+<div>hello {{ msg }}</div>
+
+<script>
+  new Vue({
+    el: 'main',
+    data: { msg: 'Vue' }
+  })
+</script>
+```
+
+!> 一个 Markdown 文件里只有第一个 `script` 标签内的内容会被执行。
+
+## 搭配 Vuep 写 Playground
+
+[Vuep](https://github.com/QingWei-Li/vuep) 是一个提供在线编辑和预览效果的 Vue 组件，搭配 docsify 可以直接在文档里写 Vue 的示例代码，支持 Vue component spec 和 JSX。
+
+*index.html*
+
+```html
+<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/vuep"></script>
+<script src="//unpkg.com/docsify"></script>
+```
+
+*README.md*
+```markdown
+# Vuep 使用
+
+<vuep template="#example"></vuep>
+
+<script type="text/x-template" id="example">
+  <template>
+    <div>Hello, {{ name }}!</div>
+  </template>
+
+  <script>
+    export default {
+      data: function () {
+        return { name: 'Vue' }
+      }
+    }
+  </script>
+</script>
+```
+
+?> 具体效果参考 [Vuep 文档](https://qingwei-li.github.io/vuep/)。

lib/docsify.js

@@ -1,4 +1,4 @@
-var Docsify = (function () {
+var D = (function () {
 'use strict';
 
 /**
@@ -97,7 +97,7 @@ function getRoute () {
   var loc = window.location;
   if (cacheHash === loc.hash && !isNil(cacheRoute$1)) { return cacheRoute$1 }
 
-  var route = loc.hash.match(/^#\/([^#]+)/);
+  var route = loc.hash.replace(/%23/g, '#').match(/^#\/([^#]+)/);
 
   if (route && route.length === 2) {
     route = route[1];
@@ -127,7 +127,9 @@ function slugify (string) {
   var slug = string.trim()
     .replace(/<[^>\d]+>/g, '')
     .replace(re, '')
-    .replace(/\s/g, replacement);
+    .replace(/\s/g, replacement)
+    .replace(/-+/g, replacement)
+    .replace(/^(\d)/, '_$1');
   var occurrences = slugify.occurrences[slug];
 
   if (slugify.occurrences.hasOwnProperty(slug)) {
@@ -166,6 +168,26 @@ var merge = Object.assign || function (to) {
   return to
 };
 
+function emojify (text) {
+  return text
+    .replace(/<(pre|template)[^>]*?>([\s\S]+)<\/(pre|template)>/g, function (match) { return match.replace(/:/g, '__colon__'); })
+    .replace(/:(\w*?):/ig, '<img class="emoji" src="https://assets-cdn.github.com/images/icons/emoji/$1.png" alt="$1" />')
+    .replace(/__colon__/g, ':')
+}
+
+
+var utils = Object.freeze({
+	load: load,
+	genTree: genTree,
+	camel2kebab: camel2kebab,
+	isNil: isNil,
+	getRoute: getRoute,
+	isMobile: isMobile,
+	slugify: slugify,
+	merge: merge,
+	emojify: emojify
+});
+
 /**
  * Active sidebar when scroll
  * @link https://buble.surge.sh/
@@ -173,14 +195,21 @@ var merge = Object.assign || function (to) {
 function scrollActiveSidebar () {
   if (isMobile()) { return }
 
+  var hoveredOverSidebar = false;
   var anchors = document.querySelectorAll('.anchor');
+  var sidebar = document.querySelector('.sidebar');
+  var sidebarContainer = sidebar.querySelector('.sidebar-nav');
+  var sidebarHeight = sidebar.clientHeight;
+
   var nav = {};
-  var lis = document.querySelectorAll('.sidebar li');
-  var active = null;
+  var lis = sidebar.querySelectorAll('li');
+  var active = sidebar.querySelector('li.active');
 
   for (var i = 0, len = lis.length; i < len; i += 1) {
     var li = lis[i];
-    var href = li.querySelector('a').getAttribute('href');
+    var a = li.querySelector('a');
+    if (!a) { continue }
+    var href = a.getAttribute('href');
 
     if (href !== '/') {
       var match = href.match('#([^#]+)$');
@@ -191,27 +220,52 @@ function scrollActiveSidebar () {
   }
 
   function highlight () {
+    var top = document.body.scrollTop;
+    var last;
+
     for (var i = 0, len = anchors.length; i < len; i += 1) {
       var node = anchors[i];
-      var bcr = node.getBoundingClientRect();
 
-      if (bcr.top < 10 && bcr.bottom > 10) {
-        var li = nav[node.getAttribute('data-id')];
-
-        if (!li || li === active) { return }
-        if (active) { active.setAttribute('class', ''); }
-
-        li.setAttribute('class', 'active');
-        active = li;
-
-        return
+      if (node.offsetTop > top) {
+        if (!last) { last = node; }
+        break
+      } else {
+        last = node;
       }
     }
+    if (!last) { return }
+    var li = nav[last.getAttribute('data-id')];
+
+    if (!li || li === active) { return }
+    if (active) { active.classList.remove('active'); }
+
+    li.classList.add('active');
+    active = li;
+
+    // scroll into view
+    // https://github.com/vuejs/vuejs.org/blob/master/themes/vue/source/js/common.js#L282-L297
+    if (!hoveredOverSidebar && !sticky.noSticky) {
+      var currentPageOffset = 0;
+      var currentActiveOffset = active.offsetTop + active.clientHeight + 40;
+      var currentActiveIsInView = (
+        active.offsetTop >= sidebarContainer.scrollTop &&
+        currentActiveOffset <= sidebarContainer.scrollTop + sidebarHeight
+      );
+      var linkNotFurtherThanSidebarHeight = currentActiveOffset - currentPageOffset < sidebarHeight;
+      var newScrollTop = currentActiveIsInView
+        ? sidebarContainer.scrollTop
+        : linkNotFurtherThanSidebarHeight
+          ? currentPageOffset
+          : currentActiveOffset - sidebarHeight;
+
+      sidebar.scrollTop = newScrollTop;
+    }
   }
 
   window.removeEventListener('scroll', highlight);
   window.addEventListener('scroll', highlight);
-  highlight();
+  sidebar.addEventListener('mouseover', function () { hoveredOverSidebar = true; });
+  sidebar.addEventListener('mouseleave', function () { hoveredOverSidebar = false; });
 }
 
 function scrollIntoView () {
@@ -219,7 +273,9 @@ function scrollIntoView () {
   if (!id || !id.length) { return }
   var section = document.querySelector(decodeURIComponent(id[0]));
 
-  if (section) { section.scrollIntoView(); }
+  if (section) { setTimeout(function () { return section.scrollIntoView(); }, 0); }
+
+  return section
 }
 
 /**
@@ -235,13 +291,13 @@ function activeLink (dom, activeParent) {
     .forEach(function (node) {
       if (host.indexOf(node.href) === 0 && !target) {
         activeParent
-          ? node.parentNode.setAttribute('class', 'active')
-          : node.setAttribute('class', 'active');
+          ? node.parentNode.classList.add('active')
+          : node.classList.add('active');
         target = node;
       } else {
         activeParent
-          ? node.parentNode.removeAttribute('class')
-          : node.removeAttribute('class');
+          ? node.parentNode.classList.remove('active')
+          : node.classList.remove('active');
       }
     });
 
@@ -259,24 +315,33 @@ function bindToggle (dom) {
   dom.addEventListener('click', function () { return body.classList.toggle('close'); });
 
   if (isMobile()) {
-    document.querySelector('aside')
-      .addEventListener('click', function (_) { return body.classList.toggle('close'); });
+    var sidebar = document.querySelector('.sidebar');
+    sidebar.addEventListener('click', function () {
+      body.classList.toggle('close');
+      setTimeout(function () { return activeLink(sidebar, true); }, 0);
+    });
   }
 }
 
-function scroll2Top () {
-  document.body.scrollTop = 0;
+var scrollingElement = document.scrollingElement || document.documentElement;
+
+function scroll2Top (offset) {
+  if ( offset === void 0 ) offset = 0;
+
+  scrollingElement.scrollTop = offset === true ? 0 : Number(offset);
 }
 
 function sticky () {
-  var dom = document.querySelector('section.cover');
-  var coverHeight = dom.getBoundingClientRect().height;
+  sticky.dom = sticky.dom || document.querySelector('section.cover');
+  var coverHeight = sticky.dom.getBoundingClientRect().height;
 
   return (function () {
-    if (window.pageYOffset >= coverHeight || dom.classList.contains('hidden')) {
+    if (window.pageYOffset >= coverHeight || sticky.dom.classList.contains('hidden')) {
       document.body.classList.add('sticky');
+      sticky.noSticky = false;
     } else {
       document.body.classList.remove('sticky');
+      sticky.noSticky = true;
     }
   })()
 }
@@ -1579,12 +1644,8 @@ marked.inlineLexer = InlineLexer.output;
 
 marked.parse = marked;
 
-if (typeof module !== 'undefined' && typeof exports === 'object') {
+{
   module.exports = marked;
-} else if (typeof define === 'function' && define.amd) {
-  define(function() { return marked; });
-} else {
-  this.marked = marked;
 }
 
 }).call(function() {
@@ -1802,6 +1863,9 @@ var _ = _self.Prism = {
 		_.hooks.run('before-sanity-check', env);
 
 		if (!env.code || !env.grammar) {
+			if (env.code) {
+				env.element.textContent = env.code;
+			}
 			_.hooks.run('complete', env);
 			return;
 		}
@@ -1879,9 +1943,16 @@ var _ = _self.Prism = {
 					lookbehindLength = 0,
 					alias = pattern.alias;
 
+				if (greedy && !pattern.pattern.global) {
+					// Without the global flag, lastIndex won't work
+					var flags = pattern.pattern.toString().match(/[imuy]*$/)[0];
+					pattern.pattern = RegExp(pattern.pattern.source, flags + "g");
+				}
+
 				pattern = pattern.pattern || pattern;
 
-				for (var i=0; i<strarr.length; i++) { // Don’t cache length as it changes during the loop
+				// Don’t cache length as it changes during the loop
+				for (var i=0, pos = 0; i<strarr.length; pos += strarr[i].length, ++i) {
 
 					var str = strarr[i];
 
@@ -1901,40 +1972,38 @@ var _ = _self.Prism = {
 
 					// Greedy patterns can override/remove up to two previously matched tokens
 					if (!match && greedy && i != strarr.length - 1) {
-						// Reconstruct the original text using the next two tokens
-						var nextToken = strarr[i + 1].matchedStr || strarr[i + 1],
-						    combStr = str + nextToken;
-
-						if (i < strarr.length - 2) {
-							combStr += strarr[i + 2].matchedStr || strarr[i + 2];
-						}
-
-						// Try the pattern again on the reconstructed text
-						pattern.lastIndex = 0;
-						match = pattern.exec(combStr);
+						pattern.lastIndex = pos;
+						match = pattern.exec(text);
 						if (!match) {
-							continue;
+							break;
 						}
 
-						var from = match.index + (lookbehind ? match[1].length : 0);
-						// To be a valid candidate, the new match has to start inside of str
-						if (from >= str.length) {
+						var from = match.index + (lookbehind ? match[1].length : 0),
+						    to = match.index + match[0].length,
+						    k = i,
+						    p = pos;
+
+						for (var len = strarr.length; k < len && p < to; ++k) {
+							p += strarr[k].length;
+							// Move the index i to the element in strarr that is closest to from
+							if (from >= p) {
+								++i;
+								pos = p;
+							}
+						}
+
+						/*
+						 * If strarr[i] is a Token, then the match starts inside another Token, which is invalid
+						 * If strarr[k - 1] is greedy we are in conflict with another greedy pattern
+						 */
+						if (strarr[i] instanceof Token || strarr[k - 1].greedy) {
 							continue;
 						}
-						var to = match.index + match[0].length,
-						    len = str.length + nextToken.length;
 
 						// Number of tokens to delete and replace with the new match
-						delNum = 3;
-
-						if (to <= len) {
-							if (strarr[i + 1].greedy) {
-								continue;
-							}
-							delNum = 2;
-							combStr = combStr.slice(0, len);
-						}
-						str = combStr;
+						delNum = k - i;
+						str = text.slice(pos, p);
+						match.index -= pos;
 					}
 
 					if (!match) {
@@ -2003,7 +2072,7 @@ var Token = _.Token = function(type, content, alias, matchedStr, greedy) {
 	this.content = content;
 	this.alias = alias;
 	// Copy of the full string this token was created from
-	this.matchedStr = matchedStr || null;
+	this.length = (matchedStr || "").length|0;
 	this.greedy = !!greedy;
 };
 
@@ -2039,13 +2108,11 @@ Token.stringify = function(o, language, parent) {
 
 	_.hooks.run('wrap', env);
 
-	var attributes = '';
+	var attributes = Object.keys(env.attributes).map(function(name) {
+		return name + '="' + (env.attributes[name] || '').replace(/"/g, '&quot;') + '"';
+	}).join(' ');
 
-	for (var name in env.attributes) {
-		attributes += (attributes ? ' ' : '') + name + '="' + (env.attributes[name] || '') + '"';
-	}
-
-	return '<' + env.tag + ' class="' + env.classes.join(' ') + '" ' + attributes + '>' + env.content + '</' + env.tag + '>';
+	return '<' + env.tag + ' class="' + env.classes.join(' ') + '"' + (attributes ? ' ' + attributes : '') + '>' + env.content + '</' + env.tag + '>';
 
 };
 
@@ -2078,7 +2145,11 @@ if (script) {
 
 	if (document.addEventListener && !script.hasAttribute('data-manual')) {
 		if(document.readyState !== "loading") {
-			requestAnimationFrame(_.highlightAll, 0);
+			if (window.requestAnimationFrame) {
+				window.requestAnimationFrame(_.highlightAll);
+			} else {
+				window.setTimeout(_.highlightAll, 16);
+			}
 		}
 		else {
 			document.addEventListener('DOMContentLoaded', _.highlightAll);
@@ -2090,7 +2161,7 @@ return _self.Prism;
 
 })();
 
-if (typeof module !== 'undefined' && module.exports) {
+if ('object' !== 'undefined' && module.exports) {
 	module.exports = Prism;
 }
 
@@ -2107,10 +2178,10 @@ if (typeof commonjsGlobal !== 'undefined') {
 Prism.languages.markup = {
 	'comment': /<!--[\w\W]*?-->/,
 	'prolog': /<\?[\w\W]+?\?>/,
-	'doctype': /<!DOCTYPE[\w\W]+?>/,
+	'doctype': /<!DOCTYPE[\w\W]+?>/i,
 	'cdata': /<!\[CDATA\[[\w\W]*?]]>/i,
 	'tag': {
-		pattern: /<\/?(?!\d)[^\s>\/=.$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,
+		pattern: /<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,
 		inside: {
 			'tag': {
 				pattern: /^<\/?[^\s>\/]+/i,
@@ -2167,7 +2238,10 @@ Prism.languages.css = {
 	},
 	'url': /url\((?:(["'])(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,
 	'selector': /[^\{\}\s][^\{\};]*?(?=\s*\{)/,
-	'string': /("|')(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1/,
+	'string': {
+		pattern: /("|')(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1/,
+		greedy: true
+	},
 	'property': /(\b|\B)[\w-]+(?=\s*:)/i,
 	'important': /\B!important\b/i,
 	'function': /[-a-z0-9]+(?=\()/i,
@@ -2248,7 +2322,8 @@ Prism.languages.javascript = Prism.languages.extend('clike', {
 	'keyword': /\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,
 	'number': /\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,
 	// Allow for all non-ASCII characters (See http://stackoverflow.com/a/2008444)
-	'function': /[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i
+	'function': /[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i,
+	'operator': /--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*\*?|\/|~|\^|%|\.{3}/
 });
 
 Prism.languages.insertBefore('javascript', 'keyword', {
@@ -2391,8 +2466,8 @@ function corner (data) {
 /**
  * Render main content
  */
-function main (tpl) {
-  var aside = tpl + "<aside class=\"sidebar\"></aside>";
+function main () {
+  var aside = (toggle()) + "<aside class=\"sidebar\"><div class=\"sidebar-nav\"></div></aside>";
 
   return (isMobile() ? (aside + "<main>") : ("<main>" + aside)) +
     "<section class=\"content\">\n      <article class=\"markdown-section\"></article>\n    </section>\n    </main>"
@@ -2433,10 +2508,45 @@ function tree (toc, tpl) {
   return tpl
 }
 
-var OPTIONS$1 = {};
+function helper (className, content) {
+  return ("<p class=\"" + className + "\">" + (content.slice(5).trim()) + "</p>")
+}
+
+function theme (color) {
+  return ("<style>:root{--theme-color: " + color + ";}</style>")
+}
+
+function replaceVar (block) {
+  block.innerHTML = block.innerHTML.replace(/var\(\s*--theme-color.*?\)/g, $docsify.themeColor);
+}
+
+function cssVars () {
+  // variable support
+  if (window.CSS && window.CSS.supports && window.CSS.supports('(--foo: red)')) { return }
+
+  var styleBlocks = document.querySelectorAll('style:not(.inserted),link');[].forEach.call(styleBlocks, function (block) {
+    if (block.nodeName === 'STYLE') {
+      replaceVar(block);
+    } else if (block.nodeName === 'LINK') {
+      var href = block.getAttribute('href');
+
+      if (!/\.css$/.test(href)) { return }
+
+      load(href).then(function (res) {
+        var style = document.createElement('style');
+
+        style.innerHTML = res;
+        document.head.appendChild(style);
+        replaceVar(style);
+      });
+    }
+  });
+}
+
 var markdown = marked;
 var toc = [];
 var CACHE = {};
+var originTitle = document.title;
 
 var renderTo = function (dom, content) {
   dom = typeof dom === 'object' ? dom : document.querySelector(dom);
@@ -2448,11 +2558,8 @@ var renderTo = function (dom, content) {
 
 /**
  * init render
- * @param  {Object} options
  */
-function init (options) {
-  OPTIONS$1 = options;
-
+function init () {
   var renderer = new marked.Renderer();
   /**
    * render anchor tag
@@ -2462,10 +2569,7 @@ function init (options) {
     var slug = slugify(text);
     var route = '';
 
-    if (OPTIONS$1.router) {
-      route = "#/" + (getRoute());
-    }
-
+    route = "#/" + (getRoute());
     toc.push({ level: level, slug: (route + "#" + (encodeURIComponent(slug))), title: text });
 
     return ("<h" + level + " id=\"" + slug + "\"><a href=\"" + route + "#" + slug + "\" data-id=\"" + slug + "\" class=\"anchor\"><span>" + text + "</span></a></h" + level + ">")
@@ -2474,25 +2578,49 @@ function init (options) {
   renderer.code = function (code, lang) {
     if ( lang === void 0 ) lang = '';
 
-    var hl = prism.highlight(code, prism.languages[lang] || prism.languages.markup)
-      .replace(/{{/g, '<span>{{</span>');
+    var hl = prism.highlight(code, prism.languages[lang] || prism.languages.markup);
 
-    return ("<pre data-lang=\"" + lang + "\"><code class=\"lang-" + lang + "\">" + hl + "</code></pre>")
+    return ("<pre v-pre data-lang=\"" + lang + "\"><code class=\"lang-" + lang + "\">" + hl + "</code></pre>")
   };
   renderer.link = function (href, title, text) {
-    if (OPTIONS$1.router && !/:/.test(href)) {
-      href = ("#/" + href).replace(/\/\//g, '/');
+    if (!/:|(\/{2})/.test(href)) {
+      href = ("#/" + href).replace(/\/+/g, '/');
     }
-
     return ("<a href=\"" + href + "\" title=\"" + (title || '') + "\">" + text + "</a>")
   };
+  renderer.paragraph = function (text) {
+    if (/^!&gt;/.test(text)) {
+      return helper('tip', text)
+    } else if (/^\?&gt;/.test(text)) {
+      return helper('warn', text)
+    }
+    return ("<p>" + text + "</p>")
+  };
+  renderer.image = function (href, title, text) {
+    var url = /:|(\/{2})/.test(href) ? href : ($docsify.basePath + href).replace(/\/+/g, '/');
+    var titleHTML = title ? (" title=\"" + title + "\"") : '';
 
-  if (typeof OPTIONS$1.markdown === 'function') {
-    markdown.setOptions({ renderer: renderer });
-    markdown = OPTIONS$1.markdown.call(this, markdown);
+    return ("<img src=\"" + url + "\" alt=\"" + text + "\"" + titleHTML + " />")
+  };
+
+  if (typeof $docsify.markdown === 'function') {
+    markdown = $docsify.markdown.call(this, markdown, renderer);
   } else {
-    markdown.setOptions(merge({ renderer: renderer }, OPTIONS$1.markdown));
+    if ($docsify.markdown && $docsify.markdown.renderer) {
+      $docsify.markdown.renderer = merge(renderer, $docsify.markdown.renderer);
+    }
+    markdown.setOptions(merge({ renderer: renderer }, $docsify.markdown));
   }
+
+  var md = markdown;
+
+  markdown = function (text) { return emojify(md(text)); };
+
+  window.Docsify.utils.marked = function (text) {
+    var result = markdown(text);
+    toc = [];
+    return result
+  };
 }
 
 /**
@@ -2500,21 +2628,35 @@ function init (options) {
  */
 function renderApp (dom, replace) {
   var nav = document.querySelector('nav') || document.createElement('nav');
+  var body = document.body;
+  var head = document.head;
 
-  if (!OPTIONS$1.repo) { nav.classList.add('no-badge'); }
+  if (!$docsify.repo) { nav.classList.add('no-badge'); }
 
-  dom[replace ? 'outerHTML' : 'innerHTML'] = corner(OPTIONS$1.repo) +
-    (OPTIONS$1.coverpage ? cover() : '') +
-    main(OPTIONS$1.sidebarToggle ? toggle() : '');
-  document.body.insertBefore(nav, document.body.children[0]);
+  dom[replace ? 'outerHTML' : 'innerHTML'] = corner($docsify.repo) +
+    ($docsify.coverpage ? cover() : '') +
+    main();
+  body.insertBefore(nav, body.children[0]);
+
+  // theme color
+  if ($docsify.themeColor) {
+    head.innerHTML += theme($docsify.themeColor);
+    cssVars();
+  }
+
+  // render name
+  if ($docsify.name) {
+    var aside = document.querySelector('.sidebar');
+    aside.innerHTML = "<h1><a href=\"" + ($docsify.nameLink) + "\">" + ($docsify.name) + "</a></h1>" + aside.innerHTML;
+  }
 
   // bind toggle
   bindToggle('button.sidebar-toggle');
   // bind sticky effect
-  if (OPTIONS$1.coverpage) {
+  if ($docsify.coverpage) {
     !isMobile() && window.addEventListener('scroll', sticky);
   } else {
-    document.body.classList.add('sticky');
+    body.classList.add('sticky');
   }
 }
 
@@ -2522,14 +2664,34 @@ function renderApp (dom, replace) {
  * article
  */
 function renderArticle (content) {
-  renderTo('article', content ? markdown(content) : 'not found');
-  if (!OPTIONS$1.sidebar && !OPTIONS$1.loadSidebar) { renderSidebar(); }
+  var hook = window.Docsify.hook;
+  var renderFn = function (data) {
+    renderTo('article', data);
+    if (!$docsify.loadSidebar) { renderSidebar(); }
 
-  if (content && typeof Vue !== 'undefined' && typeof Vuep !== 'undefined') {
-    var vm = new Vue({ el: 'main' }); // eslint-disable-line
-    vm.$nextTick(function (_) { return scrollActiveSidebar(); });
-  }
-  if (OPTIONS$1.auto2top) { scroll2Top(); }
+    if (data && typeof Vue !== 'undefined') {
+      CACHE.vm && CACHE.vm.$destroy();
+
+      var script = [].slice.call(
+        document.body.querySelectorAll('article>script'))
+          .filter(function (script) { return !/template/.test(script.type); }
+        )[0];
+      var code = script ? script.innerText.trim() : null;
+
+      script && script.remove();
+      CACHE.vm = code
+        ? new Function(("return " + code))()
+        : new Vue({ el: 'main' }); // eslint-disable-line
+      CACHE.vm && CACHE.vm.$nextTick(function (_) { return scrollActiveSidebar(); });
+    }
+    if ($docsify.auto2top) { setTimeout(function () { return scroll2Top($docsify.auto2top); }, 0); }
+  };
+
+  hook.emit('before', content, function (result) {
+    var html = result ? markdown(result) : '';
+
+    hook.emit('after', html, function (result) { return renderFn(result || 'not found'); });
+  });
 }
 
 /**
@@ -2551,23 +2713,29 @@ function renderSidebar (content) {
 
   if (content) {
     html = markdown(content);
-  } else if (OPTIONS$1.sidebar) {
-    html = tree(OPTIONS$1.sidebar, '<ul>');
+    // find url tag
+    html = html.match(/<ul[^>]*>([\s\S]+)<\/ul>/g)[0];
   } else {
-    html = tree(genTree(toc, OPTIONS$1.maxLevel), '<ul>');
+    html = tree(genTree(toc, $docsify.maxLevel), '<ul>');
   }
 
-  renderTo('aside.sidebar', html);
-  var target = activeLink('aside.sidebar', true);
-  if (content) { renderSubSidebar(target); }
-  toc = [];
+  renderTo('.sidebar-nav', html);
 
+  if (toc[0] && toc[0].level === 1) {
+    document.title = "" + (toc[0].title) + (originTitle ? ' - ' + originTitle : '');
+  }
+
+  var target = activeLink('.sidebar-nav', true);
+  if (target) { renderSubSidebar(target); }
+
+  toc = [];
   scrollActiveSidebar();
 }
 
 function renderSubSidebar (target) {
-  if (!OPTIONS$1.subMaxLevel) { return }
-  target.parentNode.innerHTML += tree(genTree(toc, OPTIONS$1.subMaxLevel), '<ul>');
+  if (!$docsify.subMaxLevel) { return }
+  toc[0] && toc[0].level === 1 && toc.shift();
+  target.parentNode.innerHTML += tree(genTree(toc, $docsify.subMaxLevel), '<ul>');
 }
 
 /**
@@ -2580,18 +2748,21 @@ function renderCover (content) {
     return
   }
   renderCover.dom.classList.add('show');
-  if (renderCover.rendered) { return }
+  if (renderCover.rendered) { return sticky() }
 
   // render cover
+  var cacheToc = toc.slice();
   var html = markdown(content);
-  var match = html.trim().match('<p><img[^s]+src="(.*?)"[^a]+alt="(.*?)"></p>$');
+  var match = html.trim().match('<p><img[^s]+src="(.*?)"[^a]+alt="(.*?)">([^<]*?)</p>$');
+
+  toc = cacheToc.slice();
 
   // render background
   if (match) {
     var coverEl = document.querySelector('section.cover');
 
     if (match[2] === 'color') {
-      coverEl.style.background = match[1];
+      coverEl.style.background = match[1] + (match[3] || '');
     } else {
       coverEl.classList.add('has-mask');
       coverEl.style.backgroundImage = "url(" + (match[1]) + ")";
@@ -2642,20 +2813,72 @@ function renderLoading (ref) {
   }
 }
 
+var Hook = function Hook () {
+  this.beforeHooks = [];
+  this.afterHooks = [];
+  this.initHooks = [];
+  this.readyHooks = [];
+};
+
+Hook.prototype.beforeEach = function beforeEach (fn) {
+  this.beforeHooks.push(fn);
+};
+
+Hook.prototype.afterEach = function afterEach (fn) {
+  this.afterHooks.push(fn);
+};
+
+Hook.prototype.init = function init (fn) {
+  this.initHooks.push(fn);
+};
+
+Hook.prototype.ready = function ready (fn) {
+  this.readyHooks.push(fn);
+};
+
+Hook.prototype.emit = function emit (name, data, next) {
+  var newData = data;
+  var queue = this[name + 'Hooks'];
+  var step = function (index) {
+    var hook = queue[index];
+    if (index >= queue.length) {
+      next && next(newData);
+    } else {
+      if (typeof hook === 'function') {
+        if (hook.length === 2) {
+          hook(data, function (result) {
+            newData = result;
+            step(index + 1);
+          });
+        } else {
+          var result = hook(data);
+          newData = result !== undefined ? result : newData;
+          step(index + 1);
+        }
+      } else {
+        step(index + 1);
+      }
+    }
+  };
+
+  step(0);
+};
+
 var OPTIONS = merge({
   el: '#app',
   repo: '',
   maxLevel: 6,
   subMaxLevel: 0,
-  sidebar: '',
-  sidebarToggle: false,
   loadSidebar: null,
   loadNavbar: null,
-  router: false,
   homepage: 'README.md',
   coverpage: '',
   basePath: '',
-  auto2top: false
+  auto2top: false,
+  name: '',
+  themeColor: '',
+  nameLink: window.location.pathname,
+  ga: ''
 }, window.$docsify);
 var script = document.currentScript || [].slice.call(document.getElementsByTagName('script')).pop();
 
@@ -2668,20 +2891,40 @@ if (script) {
   if (OPTIONS.loadSidebar === true) { OPTIONS.loadSidebar = '_sidebar.md'; }
   if (OPTIONS.loadNavbar === true) { OPTIONS.loadNavbar = '_navbar.md'; }
   if (OPTIONS.coverpage === true) { OPTIONS.coverpage = '_coverpage.md'; }
-  if (OPTIONS.sidebar) { OPTIONS.sidebar = window[OPTIONS.sidebar]; }
+  if (OPTIONS.repo === true) { OPTIONS.repo = ''; }
+  if (OPTIONS.name === true) { OPTIONS.name = ''; }
 }
 
+var hook = new Hook();
+
+// utils
+window.$docsify = OPTIONS;
+window.Docsify = {
+  installed: true,
+  utils: merge({}, utils),
+  hook: hook
+};
+
 // load options
-init(OPTIONS);
+init();
 
 var cacheRoute = null;
 var cacheXhr = null;
 
+var getAlias = function (route) {
+  if (OPTIONS.alias[route]) {
+    return getAlias(OPTIONS.alias[route])
+  } else {
+    return route
+  }
+};
+
 var mainRender = function (cb) {
-  var route = OPTIONS.basePath + getRoute();
+  var page;
+  var route = getRoute();
   if (cacheRoute === route) { return cb() }
 
-  var basePath = cacheRoute = route;
+  var basePath = cacheRoute = OPTIONS.basePath + route;
 
   if (!/\//.test(basePath)) {
     basePath = '';
@@ -2689,9 +2932,18 @@ var mainRender = function (cb) {
     basePath = basePath.match(/(\S*\/)[^\/]+$/)[1];
   }
 
-  var page;
+  // replace route
+  route = '/' + route;
+  if (OPTIONS.alias && OPTIONS.alias[route]) {
+    route = getAlias(route);
+  } else {
+    route = (OPTIONS.basePath + route).replace(/\/+/, '/');
+  }
+
   if (!route) {
     page = OPTIONS.homepage || 'README.md';
+  } else if (/\.md$/.test(route)) {
+    page = route;
   } else if (/\/$/.test(route)) {
     page = route + "README.md";
   } else {
@@ -2712,11 +2964,10 @@ var mainRender = function (cb) {
     if (OPTIONS.coverpage && page !== OPTIONS.homepage) { renderCover(); }
     // render sidebar
     if (OPTIONS.loadSidebar) {
-      load(basePath + OPTIONS.loadSidebar)
-        .then(function (result) {
-          renderSidebar(result);
-          cb();
-        });
+      var renderSidebar$$1 = function (result) { renderSidebar(result); cb(); };
+
+      load(basePath + OPTIONS.loadSidebar).then(renderSidebar$$1,
+        function (_) { return load(OPTIONS.loadSidebar).then(renderSidebar$$1); });
     } else {
       cb();
     }
@@ -2724,27 +2975,32 @@ var mainRender = function (cb) {
 
   // Render navbar
   if (OPTIONS.loadNavbar) {
-    load(basePath + OPTIONS.loadNavbar).then(renderNavbar);
+    load(basePath + OPTIONS.loadNavbar).then(renderNavbar,
+      function (_) { return load(OPTIONS.loadNavbar).then(renderNavbar); });
   }
 };
 
 var Docsify = function () {
-  var dom = document.querySelector(OPTIONS.el) || document.body;
-  var replace = dom !== document.body;
-  var main = function () {
-    mainRender(function (_) {
-      scrollIntoView();
-      activeLink('nav');
-    });
-  };
+  setTimeout(function (_) {
+    [].concat(OPTIONS.plugins).forEach(function (fn) { return typeof fn === 'function' && fn(hook); });
+    window.Docsify.hook.emit('init');
 
-  // Render app
-  renderApp(dom, replace);
-  main();
-  if (OPTIONS.router) {
+    var dom = document.querySelector(OPTIONS.el) || document.body;
+    var replace = dom !== document.body;
+    var main = function () {
+      mainRender(function (_) {
+        scrollIntoView();
+        activeLink('nav');
+      });
+    };
+
+    // Render app
+    renderApp(dom, replace);
+    main();
     if (!/^#\//.test(window.location.hash)) { window.location.hash = '#/'; }
     window.addEventListener('hashchange', main);
-  }
+    window.Docsify.hook.emit('ready');
+  }, 0);
 };
 
 var index = Docsify();

lib/plugins/ga.js

@@ -0,0 +1,50 @@
+this.D = this.D || {};
+this.D.GA = (function () {
+'use strict';
+
+// From https://github.com/egoist/vue-ga/blob/master/src/index.js
+
+function appendScript () {
+  var script = document.createElement('script');
+  script.async = true;
+  script.src = 'https://www.google-analytics.com/analytics.js';
+  document.body.appendChild(script);
+}
+
+function init (id) {
+  if (!window.ga) {
+    appendScript();
+    window.ga = window.ga || function () {
+      (window.ga.q = window.ga.q || []).push(arguments);
+    };
+    window.ga.l = Number(new Date());
+    window.ga('create', id, 'auto');
+  }
+}
+
+function collect () {
+  init(window.$docsify.ga);
+  window.ga('set', 'page', location.href);
+  window.ga('send', 'pageview');
+}
+
+var install = function () {
+  if (install.installed) { return }
+  install.installed = true;
+
+  if (!window.$docsify.ga) {
+    console.error('[Docsify] ga is required.');
+    return
+  }
+
+  window.$docsify.plugins = [].concat(function (hook) {
+    hook.init(collect);
+    hook.beforeEach(collect);
+  }, window.$docsify.plugins);
+};
+
+var ga = install();
+
+return ga;
+
+}());

lib/plugins/ga.min.js

@@ -0,0 +1 @@
+this.D=this.D||{},this.D.GA=function(){"use strict";function i(){var i=document.createElement("script");i.async=!0,i.src="https://www.google-analytics.com/analytics.js",document.body.appendChild(i)}function n(n){window.ga||(i(),window.ga=window.ga||function(){(window.ga.q=window.ga.q||[]).push(arguments)},window.ga.l=Number(new Date),window.ga("create",n,"auto"))}function o(){n(window.$docsify.ga),window.ga("set","page",location.href),window.ga("send","pageview")}var t=function(){if(!t.installed)return t.installed=!0,window.$docsify.ga?void(window.$docsify.plugins=[].concat(function(i){i.init(o),i.beforeEach(o)},window.$docsify.plugins)):void console.error("[Docsify] ga is required.")},a=t();return a}();

lib/plugins/search.js

@@ -0,0 +1,301 @@
+this.D = this.D || {};
+this.D.Search = (function () {
+'use strict';
+
+var INDEXS = {};
+var CONFIG = {
+  placeholder: 'Type to search',
+  paths: 'auto',
+  maxAge: 86400000 // 1 day
+};
+
+var isObj = function (obj) {
+  return Object.prototype.toString.call(obj) === '[object Object]'
+};
+
+var escapeHtml = function (string) {
+  var entityMap = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;',
+    '/': '&#x2F;'
+  };
+
+  return String(string).replace(/[&<>"'\/]/g, function (s) { return entityMap[s]; })
+};
+
+/**
+ * find all filepath from A tag
+ */
+var getAllPaths = function () {
+  var paths = [];[].slice.call(document.querySelectorAll('a'))
+    .map(function (node) {
+      var href = node.href;
+      if (/#\/[^#]*?$/.test(href)) {
+        var path = href.replace(/^[^#]+#/, '');
+
+        if (paths.indexOf(path) <= 0) { paths.push(path); }
+      }
+    });
+
+  return paths
+};
+
+/**
+ * return file path
+ */
+var genFilePath = function (path, basePath) {
+  if ( basePath === void 0 ) basePath = window.$docsify.basePath;
+
+  var filePath = /\/$/.test(path) ? (path + "README.md") : (path + ".md");
+
+  filePath = basePath + filePath;
+
+  return filePath.replace(/\/+/g, '/')
+};
+
+/**
+ * generate index
+ */
+var genIndex = function (path, content) {
+  if ( content === void 0 ) content = '';
+
+  INDEXS[path] = { slug: '', title: '', body: '' };
+  var slug;
+
+  content
+    // remove PRE and TEMPLATE tag
+    .replace(/<template[^>]*?>[\s\S]+?<\/template>/g, '')
+    // find all html tag
+    .replace(/<(\w+)([^>]*?)>([\s\S]+?)<\//g, function (match, tag, attr, html) {
+      // remove all html tag
+      var text = html.replace(/<[^>]+>/g, '');
+
+      // tag is headline
+      if (/^h\d$/.test(tag)) {
+        // <h1 id="xxx"></h1>
+        var id = attr.match(/id="(\S+)"/)[1];
+
+        slug = ("#/" + path + "#" + id).replace(/\/+/, '/');
+        INDEXS[slug] = { slug: slug, title: text, body: '' };
+      } else {
+        if (!slug) { return }
+        // other html tag
+        if (!INDEXS[slug]) {
+          INDEXS[slug] = {};
+        } else {
+          if (INDEXS[slug].body && INDEXS[slug].body.length) {
+            INDEXS[slug].body += '\n' + text;
+          } else {
+            INDEXS[slug].body = text;
+          }
+        }
+      }
+    });
+};
+
+/**
+ * component
+ */
+var SearchComponent = function SearchComponent () {
+  if (this.rendered) { return }
+
+  this.style();
+
+  var el = document.createElement('div');
+  var aside = document.querySelector('aside');
+
+  el.classList.add('search');
+  aside.insertBefore(el, aside.children[0]);
+  this.render(el);
+  this.rendered = true;
+  this.bindEvent();
+};
+
+SearchComponent.prototype.style = function style () {
+  var code = "\n      .sidebar {\n        padding-top: 0;\n      }\n\n      .search {\n        margin-bottom: 20px;\n        padding: 6px;\n        border-bottom: 1px solid #eee;\n      }\n\n      .search .results-panel {\n        display: none;\n      }\n\n      .search .results-panel.show {\n        display: block;\n      }\n\n      .search input {\n        outline: none;\n        border: none;\n        width: 100%;\n        padding: 7px;\n        line-height: 22px;\n        font-size: 14px;\n      }\n\n      .search h2 {\n        font-size: 17px;\n        margin: 10px 0;\n      }\n\n      .search a {\n        text-decoration: none;\n        color: inherit;\n      }\n\n      .search .matching-post {\n        border-bottom: 1px solid #eee;\n      }\n\n      .search .matching-post:last-child {\n        border-bottom: 0;\n      }\n\n      .search p {\n        font-size: 14px;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n      }\n\n      .search p.empty {\n        text-align: center;\n      }\n    ";
+  var style = document.createElement('style');
+
+  style.innerHTML = code;
+  document.head.appendChild(style);
+};
+
+SearchComponent.prototype.render = function render (dom) {
+  dom.innerHTML = "<input type=\"search\" placeholder=\"" + (CONFIG.placeholder) + "\" /><div class=\"results-panel\"></div>";
+};
+
+SearchComponent.prototype.bindEvent = function bindEvent () {
+    var this$1 = this;
+
+  var search = document.querySelector('.search');
+  var input = search.querySelector('.search input');
+  var panel = search.querySelector('.results-panel');
+
+  search.addEventListener('click', function (e) { return e.target.tagName !== 'A' && e.stopPropagation(); });
+  input.addEventListener('input', function (e) {
+    var target = e.target;
+
+    if (target.value.trim() !== '') {
+      var matchingPosts = this$1.search(target.value);
+      var html = '';
+
+      matchingPosts.forEach(function (post, index) {
+        html += "\n          <div class=\"matching-post\">\n            <h2><a href=\"" + (post.url) + "\">" + (post.title) + "</a></h2>\n            <p>" + (post.content) + "</p>\n          </div>\n          ";
+      });
+      if (panel.classList.contains('results-panel')) {
+        panel.classList.add('show');
+        panel.innerHTML = html || '<p class="empty">No Results!</p>';
+      }
+    } else {
+      if (panel.classList.contains('results-panel')) {
+        panel.classList.remove('show');
+        panel.innerHTML = '';
+      }
+    }
+  });
+};
+
+// From [weex website] https://weex-project.io/js/common.js
+SearchComponent.prototype.search = function search (keywords) {
+  var matchingResults = [];
+  var data = Object.keys(INDEXS).map(function (key) { return INDEXS[key]; });
+
+  keywords = keywords.trim().split(/[\s\-\，\\/]+/);
+
+  var loop = function ( i ) {
+    var post = data[i];
+    var isMatch = false;
+    var resultStr = '';
+    var postTitle = post.title && post.title.trim();
+    var postContent = post.body && post.body.trim();
+    var postUrl = post.slug || '';
+
+    if (postTitle !== '' && postContent !== '') {
+      keywords.forEach(function (keyword, i) {
+        var regEx = new RegExp(keyword, 'gi');
+        var indexTitle = -1;
+        var indexContent = -1;
+
+        indexTitle = postTitle.search(regEx);
+        indexContent = postContent.search(regEx);
+
+        if (indexTitle < 0 && indexContent < 0) {
+          isMatch = false;
+        } else {
+          isMatch = true;
+          if (indexContent < 0) { indexContent = 0; }
+
+          var start = 0;
+          var end = 0;
+
+          start = indexContent < 11 ? 0 : indexContent - 10;
+          end = start === 0 ? 70 : indexContent + keyword.length + 60;
+
+          if (end > postContent.length) { end = postContent.length; }
+
+          var matchContent = '...' +
+            postContent
+              .substring(start, end)
+              .replace(regEx, ("<em class=\"search-keyword\">" + keyword + "</em>")) +
+              '...';
+
+          resultStr += matchContent;
+        }
+      });
+
+      if (isMatch) {
+        var matchingPost = {
+          title: escapeHtml(postTitle),
+          content: resultStr,
+          url: postUrl
+        };
+
+        matchingResults.push(matchingPost);
+      }
+    }
+  };
+
+    for (var i = 0; i < data.length; i++) loop( i );
+
+  return matchingResults
+};
+
+var searchPlugin = function () {
+  var isAuto = CONFIG.paths === 'auto';
+  var isExpired = localStorage.getItem('docsify.search.expires') < Date.now();
+
+  INDEXS = JSON.parse(localStorage.getItem('docsify.search.index'));
+
+  if (isExpired) {
+    INDEXS = {};
+  } else if (!isAuto) {
+    return
+  }
+
+  var count = 0;
+  var paths = isAuto ? getAllPaths() : CONFIG.paths;
+  var len = paths.length;
+  var ref = window.Docsify.utils;
+  var load = ref.load;
+  var marked = ref.marked;
+  var slugify = ref.slugify;
+  var alias = window.$docsify.alias;
+  var done = function () {
+    localStorage.setItem('docsify.search.expires', Date.now() + CONFIG.maxAge);
+    localStorage.setItem('docsify.search.index', JSON.stringify(INDEXS));
+  };
+
+  paths.forEach(function (path) {
+    if (INDEXS[path]) { return count++ }
+    var route;
+
+    // replace route
+    if (alias && alias[path]) {
+      route = genFilePath(alias[path] || path, '');
+    } else {
+      route = genFilePath(path);
+    }
+
+    load(route).then(function (content) {
+      genIndex(path, marked(content));
+      slugify.clear();
+      count++;
+
+      if (len === count) { done(); }
+    });
+  });
+};
+
+var install = function () {
+  if (install.installed) { return }
+  install.installed = true;
+
+  var userConfig = window.$docsify.search;
+  var isNil = window.Docsify.utils.isNil;
+
+  if (Array.isArray(userConfig)) {
+    CONFIG.paths = userConfig;
+  } else if (isObj(userConfig)) {
+    CONFIG.paths = Array.isArray(userConfig.paths) ? userConfig.paths : 'auto';
+    CONFIG.maxAge = isNil(userConfig.maxAge) ? CONFIG.maxAge : userConfig.maxAge;
+    CONFIG.placeholder = userConfig.placeholder || CONFIG.placeholder;
+  }
+
+  window.$docsify.plugins = [].concat(function (hook) {
+    var isAuto = CONFIG.paths === 'auto';
+
+    hook.ready(function () {
+      new SearchComponent();
+      !isAuto && searchPlugin();
+    });
+    isAuto && hook.beforeEach(searchPlugin);
+  }, window.$docsify.plugins);
+};
+
+var search = install();
+
+return search;
+
+}());

package.json

@@ -1,6 +1,6 @@
 {
   "name": "docsify",
-  "version": "1.5.1",
+  "version": "2.3.0",
   "description": "A magical documentation generator.",
   "main": "lib/docsify.js",
   "files": [
@@ -10,7 +10,8 @@
   ],
   "scripts": {
     "build": "rm -rf lib themes && node build/build.js && mkdir lib/themes && mkdir themes && node build/build-css.js",
-    "dev": "node app.js & nodemon -w src -e js,css --exec 'npm run build'",
+    "dev:build": "rm -rf lib themes && mkdir themes && node build/build.js --dev && node build/build-css.js --dev",
+    "dev": "node app.js & nodemon -w src -e js,css --exec 'npm run dev:build'",
     "test": "eslint src test"
   },
   "repository": {
@@ -35,9 +36,9 @@
     "nodemon": "^1.11.0",
     "postcss": "^5.2.6",
     "postcss-salad": "^1.0.5",
-    "rollup": "^0.36.3",
-    "rollup-plugin-buble": "^0.14.0",
-    "rollup-plugin-commonjs": "^5.0.5",
+    "rollup": "^0.41.1",
+    "rollup-plugin-buble": "^0.15.0",
+    "rollup-plugin-commonjs": "^7.0.0",
     "rollup-plugin-node-resolve": "^2.0.0",
     "rollup-plugin-uglify": "^1.0.1",
     "serve-static": "^1.11.1"

src/event.js

@@ -7,14 +7,21 @@ import { isMobile } from './util'
 export function scrollActiveSidebar () {
   if (isMobile()) return
 
+  let hoveredOverSidebar = false
   const anchors = document.querySelectorAll('.anchor')
+  const sidebar = document.querySelector('.sidebar')
+  const sidebarContainer = sidebar.querySelector('.sidebar-nav')
+  const sidebarHeight = sidebar.clientHeight
+
   const nav = {}
-  const lis = document.querySelectorAll('.sidebar li')
-  let active = null
+  const lis = sidebar.querySelectorAll('li')
+  let active = sidebar.querySelector('li.active')
 
   for (let i = 0, len = lis.length; i < len; i += 1) {
     const li = lis[i]
-    let href = li.querySelector('a').getAttribute('href')
+    const a = li.querySelector('a')
+    if (!a) continue
+    let href = a.getAttribute('href')
 
     if (href !== '/') {
       const match = href.match('#([^#]+)$')
@@ -25,27 +32,52 @@ export function scrollActiveSidebar () {
   }
 
   function highlight () {
+    const top = document.body.scrollTop
+    let last
+
     for (let i = 0, len = anchors.length; i < len; i += 1) {
       const node = anchors[i]
-      const bcr = node.getBoundingClientRect()
 
-      if (bcr.top < 10 && bcr.bottom > 10) {
-        const li = nav[node.getAttribute('data-id')]
-
-        if (!li || li === active) return
-        if (active) active.setAttribute('class', '')
-
-        li.setAttribute('class', 'active')
-        active = li
-
-        return
+      if (node.offsetTop > top) {
+        if (!last) last = node
+        break
+      } else {
+        last = node
       }
     }
+    if (!last) return
+    const li = nav[last.getAttribute('data-id')]
+
+    if (!li || li === active) return
+    if (active) active.classList.remove('active')
+
+    li.classList.add('active')
+    active = li
+
+    // scroll into view
+    // https://github.com/vuejs/vuejs.org/blob/master/themes/vue/source/js/common.js#L282-L297
+    if (!hoveredOverSidebar && !sticky.noSticky) {
+      const currentPageOffset = 0
+      const currentActiveOffset = active.offsetTop + active.clientHeight + 40
+      const currentActiveIsInView = (
+        active.offsetTop >= sidebarContainer.scrollTop &&
+        currentActiveOffset <= sidebarContainer.scrollTop + sidebarHeight
+      )
+      const linkNotFurtherThanSidebarHeight = currentActiveOffset - currentPageOffset < sidebarHeight
+      const newScrollTop = currentActiveIsInView
+        ? sidebarContainer.scrollTop
+        : linkNotFurtherThanSidebarHeight
+          ? currentPageOffset
+          : currentActiveOffset - sidebarHeight
+
+      sidebar.scrollTop = newScrollTop
+    }
   }
 
   window.removeEventListener('scroll', highlight)
   window.addEventListener('scroll', highlight)
-  highlight()
+  sidebar.addEventListener('mouseover', () => { hoveredOverSidebar = true })
+  sidebar.addEventListener('mouseleave', () => { hoveredOverSidebar = false })
 }
 
 export function scrollIntoView () {
@@ -53,7 +85,9 @@ export function scrollIntoView () {
   if (!id || !id.length) return
   const section = document.querySelector(decodeURIComponent(id[0]))
 
-  if (section) section.scrollIntoView()
+  if (section) setTimeout(() => section.scrollIntoView(), 0)
+
+  return section
 }
 
 /**
@@ -71,13 +105,13 @@ export function activeLink (dom, activeParent) {
     .forEach(node => {
       if (host.indexOf(node.href) === 0 && !target) {
         activeParent
-          ? node.parentNode.setAttribute('class', 'active')
-          : node.setAttribute('class', 'active')
+          ? node.parentNode.classList.add('active')
+          : node.classList.add('active')
         target = node
       } else {
         activeParent
-          ? node.parentNode.removeAttribute('class')
-          : node.removeAttribute('class')
+          ? node.parentNode.classList.remove('active')
+          : node.classList.remove('active')
       }
     })
 
@@ -95,24 +129,31 @@ export function bindToggle (dom) {
   dom.addEventListener('click', () => body.classList.toggle('close'))
 
   if (isMobile()) {
-    document.querySelector('aside')
-      .addEventListener('click', _ => body.classList.toggle('close'))
+    const sidebar = document.querySelector('.sidebar')
+    sidebar.addEventListener('click', () => {
+      body.classList.toggle('close')
+      setTimeout(() => activeLink(sidebar, true), 0)
+    })
   }
 }
 
-export function scroll2Top () {
-  document.body.scrollTop = 0
+const scrollingElement = document.scrollingElement || document.documentElement
+
+export function scroll2Top (offset = 0) {
+  scrollingElement.scrollTop = offset === true ? 0 : Number(offset)
 }
 
 export function sticky () {
-  const dom = document.querySelector('section.cover')
-  const coverHeight = dom.getBoundingClientRect().height
+  sticky.dom = sticky.dom || document.querySelector('section.cover')
+  const coverHeight = sticky.dom.getBoundingClientRect().height
 
   return (function () {
-    if (window.pageYOffset >= coverHeight || dom.classList.contains('hidden')) {
+    if (window.pageYOffset >= coverHeight || sticky.dom.classList.contains('hidden')) {
       document.body.classList.add('sticky')
+      sticky.noSticky = false
     } else {
       document.body.classList.remove('sticky')
+      sticky.noSticky = true
     }
   })()
 }

src/hook.js

@@ -0,0 +1,52 @@
+export default class Hook {
+  constructor () {
+    this.beforeHooks = []
+    this.afterHooks = []
+    this.initHooks = []
+    this.readyHooks = []
+  }
+
+  beforeEach (fn) {
+    this.beforeHooks.push(fn)
+  }
+
+  afterEach (fn) {
+    this.afterHooks.push(fn)
+  }
+
+  init (fn) {
+    this.initHooks.push(fn)
+  }
+
+  ready (fn) {
+    this.readyHooks.push(fn)
+  }
+
+  emit (name, data, next) {
+    let newData = data
+    const queue = this[name + 'Hooks']
+    const step = function (index) {
+      const hook = queue[index]
+      if (index >= queue.length) {
+        next && next(newData)
+      } else {
+        if (typeof hook === 'function') {
+          if (hook.length === 2) {
+            hook(data, result => {
+              newData = result
+              step(index + 1)
+            })
+          } else {
+            const result = hook(data)
+            newData = result !== undefined ? result : newData
+            step(index + 1)
+          }
+        } else {
+          step(index + 1)
+        }
+      }
+    }
+
+    step(0)
+  }
+}

src/index.js

@@ -1,47 +1,69 @@
-import { load, camel2kebab, isNil, getRoute, merge } from './util'
+import * as utils from './util'
 import { scrollIntoView, activeLink } from './event'
 import * as render from './render'
+import Hook from './hook'
 
-const OPTIONS = merge({
+const OPTIONS = utils.merge({
   el: '#app',
   repo: '',
   maxLevel: 6,
   subMaxLevel: 0,
-  sidebar: '',
-  sidebarToggle: false,
   loadSidebar: null,
   loadNavbar: null,
-  router: false,
   homepage: 'README.md',
   coverpage: '',
   basePath: '',
-  auto2top: false
+  auto2top: false,
+  name: '',
+  themeColor: '',
+  nameLink: window.location.pathname,
+  ga: ''
 }, window.$docsify)
 const script = document.currentScript || [].slice.call(document.getElementsByTagName('script')).pop()
 
 // load configuration for script attribute
 if (script) {
   for (const prop in OPTIONS) {
-    const val = script.getAttribute('data-' + camel2kebab(prop))
-    OPTIONS[prop] = isNil(val) ? OPTIONS[prop] : (val || true)
+    const val = script.getAttribute('data-' + utils.camel2kebab(prop))
+    OPTIONS[prop] = utils.isNil(val) ? OPTIONS[prop] : (val || true)
   }
   if (OPTIONS.loadSidebar === true) OPTIONS.loadSidebar = '_sidebar.md'
   if (OPTIONS.loadNavbar === true) OPTIONS.loadNavbar = '_navbar.md'
   if (OPTIONS.coverpage === true) OPTIONS.coverpage = '_coverpage.md'
-  if (OPTIONS.sidebar) OPTIONS.sidebar = window[OPTIONS.sidebar]
+  if (OPTIONS.repo === true) OPTIONS.repo = ''
+  if (OPTIONS.name === true) OPTIONS.name = ''
+}
+
+const hook = new Hook()
+
+// utils
+window.$docsify = OPTIONS
+window.Docsify = {
+  installed: true,
+  utils: utils.merge({}, utils),
+  hook
 }
 
 // load options
-render.init(OPTIONS)
+render.init()
 
 let cacheRoute = null
 let cacheXhr = null
 
+const getAlias = function (route) {
+  if (OPTIONS.alias[route]) {
+    return getAlias(OPTIONS.alias[route])
+  } else {
+    return route
+  }
+}
+
 const mainRender = function (cb) {
-  const route = OPTIONS.basePath + getRoute()
+  let page
+  let route = utils.getRoute()
   if (cacheRoute === route) return cb()
 
-  let basePath = cacheRoute = route
+  let basePath = cacheRoute = OPTIONS.basePath + route
 
   if (!/\//.test(basePath)) {
     basePath = ''
@@ -49,9 +71,18 @@ const mainRender = function (cb) {
     basePath = basePath.match(/(\S*\/)[^\/]+$/)[1]
   }
 
-  let page
+  // replace route
+  route = '/' + route
+  if (OPTIONS.alias && OPTIONS.alias[route]) {
+    route = getAlias(route)
+  } else {
+    route = (OPTIONS.basePath + route).replace(/\/+/, '/')
+  }
+
   if (!route) {
     page = OPTIONS.homepage || 'README.md'
+  } else if (/\.md$/.test(route)) {
+    page = route
   } else if (/\/$/.test(route)) {
     page = `${route}README.md`
   } else {
@@ -60,23 +91,22 @@ const mainRender = function (cb) {
 
   // Render Cover page
   if (OPTIONS.coverpage && page === OPTIONS.homepage) {
-    load(OPTIONS.coverpage).then(render.renderCover)
+    utils.load(OPTIONS.coverpage).then(render.renderCover)
   }
 
   cacheXhr && cacheXhr.abort && cacheXhr.abort()
   // Render markdown file
-  cacheXhr = load(page, 'GET', render.renderLoading)
+  cacheXhr = utils.load(page, 'GET', render.renderLoading)
   cacheXhr.then(result => {
     render.renderArticle(result)
     // clear cover
     if (OPTIONS.coverpage && page !== OPTIONS.homepage) render.renderCover()
     // render sidebar
     if (OPTIONS.loadSidebar) {
-      load(basePath + OPTIONS.loadSidebar)
-        .then(result => {
-          render.renderSidebar(result)
-          cb()
-        })
+      const renderSidebar = result => { render.renderSidebar(result); cb() }
+
+      utils.load(basePath + OPTIONS.loadSidebar).then(renderSidebar,
+        _ => utils.load(OPTIONS.loadSidebar).then(renderSidebar))
     } else {
       cb()
     }
@@ -84,27 +114,32 @@ const mainRender = function (cb) {
 
   // Render navbar
   if (OPTIONS.loadNavbar) {
-    load(basePath + OPTIONS.loadNavbar).then(render.renderNavbar)
+    utils.load(basePath + OPTIONS.loadNavbar).then(render.renderNavbar,
+      _ => utils.load(OPTIONS.loadNavbar).then(render.renderNavbar))
   }
 }
 
 const Docsify = function () {
-  const dom = document.querySelector(OPTIONS.el) || document.body
-  const replace = dom !== document.body
-  const main = function () {
-    mainRender(_ => {
-      scrollIntoView()
-      activeLink('nav')
-    })
-  }
+  setTimeout(_ => {
+    ;[].concat(OPTIONS.plugins).forEach(fn => typeof fn === 'function' && fn(hook))
+    window.Docsify.hook.emit('init')
 
-  // Render app
-  render.renderApp(dom, replace)
-  main()
-  if (OPTIONS.router) {
+    const dom = document.querySelector(OPTIONS.el) || document.body
+    const replace = dom !== document.body
+    const main = function () {
+      mainRender(_ => {
+        scrollIntoView()
+        activeLink('nav')
+      })
+    }
+
+    // Render app
+    render.renderApp(dom, replace)
+    main()
     if (!/^#\//.test(window.location.hash)) window.location.hash = '#/'
     window.addEventListener('hashchange', main)
-  }
+    window.Docsify.hook.emit('ready')
+  }, 0)
 }
 
 export default Docsify()

src/plugins/ga.js

@@ -0,0 +1,42 @@
+// From https://github.com/egoist/vue-ga/blob/master/src/index.js
+
+function appendScript () {
+  const script = document.createElement('script')
+  script.async = true
+  script.src = 'https://www.google-analytics.com/analytics.js'
+  document.body.appendChild(script)
+}
+
+function init (id) {
+  if (!window.ga) {
+    appendScript()
+    window.ga = window.ga || function () {
+      (window.ga.q = window.ga.q || []).push(arguments)
+    }
+    window.ga.l = Number(new Date())
+    window.ga('create', id, 'auto')
+  }
+}
+
+function collect () {
+  init(window.$docsify.ga)
+  window.ga('set', 'page', location.href)
+  window.ga('send', 'pageview')
+}
+
+const install = function () {
+  if (install.installed) return
+  install.installed = true
+
+  if (!window.$docsify.ga) {
+    console.error('[Docsify] ga is required.')
+    return
+  }
+
+  window.$docsify.plugins = [].concat(function (hook) {
+    hook.init(collect)
+    hook.beforeEach(collect)
+  }, window.$docsify.plugins)
+}
+
+export default install()

src/plugins/search.js

@@ -0,0 +1,349 @@
+let INDEXS = {}
+const CONFIG = {
+  placeholder: 'Type to search',
+  paths: 'auto',
+  maxAge: 86400000 // 1 day
+}
+
+const isObj = function (obj) {
+  return Object.prototype.toString.call(obj) === '[object Object]'
+}
+
+const escapeHtml = function (string) {
+  const entityMap = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;',
+    '/': '&#x2F;'
+  }
+
+  return String(string).replace(/[&<>"'\/]/g, s => entityMap[s])
+}
+
+/**
+ * find all filepath from A tag
+ */
+const getAllPaths = function () {
+  const paths = []
+
+  ;[].slice.call(document.querySelectorAll('a'))
+    .map(node => {
+      const href = node.href
+      if (/#\/[^#]*?$/.test(href)) {
+        const path = href.replace(/^[^#]+#/, '')
+
+        if (paths.indexOf(path) <= 0) paths.push(path)
+      }
+    })
+
+  return paths
+}
+
+/**
+ * return file path
+ */
+const genFilePath = function (path, basePath = window.$docsify.basePath) {
+  let filePath = /\/$/.test(path) ? `${path}README.md` : `${path}.md`
+
+  filePath = basePath + filePath
+
+  return filePath.replace(/\/+/g, '/')
+}
+
+/**
+ * generate index
+ */
+const genIndex = function (path, content = '') {
+  INDEXS[path] = { slug: '', title: '', body: '' }
+  let slug
+
+  content
+    // remove PRE and TEMPLATE tag
+    .replace(/<template[^>]*?>[\s\S]+?<\/template>/g, '')
+    // find all html tag
+    .replace(/<(\w+)([^>]*?)>([\s\S]+?)<\//g, (match, tag, attr, html) => {
+      // remove all html tag
+      const text = html.replace(/<[^>]+>/g, '')
+
+      // tag is headline
+      if (/^h\d$/.test(tag)) {
+        // <h1 id="xxx"></h1>
+        const id = attr.match(/id="(\S+)"/)[1]
+
+        slug = `#/${path}#${id}`.replace(/\/+/, '/')
+        INDEXS[slug] = { slug, title: text, body: '' }
+      } else {
+        if (!slug) return
+        // other html tag
+        if (!INDEXS[slug]) {
+          INDEXS[slug] = {}
+        } else {
+          if (INDEXS[slug].body && INDEXS[slug].body.length) {
+            INDEXS[slug].body += '\n' + text
+          } else {
+            INDEXS[slug].body = text
+          }
+        }
+      }
+    })
+}
+
+/**
+ * component
+ */
+class SearchComponent {
+  constructor () {
+    if (this.rendered) return
+
+    this.style()
+
+    const el = document.createElement('div')
+    const aside = document.querySelector('aside')
+
+    el.classList.add('search')
+    aside.insertBefore(el, aside.children[0])
+    this.render(el)
+    this.rendered = true
+    this.bindEvent()
+  }
+
+  style () {
+    const code = `
+      .sidebar {
+        padding-top: 0;
+      }
+
+      .search {
+        margin-bottom: 20px;
+        padding: 6px;
+        border-bottom: 1px solid #eee;
+      }
+
+      .search .results-panel {
+        display: none;
+      }
+
+      .search .results-panel.show {
+        display: block;
+      }
+
+      .search input {
+        outline: none;
+        border: none;
+        width: 100%;
+        padding: 7px;
+        line-height: 22px;
+        font-size: 14px;
+      }
+
+      .search h2 {
+        font-size: 17px;
+        margin: 10px 0;
+      }
+
+      .search a {
+        text-decoration: none;
+        color: inherit;
+      }
+
+      .search .matching-post {
+        border-bottom: 1px solid #eee;
+      }
+
+      .search .matching-post:last-child {
+        border-bottom: 0;
+      }
+
+      .search p {
+        font-size: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+
+      .search p.empty {
+        text-align: center;
+      }
+    `
+    const style = document.createElement('style')
+
+    style.innerHTML = code
+    document.head.appendChild(style)
+  }
+
+  render (dom) {
+    dom.innerHTML = `<input type="search" placeholder="${CONFIG.placeholder}" /><div class="results-panel"></div>`
+  }
+
+  bindEvent () {
+    const search = document.querySelector('.search')
+    const input = search.querySelector('.search input')
+    const panel = search.querySelector('.results-panel')
+
+    search.addEventListener('click', e => e.target.tagName !== 'A' && e.stopPropagation())
+    input.addEventListener('input', e => {
+      const target = e.target
+
+      if (target.value.trim() !== '') {
+        const matchingPosts = this.search(target.value)
+        let html = ''
+
+        matchingPosts.forEach(function (post, index) {
+          html += `
+          <div class="matching-post">
+            <h2><a href="${post.url}">${post.title}</a></h2>
+            <p>${post.content}</p>
+          </div>
+          `
+        })
+        if (panel.classList.contains('results-panel')) {
+          panel.classList.add('show')
+          panel.innerHTML = html || '<p class="empty">No Results!</p>'
+        }
+      } else {
+        if (panel.classList.contains('results-panel')) {
+          panel.classList.remove('show')
+          panel.innerHTML = ''
+        }
+      }
+    })
+  }
+
+  // From [weex website] https://weex-project.io/js/common.js
+  search (keywords) {
+    const matchingResults = []
+    const data = Object.keys(INDEXS).map(key => INDEXS[key])
+
+    keywords = keywords.trim().split(/[\s\-\，\\/]+/)
+
+    for (let i = 0; i < data.length; i++) {
+      const post = data[i]
+      let isMatch = false
+      let resultStr = ''
+      const postTitle = post.title && post.title.trim()
+      const postContent = post.body && post.body.trim()
+      const postUrl = post.slug || ''
+
+      if (postTitle !== '' && postContent !== '') {
+        keywords.forEach((keyword, i) => {
+          const regEx = new RegExp(keyword, 'gi')
+          let indexTitle = -1
+          let indexContent = -1
+
+          indexTitle = postTitle.search(regEx)
+          indexContent = postContent.search(regEx)
+
+          if (indexTitle < 0 && indexContent < 0) {
+            isMatch = false
+          } else {
+            isMatch = true
+            if (indexContent < 0) indexContent = 0
+
+            let start = 0
+            let end = 0
+
+            start = indexContent < 11 ? 0 : indexContent - 10
+            end = start === 0 ? 70 : indexContent + keyword.length + 60
+
+            if (end > postContent.length) end = postContent.length
+
+            const matchContent = '...' +
+              postContent
+                .substring(start, end)
+                .replace(regEx, `<em class="search-keyword">${keyword}</em>`) +
+                '...'
+
+            resultStr += matchContent
+          }
+        })
+
+        if (isMatch) {
+          const matchingPost = {
+            title: escapeHtml(postTitle),
+            content: resultStr,
+            url: postUrl
+          }
+
+          matchingResults.push(matchingPost)
+        }
+      }
+    }
+
+    return matchingResults
+  }
+}
+
+const searchPlugin = function () {
+  const isAuto = CONFIG.paths === 'auto'
+  const isExpired = localStorage.getItem('docsify.search.expires') < Date.now()
+
+  INDEXS = JSON.parse(localStorage.getItem('docsify.search.index'))
+
+  if (isExpired) {
+    INDEXS = {}
+  } else if (!isAuto) {
+    return
+  }
+
+  let count = 0
+  const paths = isAuto ? getAllPaths() : CONFIG.paths
+  const len = paths.length
+  const { load, marked, slugify } = window.Docsify.utils
+  const alias = window.$docsify.alias
+  const done = () => {
+    localStorage.setItem('docsify.search.expires', Date.now() + CONFIG.maxAge)
+    localStorage.setItem('docsify.search.index', JSON.stringify(INDEXS))
+  }
+
+  paths.forEach(path => {
+    if (INDEXS[path]) return count++
+    let route
+
+    // replace route
+    if (alias && alias[path]) {
+      route = genFilePath(alias[path] || path, '')
+    } else {
+      route = genFilePath(path)
+    }
+
+    load(route).then(content => {
+      genIndex(path, marked(content))
+      slugify.clear()
+      count++
+
+      if (len === count) done()
+    })
+  })
+}
+
+const install = function () {
+  if (install.installed) return
+  install.installed = true
+
+  const userConfig = window.$docsify.search
+  const isNil = window.Docsify.utils.isNil
+
+  if (Array.isArray(userConfig)) {
+    CONFIG.paths = userConfig
+  } else if (isObj(userConfig)) {
+    CONFIG.paths = Array.isArray(userConfig.paths) ? userConfig.paths : 'auto'
+    CONFIG.maxAge = isNil(userConfig.maxAge) ? CONFIG.maxAge : userConfig.maxAge
+    CONFIG.placeholder = userConfig.placeholder || CONFIG.placeholder
+  }
+
+  window.$docsify.plugins = [].concat(hook => {
+    const isAuto = CONFIG.paths === 'auto'
+
+    hook.ready(() => {
+      new SearchComponent()
+      !isAuto && searchPlugin()
+    })
+    isAuto && hook.beforeEach(searchPlugin)
+  }, window.$docsify.plugins)
+}
+
+export default install()

src/polyfill.js

@@ -0,0 +1,30 @@
+import { load } from './util'
+
+function replaceVar (block) {
+  block.innerHTML = block.innerHTML.replace(/var\(\s*--theme-color.*?\)/g, $docsify.themeColor)
+}
+
+export function cssVars () {
+  // variable support
+  if (window.CSS && window.CSS.supports && window.CSS.supports('(--foo: red)')) return
+
+  const styleBlocks = document.querySelectorAll('style:not(.inserted),link')
+
+  ;[].forEach.call(styleBlocks, block => {
+    if (block.nodeName === 'STYLE') {
+      replaceVar(block)
+    } else if (block.nodeName === 'LINK') {
+      const href = block.getAttribute('href')
+
+      if (!/\.css$/.test(href)) return
+
+      load(href).then(res => {
+        const style = document.createElement('style')
+
+        style.innerHTML = res
+        document.head.appendChild(style)
+        replaceVar(style)
+      })
+    }
+  })
+}

src/render.js

@@ -1,13 +1,14 @@
 import marked from 'marked'
 import Prism from 'prismjs'
 import * as tpl from './tpl'
-import { activeLink, scrollActiveSidebar, bindToggle, scroll2Top, sticky } from './event'
-import { genTree, getRoute, isMobile, slugify, merge } from './util'
+import * as event from './event'
+import * as polyfill from './polyfill'
+import { genTree, getRoute, isMobile, slugify, merge, emojify } from './util'
 
-let OPTIONS = {}
 let markdown = marked
 let toc = []
 const CACHE = {}
+const originTitle = document.title
 
 const renderTo = function (dom, content) {
   dom = typeof dom === 'object' ? dom : document.querySelector(dom)
@@ -19,11 +20,8 @@ const renderTo = function (dom, content) {
 
 /**
  * init render
- * @param  {Object} options
  */
-export function init (options) {
-  OPTIONS = options
-
+export function init () {
   const renderer = new marked.Renderer()
   /**
    * render anchor tag
@@ -33,10 +31,7 @@ export function init (options) {
     const slug = slugify(text)
     let route = ''
 
-    if (OPTIONS.router) {
-      route = `#/${getRoute()}`
-    }
-
+    route = `#/${getRoute()}`
     toc.push({ level, slug: `${route}#${encodeURIComponent(slug)}`, title: text })
 
     return `<h${level} id="${slug}"><a href="${route}#${slug}" data-id="${slug}" class="anchor"><span>${text}</span></a></h${level}>`
@@ -44,23 +39,47 @@ export function init (options) {
   // highlight code
   renderer.code = function (code, lang = '') {
     const hl = Prism.highlight(code, Prism.languages[lang] || Prism.languages.markup)
-      .replace(/{{/g, '<span>{{</span>')
 
-    return `<pre data-lang="${lang}"><code class="lang-${lang}">${hl}</code></pre>`
+    return `<pre v-pre data-lang="${lang}"><code class="lang-${lang}">${hl}</code></pre>`
   }
   renderer.link = function (href, title, text) {
-    if (OPTIONS.router && !/:/.test(href)) {
-      href = `#/${href}`.replace(/\/\//g, '/')
+    if (!/:|(\/{2})/.test(href)) {
+      href = `#/${href}`.replace(/\/+/g, '/')
     }
-
     return `<a href="${href}" title="${title || ''}">${text}</a>`
   }
+  renderer.paragraph = function (text) {
+    if (/^!&gt;/.test(text)) {
+      return tpl.helper('tip', text)
+    } else if (/^\?&gt;/.test(text)) {
+      return tpl.helper('warn', text)
+    }
+    return `<p>${text}</p>`
+  }
+  renderer.image = function (href, title, text) {
+    const url = /:|(\/{2})/.test(href) ? href : ($docsify.basePath + href).replace(/\/+/g, '/')
+    const titleHTML = title ? ` title="${title}"` : ''
 
-  if (typeof OPTIONS.markdown === 'function') {
-    markdown.setOptions({ renderer })
-    markdown = OPTIONS.markdown.call(this, markdown)
+    return `<img src="${url}" alt="${text}"${titleHTML} />`
+  }
+
+  if (typeof $docsify.markdown === 'function') {
+    markdown = $docsify.markdown.call(this, markdown, renderer)
   } else {
-    markdown.setOptions(merge({ renderer }, OPTIONS.markdown))
+    if ($docsify.markdown && $docsify.markdown.renderer) {
+      $docsify.markdown.renderer = merge(renderer, $docsify.markdown.renderer)
+    }
+    markdown.setOptions(merge({ renderer }, $docsify.markdown))
+  }
+
+  const md = markdown
+
+  markdown = text => emojify(md(text))
+
+  window.Docsify.utils.marked = text => {
+    const result = markdown(text)
+    toc = []
+    return result
   }
 }
 
@@ -69,21 +88,35 @@ export function init (options) {
  */
 export function renderApp (dom, replace) {
   const nav = document.querySelector('nav') || document.createElement('nav')
+  const body = document.body
+  const head = document.head
 
-  if (!OPTIONS.repo) nav.classList.add('no-badge')
+  if (!$docsify.repo) nav.classList.add('no-badge')
 
-  dom[replace ? 'outerHTML' : 'innerHTML'] = tpl.corner(OPTIONS.repo) +
-    (OPTIONS.coverpage ? tpl.cover() : '') +
-    tpl.main(OPTIONS.sidebarToggle ? tpl.toggle() : '')
-  document.body.insertBefore(nav, document.body.children[0])
+  dom[replace ? 'outerHTML' : 'innerHTML'] = tpl.corner($docsify.repo) +
+    ($docsify.coverpage ? tpl.cover() : '') +
+    tpl.main()
+  body.insertBefore(nav, body.children[0])
+
+  // theme color
+  if ($docsify.themeColor) {
+    head.innerHTML += tpl.theme($docsify.themeColor)
+    polyfill.cssVars()
+  }
+
+  // render name
+  if ($docsify.name) {
+    const aside = document.querySelector('.sidebar')
+    aside.innerHTML = `<h1><a href="${$docsify.nameLink}">${$docsify.name}</a></h1>` + aside.innerHTML
+  }
 
   // bind toggle
-  bindToggle('button.sidebar-toggle')
+  event.bindToggle('button.sidebar-toggle')
   // bind sticky effect
-  if (OPTIONS.coverpage) {
-    !isMobile() && window.addEventListener('scroll', sticky)
+  if ($docsify.coverpage) {
+    !isMobile() && window.addEventListener('scroll', event.sticky)
   } else {
-    document.body.classList.add('sticky')
+    body.classList.add('sticky')
   }
 }
 
@@ -91,14 +124,34 @@ export function renderApp (dom, replace) {
  * article
  */
 export function renderArticle (content) {
-  renderTo('article', content ? markdown(content) : 'not found')
-  if (!OPTIONS.sidebar && !OPTIONS.loadSidebar) renderSidebar()
+  const hook = window.Docsify.hook
+  const renderFn = function (data) {
+    renderTo('article', data)
+    if (!$docsify.loadSidebar) renderSidebar()
 
-  if (content && typeof Vue !== 'undefined' && typeof Vuep !== 'undefined') {
-    const vm = new Vue({ el: 'main' }) // eslint-disable-line
-    vm.$nextTick(_ => scrollActiveSidebar())
+    if (data && typeof Vue !== 'undefined') {
+      CACHE.vm && CACHE.vm.$destroy()
+
+      const script = [].slice.call(
+        document.body.querySelectorAll('article>script'))
+          .filter(script => !/template/.test(script.type)
+        )[0]
+      const code = script ? script.innerText.trim() : null
+
+      script && script.remove()
+      CACHE.vm = code
+        ? new Function(`return ${code}`)()
+        : new Vue({ el: 'main' }) // eslint-disable-line
+      CACHE.vm && CACHE.vm.$nextTick(_ => event.scrollActiveSidebar())
+    }
+    if ($docsify.auto2top) setTimeout(() => event.scroll2Top($docsify.auto2top), 0)
   }
-  if (OPTIONS.auto2top) scroll2Top()
+
+  hook.emit('before', content, result => {
+    const html = result ? markdown(result) : ''
+
+    hook.emit('after', html, result => renderFn(result || 'not found'))
+  })
 }
 
 /**
@@ -109,7 +162,7 @@ export function renderNavbar (content) {
   CACHE.navbar = content
 
   if (content) renderTo('nav', markdown(content))
-  activeLink('nav')
+  event.activeLink('nav')
 }
 
 /**
@@ -120,23 +173,29 @@ export function renderSidebar (content) {
 
   if (content) {
     html = markdown(content)
-  } else if (OPTIONS.sidebar) {
-    html = tpl.tree(OPTIONS.sidebar, '<ul>')
+    // find url tag
+    html = html.match(/<ul[^>]*>([\s\S]+)<\/ul>/g)[0]
   } else {
-    html = tpl.tree(genTree(toc, OPTIONS.maxLevel), '<ul>')
+    html = tpl.tree(genTree(toc, $docsify.maxLevel), '<ul>')
   }
 
-  renderTo('aside.sidebar', html)
-  const target = activeLink('aside.sidebar', true)
-  if (content) renderSubSidebar(target)
-  toc = []
+  renderTo('.sidebar-nav', html)
 
-  scrollActiveSidebar()
+  if (toc[0] && toc[0].level === 1) {
+    document.title = `${toc[0].title}${originTitle ? ' - ' + originTitle : ''}`
+  }
+
+  const target = event.activeLink('.sidebar-nav', true)
+  if (target) renderSubSidebar(target)
+
+  toc = []
+  event.scrollActiveSidebar()
 }
 
 export function renderSubSidebar (target) {
-  if (!OPTIONS.subMaxLevel) return
-  target.parentNode.innerHTML += tpl.tree(genTree(toc, OPTIONS.subMaxLevel), '<ul>')
+  if (!$docsify.subMaxLevel) return
+  toc[0] && toc[0].level === 1 && toc.shift()
+  target.parentNode.innerHTML += tpl.tree(genTree(toc, $docsify.subMaxLevel), '<ul>')
 }
 
 /**
@@ -149,18 +208,21 @@ export function renderCover (content) {
     return
   }
   renderCover.dom.classList.add('show')
-  if (renderCover.rendered) return
+  if (renderCover.rendered) return event.sticky()
 
   // render cover
+  const cacheToc = toc.slice()
   let html = markdown(content)
-  const match = html.trim().match('<p><img[^s]+src="(.*?)"[^a]+alt="(.*?)"></p>$')
+  const match = html.trim().match('<p><img[^s]+src="(.*?)"[^a]+alt="(.*?)">([^<]*?)</p>$')
+
+  toc = cacheToc.slice()
 
   // render background
   if (match) {
     const coverEl = document.querySelector('section.cover')
 
     if (match[2] === 'color') {
-      coverEl.style.background = match[1]
+      coverEl.style.background = match[1] + (match[3] || '')
     } else {
       coverEl.classList.add('has-mask')
       coverEl.style.backgroundImage = `url(${match[1]})`
@@ -171,7 +233,7 @@ export function renderCover (content) {
   renderTo('.cover-main', html)
   renderCover.rendered = true
 
-  sticky()
+  event.sticky()
 }
 
 /**

src/themes/basic/_coverpage.css

@@ -72,9 +72,11 @@ section.cover {
 
   .cover-main p:last-child a {
     border-radius: 2em;
-    border: 1px solid $color-primary;
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--theme-color, $color-primary);
     box-sizing: border-box;
-    color: $color-primary;
+    color: var(--theme-color, $color-primary);
     font-size: 1.05em;
     letter-spacing: 0.1em;
     padding: 0.75em 2em;
@@ -85,7 +87,7 @@ section.cover {
 
     &:last-child {
       margin-right: 0;
-      background-color: $color-primary;
+      background-color: var(--theme-color, $color-primary);
       color: #fff;
 
       &:hover {

src/themes/basic/_layout.css

@@ -7,8 +7,13 @@
   -webkit-font-smoothing: antialiased;
 }
 
+.emoji {
+  height: 1.2em;
+  vertical-align: middle;
+}
+
 .progress {
-  background-color: $color-primary;
+  background-color: var(--theme-color, $color-primary);
   height: 2px;
   left: 0px;
   position: fixed;
@@ -19,6 +24,15 @@
   z-index: 999999;
 }
 
+.search a:hover {
+  color: var(--theme-color, $color-primary);
+}
+
+.search .search-keyword {
+  color: var(--theme-color, $color-primary);
+  font-style: normal;
+}
+
 html, body {
   height: 100%;
 }
@@ -66,6 +80,11 @@ nav {
     margin: 0;
   }
 
+  >a {
+    margin: 0 1em;
+    padding: 5px 0;
+  }
+
   ul, li {
     list-style: none;
     display: inline-block;
@@ -73,20 +92,18 @@ nav {
   }
 
   a {
-    margin: 0 1em;
-    padding: 5px 0;
     font-size: 16px;
     text-decoration: none;
     color: inherit;
     transition: color .3s;
 
     &:hover {
-      color: $color-primary;
+      color: var(--theme-color, $color-primary);
     }
 
     &.active {
-      color: $color-primary;
-      border-bottom: 2px solid $color-primary;
+      color: var(--theme-color, $color-primary);
+      border-bottom: 2px solid var(--theme-color, $color-primary);
     }
   }
 
@@ -94,31 +111,37 @@ nav {
   li {
     position: relative;
     display: inline-block;
+    margin: 0 1em;
+    padding: 5px 0;
 
     ul {
-      background-color: rgba($color-bg, .6);
-      border: 1px solid $color-primary;
-      opacity: 0;
-      overflow: hidden;
-      padding: 0;
+      display: none;
+      box-sizing: border-box;
+      max-height: calc(100vh - 61px);
+      overflow-y: scroll;
       position: absolute;
-      right: 1em;
-      top: 26px;
-      transform-origin: 100% 0%;
-      transform: scale(1, 0);
-      transition: opacity .4s ease-out, transform .2s ease;
-      transition-delay: .3s;
+      top: 100%;
+      right: -15px;
+      background-color: #fff;
+      padding: 10px 0;
+      border: 1px solid #ddd;
+      border-bottom-color: #ccc;
+      text-align: left;
+      border-radius: 4px;
+      white-space: nowrap;
 
       li {
         display: block;
         font-size: 14px;
         margin: 0;
-        padding: 4px 10px;
+        margin: 8px 14px;
         white-space: nowrap;
+        line-height: 1em;
       }
 
       a {
         display: block;
+        font-size: inherit;
         margin: 0;
         padding: 0;
 
@@ -129,10 +152,7 @@ nav {
     }
 
     &:hover ul {
-      opacity: 1;
-      transform: scale(1, 1);
-      transition: opacity .4s ease, transform .2s ease-out;
-      transition-delay: 0;
+      display: block;
     }
   }
 }
@@ -154,12 +174,13 @@ nav {
     color: $color-bg;
     height: 80px;
     width: 80px;
-    fill: $color-primary;
+    fill: var(--theme-color, $color-primary);
   }
 }
 
 /* main */
 main {
+  display: block;
   size: 100vw 100%;
   position: relative;
 }
@@ -180,19 +201,36 @@ main {
 
 /* sidebar */
 .sidebar {
-  border-right: 1px solid rgba(0, 0, 0, .07);
   overflow-y: auto;
   padding: 40px 0;
   position: absolute 0 * 0 0;
   transition: transform 250ms ease-out;
   width: $sidebar-width;
   z-index: 20;
+  border-right: 1px solid rgba(0, 0, 0, .07);
+
+  > h1 {
+    text-align: center;
+    margin: 0 auto 1em;
+    font-size: 1.5em;
+    font-weight: 300;
+
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
+  }
 
   ul {
     margin: 0;
     padding: 0;
   }
 
+  li>p {
+    font-weight: 700;
+    margin: 0;
+  }
+
   ul, ul li {
     list-style: none;
   }
@@ -205,6 +243,23 @@ main {
   ul li ul {
     padding-left: 20px;
   }
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: transparent;
+    border-radius: 4px;
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    background: rgba(136, 136, 136, 0.4);
+  }
+
+  &:hover::-webkit-scrollbar-track {
+    background: rgba(136, 136, 136, 0.1);
+  }
 }
 
 /* sidebar toggle */
@@ -227,7 +282,7 @@ main {
   }
 
   span {
-    background-color: $color-primary;
+    background-color: var(--theme-color, $color-primary);
     display: block;
     size: 16px 2px;
     margin-bottom: 4px;
@@ -264,6 +319,12 @@ body.sticky {
   }
 }
 
+.markdown-section hr {
+  border: none;
+  margin: 2em 0;
+  border-bottom: 1px solid #eee;
+}
+
 .markdown-section table {
   display: block;
   width: 100%;
@@ -291,6 +352,46 @@ body.sticky {
   }
 }
 
+.markdown-section p.tip {
+  padding: 12px 24px 12px 30px;
+  margin: 2em 0;
+  border-left: 4px solid #f66;
+  background-color: #f8f8f8;
+  position: relative;
+  border-bottom-right-radius: 2px;
+  border-top-right-radius: 2px;
+
+  &:before {
+    position: absolute;
+    top: 14px;
+    left: -12px;
+    background-color: #f66;
+    color: $color-bg;
+    content: "!";
+    size: 20px;
+    border-radius: 100%;
+    text-align: center;
+    line-height: 20px;
+    font-weight: bold;
+    font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
+    font-size: 14px;
+  }
+
+  code {
+    background-color: #efefef;
+  }
+
+  em {
+    color: $color-text;
+  }
+}
+
+.markdown-section p.warn {
+  padding: 1em;
+  background: rgba($color-primary, 0.1);
+  border-radius: 2px;
+}
+
 body.close {
   .sidebar {
     transform: translateX(-$sidebar-width);

src/themes/buble.css

@@ -28,7 +28,7 @@ $sidebar-width: 16em;
     padding: 0;
   }
 
-  .active {
+  li.active {
     background-color: #eee;
 
     a {
@@ -47,7 +47,7 @@ $sidebar-width: 16em;
 }
 
 .markdown-section a {
-  color: $color-primary;
+  color: var(--theme-color, $color-primary);
   font-weight: 400;
 }
 
@@ -110,7 +110,7 @@ $sidebar-width: 16em;
 
 .markdown-section blockquote {
   color: #858585;
-  border-left: 4px solid $color-primary;
+  border-left: 4px solid var(--theme-color, $color-primary);
   margin: 2em 0;
   padding-left: 20px;
 }
@@ -238,15 +238,3 @@ code .token {
   -webkit-font-smoothing: initial;
   -moz-osx-font-smoothing: initial;
 }
-
-.content span.light {
-  color: #7f8c8d;
-}
-
-.content span.info {
-  display: inline-block;
-  font-size: 0.85em;
-  margin-left: 20px;
-  vertical-align: middle;
-  width: 280px;
-}

src/themes/dark.css

@@ -0,0 +1,299 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600');
+
+$color-primary: #ea6f5a;
+$color-bg: #3f3f3f;
+$color-text: #c8c8c8;
+$sidebar-width: 300px;
+
+@import "basic/layout";
+@import "basic/coverpage";
+
+body {
+  background-color: $color-bg;
+}
+
+/* sidebar */
+.sidebar {
+  color: #c8c8c8;
+  background-color: $color-bg;
+
+  li {
+    margin: 6px 15px;
+  }
+
+  ul li a {
+    color: #c8c8c8;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    text-decoration: none;
+    font-size: 14px;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  ul li ul {
+    padding: 0;
+  }
+
+  ul li.active>a {
+    color: var(--theme-color, $color-primary);
+    font-weight: 600;
+  }
+}
+
+/* markdown content found on pages */
+.markdown-section h1,
+.markdown-section h2,
+.markdown-section h3,
+.markdown-section h4,
+.markdown-section strong {
+  font-weight: 600;
+  color: #2c3e50;
+}
+
+.markdown-section a {
+  color: var(--theme-color, $color-primary);
+  font-weight: 600;
+}
+
+.markdown-section h1 {
+  margin: 0 0 1em;
+  font-size: 2em;
+}
+
+.markdown-section h2 {
+  font-size: 1.75em;
+  margin: 45px 0 0.8em;
+}
+
+.markdown-section h3 {
+  margin: 40px 0 .6em;
+  font-size: 1.5em;
+}
+
+.markdown-section h4 {
+  font-size: 1.25em;
+}
+
+.markdown-section h5 {
+  font-size: 1em;
+}
+
+.markdown-section h6 {
+  font-size: 1em;
+  color: #777;
+}
+
+.markdown-section figure,
+.markdown-section p,
+.markdown-section ul,
+.markdown-section ol {
+  margin: 1.2em 0;
+}
+
+.markdown-section p,
+.markdown-section ul,
+.markdown-section ol {
+  line-height: 1.6em;
+  word-spacing: 0.05em;
+}
+
+.markdown-section ul,
+.markdown-section ol {
+  padding-left: 1.5em;
+}
+
+.markdown-section blockquote {
+  color: #858585;
+  border-left: 4px solid var(--theme-color, $color-primary);
+  margin: 2em 0;
+  padding-left: 20px;
+}
+
+.markdown-section blockquote p {
+  font-weight: 600;
+  margin-left: 0;
+}
+
+.markdown-section iframe {
+  margin: 1em 0;
+}
+
+.markdown-section em {
+  color: #7f8c8d;
+}
+
+.markdown-section code {
+  border-radius: 2px;
+  color: #657b83;
+  margin: 0 2px;
+  padding: 3px 5px;
+  white-space: nowrap;
+  font-size: 0.8em;
+  font-family: 'Roboto Mono', Monaco, courier, monospace;
+  background-color: #282828;
+}
+
+.markdown-section pre {
+  -moz-osx-font-smoothing: initial;
+  -webkit-font-smoothing: initial;
+  background-color: #282828;
+  font-family: 'Roboto Mono', Monaco, courier, monospace;
+  line-height: 1.5em;
+  margin: 1.2em 0;
+  padding: 0 1.4em;
+  position: relative;
+  overflow: auto;
+  word-wrap: normal;
+}
+
+/* code highlight */
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #8e908c;
+}
+
+.token.namespace {
+  opacity: .7;
+}
+
+.token.boolean,
+.token.number {
+  color: #c76b29;
+}
+
+.token.punctuation {
+  color: #525252;
+}
+
+.token.property {
+  color: #c08b30;
+}
+
+.token.tag {
+  color: #2973b7;
+}
+
+.token.string {
+  color: var(--theme-color, $color-primary);
+}
+
+.token.selector {
+  color: #6679cc;
+}
+
+.token.attr-name {
+  color: #2973b7;
+}
+
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #22a2c9;
+}
+
+.token.attr-value,
+.token.control,
+.token.directive,
+.token.unit {
+  color: var(--theme-color, $color-primary);
+}
+
+.token.keyword {
+  color: #e96900;
+}
+
+.token.statement,
+.token.regex,
+.token.atrule {
+  color: #22a2c9;
+}
+
+.token.placeholder,
+.token.variable {
+  color: #3d8fd1;
+}
+
+.token.deleted {
+  text-decoration: line-through;
+}
+
+.token.inserted {
+  border-bottom: 1px dotted #202746;
+  text-decoration: none;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.important {
+  color: #c94922;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+.markdown-section pre>code {
+  -moz-osx-font-smoothing: initial;
+  -webkit-font-smoothing: initial;
+  background-color: #282828;
+  border-radius: 2px;
+  color: #657b83;
+  display: block;
+  font-family: 'Roboto Mono', Monaco, courier, monospace;
+  font-size: 0.8em;
+  line-height: inherit;
+  margin: 0 2px;
+  overflow: inherit;
+  padding: 2.2em 5px;
+  white-space: inherit;
+  max-width: inherit;
+}
+
+.markdown-section code::after, .markdown-section code::before {
+  letter-spacing: 0.05em;
+}
+
+code .token {
+  min-height: 1.5em;
+  -webkit-font-smoothing: initial;
+  -moz-osx-font-smoothing: initial;
+}
+
+pre::after {
+  color: #ccc;
+  content: attr(data-lang);
+  font-size: 0.6em;
+  font-weight: 600;
+  height: 15px;
+  line-height: 15px;
+  padding: 5px 10px 0;
+  position: absolute;
+  right: 0;
+  text-align: right;
+  top: 0;
+}
+
+.markdown-section p.tip {
+  background-color: #282828;
+  color: #657b83;
+}
+
+input[type="search"] {
+  border-color: #4f4f4f;
+  background: #4f4f4f;
+  color: #c8c8c8;
+}

src/themes/vue.css

@@ -18,15 +18,17 @@ body {
   background-color: $color-bg;
 
   li {
-    margin: 6px 15px;
+    margin: 6px 0 6px 15px;
   }
 
   ul li a {
-    color: #7f8c8d;
+    color: #505d6b;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
     text-decoration: none;
+    font-size: 14px;
+    font-weight: normal;
 
     &:hover {
       text-decoration: underline;
@@ -38,8 +40,9 @@ body {
   }
 
   ul li.active>a {
-    color: $color-primary;
+    color: var(--theme-color, $color-primary);
     font-weight: 600;
+    border-right: 2px solid;
   }
 }
 
@@ -54,7 +57,7 @@ body {
 }
 
 .markdown-section a {
-  color: $color-primary;
+  color: var(--theme-color, $color-primary);
   font-weight: 600;
 }
 
@@ -107,7 +110,7 @@ body {
 
 .markdown-section blockquote {
   color: #858585;
-  border-left: 4px solid $color-primary;
+  border-left: 4px solid var(--theme-color, $color-primary);
   margin: 2em 0;
   padding-left: 20px;
 }
@@ -179,7 +182,7 @@ body {
 }
 
 .token.string {
-  color: $color-primary;
+  color: var(--theme-color, $color-primary);
 }
 
 .token.selector {
@@ -201,7 +204,7 @@ body {
 .token.control,
 .token.directive,
 .token.unit {
-  color: $color-primary;
+  color: var(--theme-color, $color-primary);
 }
 
 .token.keyword {
@@ -285,15 +288,3 @@ pre::after {
   text-align: right;
   top: 0;
 }
-
-.content span.light {
-  color: #7f8c8d;
-}
-
-.content span.info {
-  display: inline-block;
-  font-size: 0.85em;
-  margin-left: 20px;
-  vertical-align: middle;
-  width: 280px;
-}

src/tpl.js

@@ -22,8 +22,8 @@ export function corner (data) {
 /**
  * Render main content
  */
-export function main (tpl) {
-  const aside = `${tpl}<aside class="sidebar"></aside>`
+export function main () {
+  const aside = `${toggle()}<aside class="sidebar"><div class="sidebar-nav"></div></aside>`
 
   return (isMobile() ? `${aside}<main>` : `<main>${aside}`) +
     `<section class="content">
@@ -72,3 +72,10 @@ export function tree (toc, tpl = '') {
   return tpl
 }
 
+export function helper (className, content) {
+  return `<p class="${className}">${content.slice(5).trim()}</p>`
+}
+
+export function theme (color) {
+  return `<style>:root{--theme-color: ${color};}</style>`
+}

src/util.js

@@ -89,7 +89,7 @@ export function getRoute () {
   const loc = window.location
   if (cacheHash === loc.hash && !isNil(cacheRoute)) return cacheRoute
 
-  let route = loc.hash.match(/^#\/([^#]+)/)
+  let route = loc.hash.replace(/%23/g, '#').match(/^#\/([^#]+)/)
 
   if (route && route.length === 2) {
     route = route[1]
@@ -120,6 +120,8 @@ export function slugify (string) {
     .replace(/<[^>\d]+>/g, '')
     .replace(re, '')
     .replace(/\s/g, replacement)
+    .replace(/-+/g, replacement)
+    .replace(/^(\d)/, '_$1')
   let occurrences = slugify.occurrences[slug]
 
   if (slugify.occurrences.hasOwnProperty(slug)) {
@@ -155,3 +157,10 @@ export const merge = Object.assign || function (to) {
 
   return to
 }
+
+export function emojify (text) {
+  return text
+    .replace(/<(pre|template)[^>]*?>([\s\S]+)<\/(pre|template)>/g, match => match.replace(/:/g, '__colon__'))
+    .replace(/:(\w*?):/ig, '<img class="emoji" src="https://assets-cdn.github.com/images/icons/emoji/$1.png" alt="$1" />')
+    .replace(/__colon__/g, ':')
+}