docsify 在线文档搭建(采坑细节记录)

项目源码:https://github.com/tobegreatman/koa-swagger/tree/master/docs

1、搭建环境:(Node版)

  安装docsify:

    npm install docsify -g

  启动doc server:(文档目录为 docs)

      docsify serve ./docs

    访问文档服务:

      htttp://localhost:3000

2、配置细节

  配置左边导航:(slidebar)

window.$docsify = {
// load from _sidebar.md loadSidebar: true

// load from summary.md
loadSidebar: 'summary.md' }

  配置搜索:

  <script>
    window.$docsify = {
      search: {
        paths: 'zh-ch/', // 文档目录和index.html非同级时需要设置,否则查询结果点击时无法正确跳转
        noData: 'No results',
        placeholder: 'Search...',
        depth: 3
      }
    }
  </script>
  <script src="./res/docsify.min.js"></script>
  <script src="./res/search.js"></script>

   文档目录:

  

  配置编辑连接:

window.$docsify = {
      alias: {
        '/.*/_sidebar.md': '/_sidebar.md'
      },
      plugins: [
        function (hook, vm) {
          hook.beforeEach(function (html) {
            if (/githubusercontent.com/.test(vm.route.file)) {
              url = vm.route.file
                .replace('raw.githubusercontent.com', 'github.com')
            } else if (/jsdelivr.net/.test(vm.route.file)) {
              url = vm.route.file
                .replace('cdn.jsdelivr.net/gh', 'github.com')
            } else {
              url = 'https://github.com/tobegreatman/koa-swagger/tree/master/docs/' + vm.route.file
            }
            var editHtml = '[:memo: Edit Document](' + url + ')
'

            return editHtml
              + html
              + '

----

'
              + '<a href="https://docsify.js.org" target="_blank" style="color: inherit; font-weight: normal; text-decoration: none;">Powered by docsify</a>'
          })
        }
      ]
}

  index.html配置细节:

<script>
    window.$docsify = {
      loadSidebar: true,
      maxLevel: 4,
      subMaxLevel: 3,
      name: 'docsify',
      repo: 'https://github.com/tobegreatman/koa-swagger/blob/master/README.md',
      search: {
        paths: 'zh-ch/',
        noData: 'No results',
        placeholder: 'Search...',
        depth: 3
      },
      alias: {
        '/.*/_sidebar.md': '/_sidebar.md'
      },
      plugins: [
        function (hook, vm) {
          hook.beforeEach(function (html) {
            if (/githubusercontent.com/.test(vm.route.file)) {
              url = vm.route.file
                .replace('raw.githubusercontent.com', 'github.com').replace(//master/, '/blob/master');
            } else if (/jsdelivr.net/.test(vm.route.file)) {
              url = vm.route.file
                .replace('cdn.jsdelivr.net/gh', 'github.com').replace('@master', '/blob/master');
            } else {
              url = 'https://github.com/tobegreatman/koa-swagger/tree/master/docs/' + vm.route.file
            }
            var editHtml = '[:memo: Edit Document](' + url + ')
'

            return editHtml
              + html
              + '

----

'
              + '<a href="https://docsify.js.org" target="_blank" style="color: inherit; font-weight: normal; text-decoration: none;">Powered by docsify</a>'
          })
        }
      ]
    }
  </script>

  

原文地址:https://www.cnblogs.com/xtreme/p/13215432.html