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