An amazing document site generation tool.

Docsify is a tool for dynamically generating document websites. Unlike GitBook and Hexo, it does not generate a.md to.html file; all the conversion is done at run time.

This can be very useful if you just need to build a small document site quickly, or if you don’t want to “pollute” your commit record with a bunch of generated.html files. Just create an index.html and start writing your document and deploy it directly on GitHub Pages.

See Quick Start for details.

Initialize the project

If you want to document a project in its./docs directory, initialize the project directly with init.

docsify init ./docs
Copy the code
<! DOCTYPEhtml>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta charset="UTF-8">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      / /...
    }
  </script>
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
</body>
</html
Copy the code

For a multipage document, for example, to create a guide.md file, the route would be /#/guide.

Start the project

python -m SimpleHTTPServer 3000
# or
python3 -m http.server 3000
Copy the code

Customize the sidebar

To get the sidebar, you need to create your own _sidebar.md

* [home](/) * [back end use](not_front/123)Copy the code

File path

README.md
not_front/123.md
Copy the code

Index.html information

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="description" content="Description"> <meta name="viewport" The content = "width = device - width, user - scalable = no, initial - scale = 1.0, the maximum - scale = 1.0, Minimum - scale = 1.0 "> < link rel =" stylesheet "href =" / / cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css "> < / head > < body > < div  id="app"></div> <script> window.$docsify = { loadSidebar: '_sidebar.md', subMaxLevel: 3 } </script> <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script> </body> </html>Copy the code

A condensed version of the official address

The compressed version of CSS

Js compressed version

Other topics

Related to the plug-in

Code highlighting

Docsify’s built-in code highlighting tool is Prism. By default, Prism supports the following languages:

  • Markup – markup.html.xml.svg.mathml.ssml.atom.rss
  • CSS – css
  • C-like – clike
  • JavaScript – javascript.js

Adding additional syntax support requires adding the corresponding syntax file via CDN:

<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-php.min.js"></script>
Copy the code

Copy plugin

  <script>
    window.$docsify = {
	  copyCode: {
	    buttonText: {
		  '/'      : 'Click copy'
		},
		errorText: {
		  '/': 'wrong',},successText: {
		  '/'      : 'Copied'}}}</script>
Copy the code

Word count

This is a plugin to provide text statistics for Docsify. @827652549 provided

It provides the function of counting Chinese characters and English words, and excludes some special characters of markdown syntax such as * and –

Add JS

<script src="//unpkg.com/docsify-count/dist/countable.js"></script>
Copy the code

Add settings

$docsify = {count:{countable:true, fontsize:'0.9em', color:' RGB (90,90,90)', language:' Chinese '}}Copy the code

Docsify-themeable use of a theme

<! -- Theme: Simple (latest v0.x.x) --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-defaults.css"> <! -- Theme: Simple --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css"> <! -- Theme: Simple Dark --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple-dark.css"> <! -- docsify-themeable (latest v0.x.x) --> <script src="https://cdn.jsdelivr.net/npm/docsify-themeable@0"></script>Copy the code