What is docsify?

Docsify can help you quickly generate document websites. Convert your Markdown files directly into HTML in the browser. If you want to get started, just create an index.html and start writing documentation and deploy it directly on GitHub Pages.

When do I need it?

If you are a Vue developer, you must be familiar with the vue official website. Docsify can generate a static website just like the vue official website. This is useful when you want to publish your markdown notes on a website for others to see, or when you want to write an instruction manual for your NPM package.

Into the door

1 Create a directorydemo, create ahtmlfile

<! 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">
  <! Load the CSS style -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
</head>
<body>
    <! Docsify will render pages on div with id app by default.
    <div id="app"></div>
    <! -- Config -->
    <script>
    window.$docsify = {}
    </script>
    <! Load dependent JS files -->
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
</body>
</html>
Copy the code

2 Create another oneREADME.mdFor the file (docsify uses it as the home page by default), enter the following text

## I'm the homepage
> Write a piece of code white
```javascript var string = "hello world" console.log(string) ```Copy the code

3. Look at the effect

In the demo directory, run the live-server

Live-server doesn’t know? Learn how to run a directory and start a service

#Console outputDocsify git:(master) qualify live-server http://0.0.0.0:8080 is already in us. Trying another port. Ready for changes Serving "/ Users/baymax/Desktop/workspace/note - repo/docsify" at http://127.0.0.1:59329 GET/README. GET the md 404 2.709 ms - 148 /favicon.ico 404 0.518 Ms-150 GET/readme. md 404 0.635 Ms-148Copy the code

Go to http://127.0.0.1:59329 to see the website we created with Docsify

Doesn’t the site have a navigation?

Arrange!!!!!

<! 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">
  <! Load the CSS style -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
</head>
<body>
    <! Navigation is here -->
    <nav>
        <a href="# /">Home page</a>
        <a href="#/quick-start/">Quick learning</a>
        <a href="#/api/">api</a>
        <a href="#/other/">other</a>
    </nav>
    <! Docsify will render pages on div with id app by default.
    <div id="app"></div>
    <! -- Config -->
    <script>
    window.$docsify = {}
    </script>
    <! Load dependent JS files -->
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
</body>
</html>
Copy the code

The navigation on the left is ugly

Get rid of!

<script>
window.$docsify = {
    hideSidebar: true,
}
</script>
Copy the code

What? You want to customize the sidebar

Go!!

<script>
// Enable the loading sidebar
window.$docsify = {
    loadSidebar: true,
}
</script>
Copy the code

Next, create the _sidebar. Md file, which reads as follows

<! -- demo/_sidebar. Md --> * [quick start](quick-start/) * [template string](quick-start/ STR) * [v-bind](quick-start/bind) * [v-click](quick-start/ HTML) * [v-click](quick-start/click) * [other](other)Copy the code

What about the search feature we talked about?

    <! -- Config -->
    <script>
        window.$docsify = {
            loadSidebar: true.search: 'auto'.// Default value,
            // hideSidebar: true,
        }
    </script>
    <! Load dependent JS files -->
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
Copy the code

Add copy to clipboard functionality to all code blocks in your site (load a plug-in)

Add a simple [Click to Copy] button to all code blocks to allow users to easily copy code from your document.

<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
Copy the code

Copy to clipboard more configuration docsify-copy-code

Use the advanced

Check out docsify’s website