Docsify文档网页管理工具入门

yyy

一、Docsify简介

Docsify是一个快速构建网页文档结构的管理工具，可直接在浏览器运行。Docsify主要提供页面文档结构、样式，具体内容是需要编写Markdown文档来渲染。

二、Docsify特点

1、无需构建，也就是说不会生成.html文件

2、在运行时渲染内容，内容由Markdown文件提供

3、轻量、结构简单，快速部署

三、Docsify管理工具应用场景

了解Docsify的基本特点后，那Docsify主要是在什么场景下使用呢？假设有个场景：打算写个Python的基本教程，内容基于Markdown编写，编写完成后，想把这个结构化的Markdown教程通过Web网页的形式展示出来，那么这个时候完全可以考虑用Docsify来支持。Docsify基本效果如下：

yyy

对Docsify有了完整认识后，接下来看看怎么快速部署Docsify这个管理工具！

四、Docsify快速部署

引入Docsify样式和Docsify插件

Docsify支持npm和手动安装，这里不使用npm方式，采用手动方式。创建一个docsify目录，目录下新建index.html文件，内容如下

<!DOCTYPE html>
<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>

以上代码主要是引入了一个vue.css样式和docsify的js文件，可以看到无需引入很多文件。

编写Markdown文件

Docsify引入后，开始编写Markdown内容，编写完成后才会自动由Docsify渲染出来。新建README.md文件(与index.html文件同级目录)，内容如下：

# 第一章 Python介绍
> Python是一门流行的编程语言。

## Python特点
> 应用场景广泛
> 社区活跃


# 第二章 Python安装

## Windows环境
> 下载python.exe安装包，双击打开进行安装

## Linux环境
> yum -y install python3

通过Web环境访问

由于Chrome浏览器直接打开index.html会无法访问，提示跨域相关的问题。这里我通过Web环境(PHP+Nginx)来访问，创建一个docsify.test网站，如下图

yyy

创建好docsify网站后，浏览器直接访问docsify.test项目，如下图，可以看到渲染的内容非常清晰且结构化

总结：Docsify对于构建个人网站文档是一个不错的选择，特别是你有Markdown的编写习惯，Docsify能够很好的支持。