Docsify文档网页管理工具入门

作者:IT技术圈子 浏览量:2823   更新于 2023-10-03 00:37 标签:

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能够很好的支持。


相关文章