需求

最近需要为工业互联网平台搭建一个文档系统，要求可以对外展示相关文档，查询了一些资料，现在已经有Docsify、 VuePress、Hexo等这些文档快搭工具，于是从中选择了一个相对好用的Docsify。

Docsify介绍

Docsify 是一款可以动态生成文档网站的工具，结构非常简单，只需关注index.html配置，就可以把大多数精力放在文档本身。

官网：docsify.js.org/#/

安装docsify：

npm i docsify-cli -g

创建docsify项目：

docsify init ./docsify

初始化的结构目录：

运行启动：

docsify serve docsify

运行界面：

默认端口号为3000

Docsify配置

如果想得到好看的、能用的界面，需要配置导航栏：_navbar.md，侧边栏：_sidebar.md，以及首页封面：_coverpage.md，这些文件均需要手动创建，不过不用担心，里面的配置非常简单，下面将逐一介绍。

创建之后的项目结构如下：

首先看一下index.html的配置：

<!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="icon" href="/image/favicon.ico" type="image/x-icon" />
  <link rel="shortcut icon" href="/image/favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" href="resource/css/buble.css">
  <link rel="stylesheet" href="resource/css/sidebar.min.css" />
  <style type="text/css">
    .cover .mask{
      opacity: 0 !important;
    }
  </style>
</head>
<body>
  <div id="app">加载中</div>
  <script>
    window.$docsify = {
      name: '<span>文档中心</span>',
      repo: '',
      executeScript: true,
      loadSidebar: true,
      loadNavbar: true,
      subMaxLevel: 5,
      sidebarDisplayLevel: 5,
      auto2top: true,
      nameLink: '/',
      coverpage: true,
      // 完整配置参数
      search: {
        maxAge: 86400000, //过期时间,单位毫秒,默认一天
        paths: [
          "/",
          "docs/版本升级记录.md"
        ], // or 'auto'
        placeholder: '请输入搜索关键字',
        noData: '没有搜到呦!',
        depth:5,
      },
      count:{
        countable:true,
        fontsize:'1.2em',
        color:'rgb(90,90,90)',
        language:'chinese',
      },
      pagination: {
        previousText: "上一篇",
        nextText: "下一篇",
        crossChapter: true,
        crossChapterText: true,
      },
      copyCode: {
        buttonText : '复制',
        errorText  : '复制失败',
        successText: '已复制'
      },
      scrollToTop: {
        auto: true,
        text: 'Top',
        right: 15,
        bottom: 15,
        offset: 500
      }
    }
  </script>
  <!-- Docsify v4 插件 -->
  <script src="resource/js/docsify.min.js"></script>
  <script src="resource/js/search.min.js"></script>
  <script src="resource/js/docsify-copy-code.min.js"></script>
  <script src="resource/js/zoom-image.min.js"></script>
  <script src="resource/js/emoji.min.js"></script>
  <script src="resource/js/docsify-pagination.min.js"></script>
  <script src="resource/js/countable.min.js"></script>
  <script src="resource/js/docsify-scroll-to-top.min.js"></script>
  <script src="resource/js/prism-bash.min.js"></script>
  <script src="resource/js/prism-php.min.js"></script>
  <script src="resource/js/prism-java.min.js"></script>
  <script src="resource/js/prism-mongodb.min.js"></script>
  <script src="resource/js/prism-sql.min.js"></script>
  <script src="resource/js/prism-yaml.min.js"></script>
  <script src="resource/js/prism-docker.min.js"></script>
  <script src="resource/js/docsify-sidebar-collapse.min.js"></script>
</body>
</html>

以上是我项目中所用到的配置，所有 js , css 文件都做了本地化，可以从//cdn.jsdelivr.net/npm/下载，或者将前缀替换。

开启导航：loadNavbar: true，开启侧边栏：loadSidebar: true，首页显示：coverpage: true, 其他配置不再详细描述，按照上述格式复制加入即可。

接下来是 _navbar.md文件的编写：

首页右上角导航预览：

侧边栏_sidebar.md文件目前为空，没有用到，因为是希望默认将侧边栏作为文件大纲使用，这样只会显示单个文件大纲目录。如下：

首页封面_coverpage.md文件配置就放了一张图：

最后

因为技术和工具有很多，使用哪一种都是以高效生产为目的，所以技术深度也不够，只是以能够完成工作为主。现在想记录下来，慢慢积累，扩展广度和深度，方便做总结，并且能够将实践成功的经验分享给大家。

以后还要多写文章总结，第一篇文章，不足之处，还望包涵指正。

使用Docsify来构建企业级文档中心

需求