使用 Docsify 构建接口文档

作者: acc8226 | 来源:发表于2020-08-29 20:51 被阅读0次

使用 Docsify 构建接口文档
使用docsify构建专业文档网站(上)
docsify 学习笔记2019-03-28
接口调试神器——Swagger
源码剖析@ApiImplicitParam对@RequestPa
nodejs写文接口文档docsify
hexo个人博客搭建（theme next）
用docsify快速构建文档，并用GitHub Pages展示
使用docsify快速生成网站文档
文档神器Docsify - 使用说明

优点：使用markdown编写，docsify 作为支撑。快速高效，若搭载搜索功能，功能较为完善。且可部署在内网环境。

缺点：无法直接进行 POST 请求，不太方调试，需要借助 POSTMan 等工具。

docsify init ./docs

docsify run ./docs

开启搜索，
此时必须开启多页文档才行**, 形如。详见 https://docsify.js.org/#/zh-cn/more-pages

.
└── docs
    ├── README.md
    ├── guide.md

开启字数统计
add js
<script src="//unpkg.com/docsify-count/dist/countable.js"></script>

Add settings

window.$docsify = {
  count:{
    countable:true,
    fontsize:'0.9em',
    color:'rgb(90,90,90)',
    language:'chinese'
  }
}

开启 复制到剪切板 功能
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>

addsettings

copyCode: {
 buttonText: {'/' : '点击复制'},
 errorText: {'/' : '错误'},
 successText: {'/' : '已复制'}
}

最终成品

_sidebar.md

* [xxx-app端](/)
* [xxx-微信端](/wechat)

index.html

<!DOCTYPE html>
<html lang="zh">

<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="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css" title="vue">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/dark.css" title="dark" disabled>
    <link rel="stylesheet" href="css/theme-simple-dark.css" disabled>
    
    <style> 
    </style>
</head>

<body>
    <div id="app">加载中...</div>
    <script>
        window.$docsify = {
            auto2top: true,
            loadSidebar: true,
            maxLevel: 2,
            subMaxLevel: 2,
            name: '',           
            search: {
              maxAge: 600000,// 过期时间，设置为10分钟
              noData: {
                '/': '没有结果!'
              },
              paths: 'auto',
              placeholder: {
                '/': '搜索接口'
              },
              // 搜索标题的最大层级, 1 - 6
              depth: 2,
            },
            
             count: {
                countable:true,
                fontsize:'0.9em',
                color:'rgb(90,90,90)',
                language:'chinese',
                isExpected: false // 是否显示需要阅读的分钟数

             },
             
            copyCode: {
              buttonText: {'/' : '点击复制'},
              errorText: {'/' : '错误'},
              successText: {'/' : '已复制'}
            },
            
            plugins: [
                function (hook, vm) {                 
                                
                var footer = [
                    '<hr/>',
                    '<footer>',
                    '<span>likai&copy;2020.</span>',
                    '<span> Proudly published with <a href="https://github.com/docsifyjs/docsify" target="_blank">docsify</a></span>',
                    ' V' + window.Docsify.version,
                    '</footer>'
                  ].join('');

                  hook.afterEach(function(html) {
                    return html + footer;
                  });
                }                 
            ],
      
        }
  </script>
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
  <!--><script src="js/docsify.min.js"></script></!-->
  
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>

  <script src="//unpkg.com/docsify-count/dist/countable.js"></script>
  <!--><script src="js/countable.min.js"></script></!-->
  
  <script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script> 
  <!--><script src="js/docsify-copy-code.js"></script></!--> 
  
  
</body>

</html>