Note: this article only deals with operation, not theory.

The use of docsify

Install docsify – cli

Execute command line

npm i docsify-cli -g
Copy the code

Initialize docsify

Select a directory and run the command line

docsify init ./docs
Copy the code

At this point, the figure file is generated in this directory

  • index.html: Home page file, access entry
  • README.md: will be rendered as the home page content
  • .nojekyllPrevents GitHub Pages from ignoring files that begin with an underscore

Start the docsify

docsify serve docs
Copy the code

Local access

Open your browser http://localhost:3000

Add a cover and sidebar

In the docs directory, create the _coverpage.md file and the _sidebar

And add the configuration to the index.html file

Add a search function

Introduce JS in index.html

<script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/search.js"></script>
Copy the code

And add the Docsify configuration item

< script > window $docsify = {name: 'Rameo, / / home page name' : 'https://github.com/rameosu/rameo', / / you lot address auto2top: True, coverPage: true, // cover loadSidebar: true, // '🔍 Type to search ', noData: '😞 No Results! ', depth: 6}, plantuml: {// plantuml uses the default skin skin: 'default',},} </script>Copy the code

Support flow chart

  • mermaid
<script src="//unpkg.com/mermaid/dist/mermaid.js"></script>
<script src="//unpkg.com/docsify-mermaid@latest/dist/docsify-mermaid.js"></script>
Copy the code
  • plantuml
<script src="//unpkg.com/docsify-plantuml/dist/docsify-plantuml.min.js"></script>
Copy the code

Reform making Pages

  1. Add your Docs directory as a whole to your Github project

  1. On the GitHub Pages page, select it under the Source option/docsDirectory as the current directory to build

  1. Click on your Github Pages url

    • First you can see the cover
    • Scroll down or click Start to see the search box and sidebar
    • In the upper right corner of the page, a cat triangle is your Github address

The last

To see how it works, visit my Github Pages

For source code please visit my Github