Local quickly build MarkDown syntax website

Mainly before with people learn quickly build a simple website, by this way the relevant documents of the United States and the United States on the server, and then to others or, it could be cooked cooked Department Department MarkDown grammar and learning , if the interface documentation is recommended to achieve through swagger.
 

Home renderings

The main use docsify documentation system

Official github Address: https://github.com/docsifyjs/docsify-cli

Chinese Description Address: https://docsify.js.org/#/zh-cn/quickstart

First, install nodejs

nodejs official address: https://nodejs.org/en/download/

Find their computer-related version and install (do not teach how to install it)

 

Second, the installation tool docsify-cli

Open a terminal run the editor:

npm i docsify-cli -g

Wait until the installation is completed, such as the installation fails at the top please add sodu have administrator privileges to install

sudo above sea level and docsify -g-cli

Then not, then. . . . Own copy of the information given it ~ Baidu

Third, build a local directory, etc.

1. Create a new directory named with dosc

2. Run the initialization directory in a terminal:

docsify init ./docs

Note that the initialization is that you just created dosc named

There will be three files in the docs directory after successful installation

  • Entrance index.html file
  • README.md will be rendered as the home page content
  • .nojekyll to prevent GitHub Pages will ignore files begin with an underscore

3. Check whether it can start

Run command

docsify serve docs

Need to run in the same directory docs oh

After a successful run can visit http: // localhost: 3000 / # / you can access

4. Modify index.html file

Here with vscode editor

原文件:

修改之后:

<!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" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
</head>
<body>
  <div id="app">加载中</div>
  <script>
    window.$docsify = {
      name: '在线文档',
      nameLink: '/',
      search: 'auto',
      coverpage: true,
      loadSidebar: true,
      loadNavbar: true
    }
  </script>
  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
</body>
</html>

5.新增_sidebar、_navbar、_coverpage文件生成首页

具体目录如下:

_sidebar:

* [整体规划](programming/)
* [服务器清单](server/)
* [文档说明](document/)

_navbar:

* [整体规划](programming/)
* [服务器清单](server/)
* [文档说明](document/)

_coverpage:

# 在线文档

[整体规划](programming/)
[服务器清单](server/)
[文档说明](document/)

最后展现形式如开头的首页效果图

这样差不多就大功告成了,省下的就如我下面的截图一路往下建立文件等,在文件下使用markdown编写文档就可以了

到这为止就结束了,如有不对的地方或疑问还请留言啦~

Guess you like

Origin www.cnblogs.com/wpcnblog/p/12010518.html