一般比较复杂的产品会有一个帮助中心功能，帮助用户理解一些比较难理解的业务。前一段时间，公司想做一个轻量级的帮助中心，所以我就去调研了一下。找的时候发现网上做这个很多，经过初步的尝试，还是觉得docsify操作起来更简单一点。
docsify
docsify 是一款文档网站生成工具，它的官方说明文档就是通过docsify的，效果：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、华为云储存等等。
