• 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>

      

  • 相关阅读:
    markdown语法及工具
    关于div的宽度或高度设置为100%时
    响应式css垂直居中
    JavaScript之闭包问题以及立即执行函数
    JavaScript和JQuery好书推荐
    数组中去重
    解决getImageData跨域问题
    js在for循环中绑定事件
    表格横竖颠倒
    上传按钮美化遇到的问题
  • 原文地址:https://www.cnblogs.com/xtreme/p/13215432.html
Copyright © 2020-2023  润新知