一般比较复杂的产品会有一个帮助中心功能，帮助用户理解一些比较难理解的业务。前一段时间，公司想做一个轻量级的帮助中心，所以我就去调研了一下。找的时候发现网上做这个很多，经过初步的尝试，还是觉得docsify操作起来更简单一点。
docsify
docsify 是一款文档网站生成工具，它的官方说明文档就是通过docsify的，效果：https://docsify.js.org/#/zh-cn/
它的特点是：配置简单，通过mackdown语法编写文档，可直接生成html静态文件，且能做到实时更新。
搭建docsify
使用环境：
- npm -v
- node -v
搭建步骤
- 全局安装docsify-cli
npm i docsify-cli -g- 初始化帮助中心项目help
docsify init ./help初始化项目后，在help目录下会创建下面三个文件
- index.html 访问的入口
- README.md 默认显示内容
- .nojekyll 阻止GitHub Pages 忽略掉下划线开头的文件
- 在help目录下，执行docsify serve .
就这样，你就能看到默认的文档效果了。当然，这个效果还是很初级，我们需要做一些配置，才能满足展示的需求。
优化默认配置
修改index.html配置
由于线上的链接有时候不稳定，所以建议把js和css都下载到本地使用。这个文件的配置我基本都做了备注说明，你可以根据自己的情况进行修改。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>帮助文档</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="Description">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/vue.css">
</head>
<body>
<div id="app"></div>
<script>
window.$docsify = {
name: '帮助文档',
// repo: '',
//主题颜色
// themeColor: 'blue',
// 加载 _sidebar.md
loadSidebar: true,
// 导航栏支持，默认加载的是项目根目录下的_navbar.md文件
loadNavbar: true,
// 封面支持，默认加载的是项目根目录下的_coverpage.md文件
coverpage: true,
// subMaxLevel: 2表示只显示h1~h2的标题，对应#和##
subMaxLevel: 4,
// 小屏设备下合并导航栏到侧边栏
mergeNavbar: true,
maxLevel: 3,
// 加载 summary.md
loadSidebar: '_sidebar.md',
alias: {
'/.*/_sidebar.md': '/_sidebar.md'
},
auto2top: true,//切换页面后是否自动跳转到页面顶部
search: 'auto',
//全文搜索
search: {
maxAge: 86400000,
paths: '/',
placeholder: '搜索...',
noData: '未找到结果，换个搜索词试试？',
},
copyCode: {
buttonText : '复制',
errorText : '复制失败',
successText: '已复制'
},
//外链打开方式
externalLinkTarget: '_blank',
}
</script>
<!--全文搜索,直接用官方提供的无法生效-->
<!-- <script src="https://cdn.bootcss.com/docsify/4.5.9/plugins/search.min.js"></script> -->
<script src="js/search.js"></script>
<!-- Docsify v4 -->
<!-- <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>-->
<script src="js/docsify.min.js"></script>
<!-- <script src="//unpkg.com/docsify/lib/docsify.min.js"></script> -->
<!--<script src="//cdn.jsdelivr.net/npm/docsify@4/lib/docsify.min.js"></script>-->
<!-- Java代码高亮 -->
<!-- <script src="//unpkg.com/prismjs/components/prism-java.js"></script> -->
<!--sql代码高亮-->
<!-- <script src="//unpkg.com/prismjs/components/prism-sql.js"></script> -->
<!--bash代码高亮-->
<!-- <script src="//unpkg.com/prismjs/components/prism-bash.js"></script> -->
<!-- 复制代码到剪贴板 -->
<script src="js/docsify-copy-code.min.js"></script>
<!-- 图片缩放 -->
<script src="js/plugins/zoom-image.js"></script>
<!-- 字数统计 -->
<script src="js/countable.js"></script>
<!-- 上一章、 下一章 -->
<script src="js/docsify-pagination.min.js"></script>
</body>
</html>项目目录结果如下：
整体效果如下图：
项目代码： demo源代码
部署
关于部署，跟部署静态网页一样，网上有很多这方面资料。你可以尝试部署在github、gitee、华为云储存等等。