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>

      

  • 相关阅读:
    Codeforces Round #481 (Div. 3)题解
    陕西师范大学第七届程序设计竞赛网络同步赛题解
    Codeforces Round #479 (Div. 3)题解
    2018年北京信息科技大学第十届程序设计竞赛暨ACM选拔赛题解
    江西财经大学第一届程序设计竞赛题解
    2018年湘潭大学程序设计竞赛G又见斐波那契
    2018年长沙理工大学第十三届程序设计竞赛题解
    JDBC连接SQL server2014代码
    数据定义伪指令语句
    JDBC连接数据库
  • 原文地址:https://www.cnblogs.com/xtreme/p/13215432.html
Copyright © 2011-2022 走看看