admin 前言
很多学生希望有一个能够记录/总结自己所学知识的文件系统。
本文就来介绍一下 Docsify[1] + Github Page 的方式，旨在快速搭建属于自己的文档网站
本文的 Demo 代码可以通过 Github[2] 查看，演示看这里[3]
准备工作
全局安装 docsify-cli 工具，并创建文档项目目录
npm i docsify-cli -g
mkdir my-docs
cd my-docs
复制代码初始化项目
docsify init ./docs
复制代码成功后会生成一个 docs 的文件夹，并且里面有三个文件
- index.html 入口文件。后面我们的配置很多都是在这里配置
- README.md 会做为主页内容渲染
- .nojekyll 用于阻止 GitHub Pages 忽略掉下划线开头的文件
启动项目
docsify serve docs
复制代码通过运行 docsify serve 启动一个本地服务器，可以方便地实时预览效果。默认访问地址 http://localhost:3000[4] 。下面的内容时间上是 README.md 中的内容
简单的配置
接下来就是配置我们的文档了
配置侧边栏
在 index.html 中，新增配置 loadSidebar: true
window.$docsify = {
name: '',
repo: '',
+ loadSidebar: true
}
复制代码在 docs 中新建一个文件 _，写入
- JavaScript
- [闭包] "闭包")
- [原型] "原型")
- CSS
- [布局] "布局")
复制代码同时在 docs 中新建 clo 、和 layout.md三个 markdown 文件
可以在 clo 中写入如下，查看效果
# 介绍闭包
## 什么是闭包
哈哈哈哈
## 闭包的作用是什么
复制代码 自动生成目录
可以根据标题生成目录，这个在文章很长的时候很有用，直接演示配置和效果
window.$docsify = {
name: '',
repo: '',
loadSidebar: true,
+ subMaxLevel: 2
}
复制代码 插件的使用
基础的配置已经完成了，当然还有其他更多的功能配置，这里不再细说。Docsify 还提供了丰富的插件，接下来我们看看
全文搜索
配置非常简单
<script>
window.$docsify = {
name: '',
repo: '',
loadSidebar: true,
subMaxLevel: 2,
+ search: 'auto'
}
</script>
<!-- Docsify v4 -->
<script src=";></script>
+ <script src=";></script>
复制代码查看效果
图片缩放
Docsify 是需要插件才能实现图片缩放的，但其实也很简单，如下
<script>
window.$docsify = {
name: '',
repo: '',
loadSidebar: true,
subMaxLevel: 2,
search: 'auto'
}
</script>
<!-- Docsify v4 -->
<script src=";></script>
<script src=";></script>
+ <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
复制代码支持 CodePen 插入
随便找到一个 CodePen，打开，找到 Embed，点击进入
image.png
点击 iframe,copy 里面的代码。粘贴到你的 markdown 文件中
就可以查看 CodePen 的了
更多的插件实现方案
Docsify 还提供了 Gitalk[5] 评论插件等。更多请看官方文档[6]，这里不再赘述。
部署
你不需要一台服务器（当然也可以），我们直接部署到 Github Page 中。先上传我们的代码到 Github。这里不再演示这一步，请读者自行完成
找到 Settings
找到 GitHub Pages，选择 main 和 docs 文件夹，点击 save
稍等一会，就会生成我们的文档地址了，可以点击这里[7]查看本文的演示效果
总结
本文从 0 到 1 介绍以 Docsify[8] + Github Page的方式，快速搭建属于自己的文档系统，并部署到线上。当然文章提到的只是 Docsify 的一小部分功能，赶兴趣的可以去官方[9]查看
参考资料
[1]Docsify:
[2]Github:
[3]这里:
[4]http://localhost:3000: http://localhost:3000/
[5]Gitalk:
[6]官方文档:
[7]这里:
[8]Docsify:
[9]官方: