Docsify官网
Docsify支持Markdown,同时还可以生成封面页,还可以部署在github pages

开始

推荐全局安装 docsify-cli 工具,可以方便地创建及在本地预览生成的文档。

npm i docsify-cli -g

初始化项目

docsify init ./docs
如果想在根目录直接生成可docsify init

配置

  • index.html 入口文件
  • README.md 会做为主页内容渲染
  • .nojekyll 用于阻止 GitHub Pages 忽略掉下划线开头的文件
  • _coverpage.md 首页封面
  • _navbar.md 首页导航栏
  • _sidebar.md 左侧栏

    index.html 入口文件

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>SouFan笔记</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="Description">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <!--这个链接就是主题的选择-->
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
    </head>
    <body>
    <div id="app"></div>
    <script>
      window.$docsify = {
          search: 'auto', // 默认值
          name: 'SouFan笔记',
          //点击name对应的URL
          nameLink: '#/README',
          repo: 'https://github.com/wunaisoufan',
          coverpage: true, //启用封面页
          onlyCover: true, //只在访问主页时加载封面
          loadNavbar: true, //开启导航栏设置
          loadSidebar: true, // 加载自定义侧边栏
          maxLevel: 0, // 默认情况下会抓取文档中所有标题渲染成目录,可配置最大支持渲染的标题层级。
          subMaxLevel: 0, // 生成目录的最大层级
          mergeNavbar: true, // 小屏设备下合并导航栏到侧边栏
          alias: { // 定义路由别名,可以更自由的定义路由规则。 支持正则
              '/.*/_sidebar.md': '/_sidebar.md',//防止意外回退
              '/.*/_navbar.md': '/_navbar.md'
          },
          
          //全局搜索
          search: {
              paths: 'auto',
              placeholder: '搜索',
              noData: '找不到结果',
              depth: 3, //搜索的标题深度
          },
          auto2top: true,
          //代码一键复制
          copyCode: {
              buttonText: '复制',
              errorText: 'Error',
              successText: '复制成功'
          },
          //分页
          pagination: {
              previousText: '上一章节',
              nextText: '下一章节',
              crossChapter: true,
              crossChapterText: true,
          },
          //字数统计,需要引入js
          count:{
              countable:true,
              fontsize:'0.9em',
              color:'rgb(90,90,90)',
              language:'chinese'
          },
    
    
      }
    </script>
    <!-- Docsify v4 核心-->
    <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
    <!--不同代码的高亮-->
    <script src="//cdn.jsdelivr.net/npm/prismjs@1.22.0/components/prism-c.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/prismjs@1.22.0/components/prism-cpp.min.js"></script>
    <script src="//unpkg.com/prismjs/components/prism-bash.js"></script>
    <script src="//unpkg.com/prismjs/components/prism-java.js"></script>
    <script src="//unpkg.com/prismjs/components/prism-sql.js"></script>
    <script src="//unpkg.com/prismjs/components/prism-bash.js"></script>
    <script src="//unpkg.com/prismjs/components/prism-c.js"></script>
    <script src="//unpkg.com/prismjs@1.23.0/components.js"></script>
    <!--代码复制-->
    <script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
    <!--图片缩放-->
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
    <!--分页-->
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/docsify-pagination/dist/docsify-pagination.min.js"></script>
    <!--搜索-->
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
    <script src="//polyfill.io/v3/polyfill.min.js?features=String.prototype.normalize"></script>
    <!--字数统计-->
    <script src="//unpkg.com/docsify-count/dist/countable.js"></script>
    <!--emoji-->
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>
    
    <!--主题-->
    <!--<script src="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/js/docsify-themeable.min.js"></script>-->
    <!--卜蒜子访问统计-->
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <!-- Docsify v4 -->
    <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
        }
    </body>
    </html>

    Nginx的配置

    server {
    listen 80;
    server_name  你的域名;
    
    location / {
      alias 你的站点根目录;
      index index.html;
    }
    }

    可能会遇到的问题

    打开显示404,可能是Nginx设置禁止访问的文件或目录
    只需要删除掉README.md即可
    Docsify01.png

最后修改:2023 年 11 月 16 日
如果我的文章对你有用,请看心情帮助小站能存活下去( •̀ ω •́ )✧