最近碰到一个需求，需要把一些markdown渲染到页面上，做成一个类似vue文档的页面。
如果没用修改markdown这个需求的话，我其实会选择vue-press。一想到要自己修改markdown,那么就会想到如下问题：
- 多人同时修改怎么办
- 修改记录的保存，回退
- 权限
每一个都很头疼啊，所以想到了git，git能够完美解决以上问题，所以我只需要把markdown放到一个git仓库里就好了，正好公司搬家后也有了gitlab,于是乎，说干就干。
打开docsify官网，docsify.js.org/#/zh-cn/ 大概看了下，我觉得docsify有如下优点:
- 轻量
- 文件少：一般的库都是一个markdown生成一个html,而docsify只需要一个html
- 没有命令，无需脚手架，最多需要一个live-server
- 很方便的部署在GitHub pages
第一步：建立一个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="//unpkg.com/docsify/themes/vue.css">
</head>
<body>
<div id="app"></div>
<script>
window.$docsify = {
//...
}
</script>
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
</body>
</html>
其中的script地址你可以换成本地文件或者其他cdn。
第二步
调整docsify配置
window.$docsify = {
name: '',
repo: 'git repo',
basePath:'',
mergeNavbar: true,
loadSidebar: true,
autoHeader: true,
subMaxLevel: 3,
alias: { //当你多个文件共用一个sidebar时
'/.*/_sidebar.md': '/_sidebar.md'
},
search: {
maxAge: 86400000, // 过期时间，单位毫秒，默认一天
paths: 'auto', // or 'auto'
placeholder:'搜索',
// 支持本地化
noData: '找不到结果',
// 搜索标题的最大程级, 1 - 6
depth: 3
}
}
console.log('TCL: $docsify', $docsify)
其中_sidebar.md就类似这样的结构，底下每个readme都是存放的具体文档。
* 网站相关文档
* [静态网站](website/README.md)
* [web应用](webApp/README.md)
* [管理后台](websys/README.md)
* [后台接口](api/README.md)
最后结果如图
