基本参照官方文档部署

部署Docsify

基本上就是按照官方文档操作了

  • 全局安装docsify-cli工具
    ```bash npm i docsify-cli -g

ln -s /usr/local/temp/Node.js/bin/docsify /usr/bin/docsify

  2. -  初始化项目，选择自己喜欢的位置，最好就按照官方命令，方便以后操作  
  3. ```bash
  4. docsify init ./docs

配置说明

配置集中在index.html文件当中，这里摘取本文档所用到的插件进行分解解释

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  7.     <meta name="description" content="Description">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  9.     <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
  10.     <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.css">
  11. </head>
  12. <body>
  13.     <div id="app"></div>
  14.     <script>
  15.     //插件的配置都写在这里
  16.         window.$docsify = {
  17.             //图标
  18.             logo:'',
  20.             //整个网站的名字
  21.             name:'Dy\'s Doc',
  23.             //右上角github链接地址
  25.             repo:'https://github.com/JuemingDy',
  26.             // 导航栏，需要有_navbar.md文件
  27.             loadNavbar: true,
  29.             // 封面，需要有_coverpage.md文件
  30.             coverpage: true,
  32.             //侧边栏，需要有_sidebar.md文件
  33.             loadSidebar: true,
  35.             //开启侧边栏后不再自动生成目录，需要开启此项决定生成多少级
  36.             subMaxLevel: 2,
  38.             // 404页   
  39.             notFoundPage:'_404.md',
  41.             //代码复制插件
  42.             copyCode: {
  43.             buttonText : '点击复制',
  44.             errorText  : '发生错误',
  45.             successText: '已复制'
  46.             },
  48.             //谷歌统计，需要服务器能链接外网
  49.             //ga: 'UA-207767065-1',
  51.             //字数统计
  52.             count:{
  53.                 countable:true,
  54.                 fontsize:'0.9em',
  55.                 color:'rgb(90,90,90)',
  56.                 language:'chinese',
  57.             },
  59.             //搜索
  60.             search: 'auto',
  61.             search: {
  62.                 paths: '/',
  63.                 placeholder: '搜索',
  64.                 noData: '找不到结果',
  65.                 depth: 3,
  66.             },
  68.             //tab插件
  69.             tabs: {
  70.                 persist    : true,      // default
  71.                 sync       : true,      // default
  72.                 theme      : 'classic', // default
  73.                 tabComments: true,      // default
  74.                 tabHeadings: true       // default
  75.             },
  77.             //分页
  78.             /*
  79.             pagination: {
  80.                 previousText: '上一篇',
  81.                 nextText: '下一篇',
  82.                 crossChapter: true,
  83.                 crossChapterText: true,
  84.             },
  85.             */
  87.             //脚
  88.             footer: {
  89.                 copy: 'Copyright©2021 ,',
  90.                 auth: 'DyCloud',
  91.                 pre: '<hr>',
  92.                 style:'text-align: center;'
  93.             },
  95.         }
  96.     </script>
  97.     <!--cdn地址，按自己喜欢的选-->
  98.     <!--<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>-->
  99.     <!--<script src="//cdnjs.cloudflare.com/ajax/libs/docsify/4.11.2/docsify.min.js"></script>-->
  100.     <!--<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>-->
  102.     <!-- Docsify，不能少的 -->
  103.     <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
  105.     <!-- emoji -->
  106.     <script src="//unpkg.com/docsify/lib/plugins/emoji.min.js"></script>
  108.     <!-- 复制到剪贴板 -->
  109.     <script src="//unpkg.com/docsify-copy-code@"></script>
  111.     <!-- 图片缩放 -->
  112.     <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
  114.     <!-- 代码高亮 -->
  115.     <script src="//unpkg.com/prismjs/components/prism-bash.min.js"></script>
  116.     <script src="//unpkg.com/prismjs/components/prism-php.min.js"></script>
  118.     <!-- 谷歌统计 -->
  119.     <!--<script src="//unpkg.com/docsify/lib/plugins/ga.min.js"></script>-->
  121.     <!-- 字数统计 -->
  122.     <script src="//unpkg.com/docsify-count/dist/countable.js"></script>
  124.     <!-- 搜索 -->
  125.     <script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
  127.     <!-- 标签 -->
  128.     <script src="https://cdn.jsdelivr.net/npm/docsify-tabs@1"></script>
  130.     <!-- 分页 -->
  131.     <!--<script src="//unpkg.com/docsify-pagination/dist/docsify-pagination.min.js"></script>-->
  133.     <!-- 脚 -->
  134.     <script src="//unpkg.com/docsify-footer-enh/dist/docsify-footer-enh.min.js"></script>
  136.     <!-- git评论 -->
  137.     <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/gitalk.min.js"></script>
  138.     <script src="//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.js"></script>
  139.     <script>
  140.         var gitalk = new Gitalk({
  141.             clientID: '406162e419988e219faf',
  142.             clientSecret: '77ae615c44b9ab0c08b7e0ae097d0d11ae7bd9f0',
  143.             repo: 'Dy-s-Docsify',
  144.             owner: 'JuemingDy',
  145.             admin: ['JuemingDy'],
  146.             id: location.pathname,    
  148.             distractionFreeMode: true
  149.         })
  150.     </script>
  152.     <!-- 离线模式 -->
  153.     <script>
  154.         if (typeof navigator.serviceWorker !== 'undefined') {
  155.             navigator.serviceWorker.register('sw.js')
  156.         }
  157. </script>
  158. </body>
  160. </html>