Docsify is a tool for dynamically generating document websites. It can display. md files to readers in the form of wikis. It can be used to create technical documents, user manuals, wikis, etc. It can quickly build and publish software API manuals or user instructions in the form of websites, so that users can use your software to achieve rapid dissemination. It can be deployed on hosts, VPS, Github, and static cloud storage (such as AliCloud OSS).

characteristic

  • No statically built html file
  • Simple and light (about 21kB gzipped)
  • Intelligent full-text search plug-in
  • Multiple topics
  • Useful plug-in API
  • Emoticon support
  • Compatible with IE11
  • Support server side rendering

Official documents: Portal

Quick Start

  • Install npm first
  • Global installation docsify-cli , which helps initialize and preview the Web site locally.

npm i docsify-cli -g

  • Create a new directory and enter it
  • If you want to ./docs You can use the init initialization

docsify init ./ docs

After init After completion, you can see that in the file list ./docs Subdirectories.

  • index.html As an item file
  • README.md As Home
  • .nojekyll Prevent GitHub pages from ignoring files that begin with an underscore

Preview Site

Run local server using docsify serve 。 You can preview your website in a browser http://localhost:3000

docsify serve docs

If the 3000 port is occupied, replace the port with - p

Teach you to use docsify to generate beautiful document websites

optimization

modify index.html The file can be directly modified by referring to my configuration. The official details of each parameter are provided. Many external files can be downloaded locally to import, which is faster to load.

 <!--  index.html --> <! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Lcry-Notes</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="description" content="Description"> <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="static/vue.css"> </head> <body> <!--  Load dialog box --> <div id="app">... Loading</ div> <script> window.$ docsify = { Name: 'Lcry Notes',//Name LoadSidebar: true,//Enable the sidebar SubMaxLevel: 3,//The secondary directory is automatically generated LoadNavbar: true,//Enable custom navigation Coverpage: true,//cover page setting Auto2top: true,//Scroll to the top of the screen when changing the route Homepage: 'home. md',//Set the home page notFoundPage: '404.md',  //404 //Set Search search: { MaxAge: 86400000,//Expiration time, in milliseconds, one day by default paths: 'auto', // or 'auto' Placeholder: 'Search', NoData: 'No results found', //Maximum level of search title, 1 - 6 depth: 3 }  } </script> <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>  <!--  Official theme js --> <script src="//unpkg.com/docsify/lib/plugins/emoji.min.js"></script>   <!--  Emoticon --> <script src="//unpkg.com/docsify/lib/plugins/zoom-image.min.js"></script>     <!--  Image magnification plug-in --> <script src="//unpkg.com/docsify/lib/plugins/search.js"></script>   <!--  Search --> <script src="//unpkg.com/prismjs/components/prism-java.js"></script><!--  Highlight java code --> </body> </html>

_coverpage.md Reference configuration

 <!-- _ Coverpage.md Cover Page Settings --> # Lcry-Notes <small>1.0</small> >  <p align="center"> <img src="static/logo.svg" width=""/> </p> <h1 align="center">Personal learning notes</h1> [Personal blog]（ https://www.51it.wang ) [Start reading] (#)

_navbar.md Reference configuration

 <!--  Top Custom Navigation --> -Navigation recommendation - [aaaa](a.md) - [bbbb](b.md)

_sidebar.md Reference configuration

 - Getting started - [Quick start](blog/aa) - [Writing more pages](more-pages.md) - [Custom navbar](custom-navbar.md) - [Cover page](cover.md) - Customization - [Configuration](configuration.md) - [Themes](themes.md) - [List of Plugins](plugins.md) - [Write a Plugin](write-a-plugin.md) - [Markdown configuration](markdown.md) - [Language highlighting](language-highlight.md) - Guide - [Deploy](deploy.md) - [Helpers](helpers.md) - [Vue compatibility](vue.md) - [CDN](cdn.md) - [Offline Mode(PWA)](pwa.md) - [Server-Side Rendering(SSR)](ssr.md) - [Embed Files](embed-files.md) - **Links** - [![code]( https://icongr.am/clarity/link.svg?size=16&color=808080 ）Personal Blog]（ https://www.51it.wang ) - [![code]( https://icongr.am/clarity/link.svg?size=16&color=808080 ）Apply for Friendly Chain] (#)

After setting, you can preview again, which is very beautiful. Of course, you can use github for hosting or your own host deployment.

Teach you to use docsify to generate beautiful document websites

Article Contents