zoukankan      html  css  js  c++  java
  • 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>

      

  • 相关阅读:
    js压缩上传图片
    理解clientWidth,offsetWidth,clientLeft,offsetLeft,clientX,offsetX,pageX,screenX
    图片转换成base64预览
    用mint ui去实现滚动选择日期并可以关闭拾取器
    CSS制作波浪线
    vue实现星级评价效果
    Intellij IDEA 安装lombok及使用详解
    Linux常用命令
    SpringBoot集成MyBatisPlus
    SpringBoot集成MyBatisPlus
  • 原文地址:https://www.cnblogs.com/xtreme/p/13215432.html
Copyright © 2011-2022 走看看