本文正在参与「金石计划 . 分割6万现金大奖」

一般比较复杂的产品会有一个协助中心功用，协助用户了解一些比较难了解的业务。前一段时间，公司想做一个轻量级的协助中心，所以我就去调研了一下。找的时分发现网上做这个许多，通过开始的测验，仍是觉得docsify操作起来更简略一点。

docsify

docsify 是一款文档网站生成工具，它的官方阐明文档便是通过docsify的，作用：docsify.js.org/#/zh-cn/

它的特点是：装备简略，通过mackdown语法编写文档，可直接生成html静态文件，且能做到实时更新。

建立docsify

运用环境：

  1. npm -v
  2. node -v

建立过程

  1. 大局装置docsify-cli
npm i docsify-cli -g
  1. 初始化协助中心项目help
docsify init ./help

初始化项目后，在help目录下会创建下面三个文件

  • index.html 拜访的进口
  • README.md 默许显示内容
  • .nojekyll 阻止GitHub Pages 疏忽掉下划线开头的文件
  1. 在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="https://juejin.im/post/7177378692211933221/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="https://juejin.im/post/7177378692211933221/js/search.js"></script>
<!-- Docsify v4 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/docsify@4"></script>-->
<script src="https://juejin.im/post/7177378692211933221/js/docsify.min.js"></script>
<!-- <script src="https://unpkg.com/docsify/lib/docsify.min.js"></script> -->
<!--<script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/docsify.min.js"></script>-->
<!-- Java代码高亮 -->
<!-- <script src="https://unpkg.com/prismjs/components/prism-java.js"></script> -->
<!--sql代码高亮-->
<!-- <script src="https://unpkg.com/prismjs/components/prism-sql.js"></script> -->
<!--bash代码高亮-->
<!-- <script src="https://unpkg.com/prismjs/components/prism-bash.js"></script> -->
<!-- 仿制代码到剪贴板 -->
<script src="https://juejin.im/post/7177378692211933221/js/docsify-copy-code.min.js"></script>
<!-- 图片缩放 -->
<script src="https://juejin.im/post/7177378692211933221/js/plugins/zoom-image.js"></script>
<!-- 字数统计 -->
<script src="https://juejin.im/post/7177378692211933221/js/countable.js"></script>
<!-- 上一章、 下一章 -->
<script src="https://juejin.im/post/7177378692211933221/js/docsify-pagination.min.js"></script>
</body>
</html>

项目目录成果如下：

使用docsify搭建帮助中心
整体作用如下图：

使用docsify搭建帮助中心

项目代码： demo源代码

布置

关于布置，跟布置静态网页相同，网上有许多这方面材料。你能够测验布置在github、gitee、华为云储存等等。

本文正在参与「金石计划 . 分割6万现金大奖」