docsify輕量級(jí)文檔系統(tǒng)

root安裝

推薦安裝 docsify-cli 工具，可以方便創(chuàng)建及本地預(yù)覽文檔網(wǎng)站。

npm i docsify-cli -g

普通用戶下初始化項(xiàng)目

如果想在項(xiàng)目的 ./docs 目錄里寫文檔，直接通過 init 初始化項(xiàng)目。

docsify init ./docs

開始寫文檔

初始化成功后，可以看到 ./docs 目錄下創(chuàng)建的幾個(gè)文件

index.html 入口文件
README.md 會(huì)做為主頁(yè)內(nèi)容渲染
.nojekyll 用于阻止 GitHub Pages 會(huì)忽略掉下劃線開頭的文件

直接編輯 docs/README.md 就能更新網(wǎng)站內(nèi)容，當(dāng)然也可以寫多個(gè)頁(yè)面。

本地預(yù)覽網(wǎng)站

運(yùn)行一個(gè)本地服務(wù)器通過 docsify serve 可以方便的預(yù)覽效果，而且提供 LiveReload 功能，可以讓實(shí)時(shí)的預(yù)覽。默認(rèn)訪問 http://localhost:3000 。

docsify serve docs

如果需要啟動(dòng)其他端口，可以直接在后面增加-p 4000表示啟動(dòng)端口為4000

更多命令行工具用法，參考 docsify-cli 文檔。

手動(dòng)初始化

如果不喜歡 npm 或者覺得安裝工具太麻煩，我們其實(shí)只需要直接創(chuàng)建一個(gè) index.html 文件。

index.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta charset="UTF-8">
  <link rel="stylesheet" >
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      //...
    }
  </script>
  <script src="http://unpkg.com/docsify/lib/docsify.min.js"></script>
</body>
</html>

更多文檔說(shuō)明

請(qǐng)?jiān)L問 docsify輕量級(jí)文檔 的中文文檔頁(yè)面進(jìn)行閱讀。

附錄

我的目錄結(jié)構(gòu)

.
├── README.md
├── _sidebar.md              -- 目錄索引
├── assets
│   ├── docsify.min.js       -- 從官網(wǎng)拉取下來(lái)的js
│   ├── theme-custom.css     -- 自定義的樣式
│   └── theme-simple.css     -- 從官網(wǎng)拉取下來(lái)主題樣式，修改過的本地css
├── index.html               -- 入口頁(yè)面
├── start.sh                 -- 啟動(dòng)腳本
└── documents          --存放markdown文檔的目錄

我的index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="Description">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

  <!-- Theme: Simple -->
  <!--
  <link rel="stylesheet" >
  -->
  <link rel="stylesheet" href="assets/theme-simple.css">

  <!-- Custom theme stylesheet -->
  <link rel="stylesheet" href="assets/theme-custom.css">


  <style>
        nav.app-nav li ul {
            min-width: 100px;
        }

  </style>
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      //定義路由別名，可以更自由的定義路由規(guī)則。 支持正則。
      alias: {
            '/.*/_sidebar.md': '/_sidebar.md'
      },
      // 加載 _sidebar.md,加載自定義側(cè)邊欄
      loadSidebar: true,
      //加載自定義導(dǎo)航欄
      loadNavbar: false,
      // 強(qiáng)制懸停,切換頁(yè)面后是否自動(dòng)跳轉(zhuǎn)到頁(yè)面頂部。
      auto2top: true,
      // 調(diào)整副標(biāo)題的級(jí)數(shù)
      subMaxLevel: 2,
      // 替換主題色
      themeColor: '#4CAF50',
      themeable: {
          readyTransition : true, // default
          responsiveTables: true  // default
      },

      showLevel: true,
      //文檔標(biāo)題，會(huì)顯示在側(cè)邊欄頂部。
      name: '',
      //配置倉(cāng)庫(kù)地址或者 username/repo 的字符串，會(huì)在頁(yè)面右上角渲染一個(gè) GitHub Corner 掛件。
      repo: '',
      //禁用 emoji 解析
      noEmoji: true,
      tocLevel: 6,
      //搜索配置項(xiàng)
      search: {
        maxAge: 86400000, // 過期時(shí)間，單位毫秒，默認(rèn)一天
        paths: 'auto', // or 'auto'
        placeholder: '搜索',
        noData: '找不到結(jié)果',
        // 搜索標(biāo)題的最大程級(jí), 1 - 6
        depth: 4
      },
      pagination: {
        previousText: '上一章節(jié)',
        nextText: '下一章節(jié)',
      }

    }
  </script>

  <script src="http://unpkg.com/docsify/lib/docsify.min.js"></script>
  <script src="http://unpkg.com/docsify/lib/plugins/search.min.js"></script>
  <script src="http://unpkg.com/docsify-pagination/dist/docsify-pagination.min.js"></script>
  <script src="http://unpkg.com/docsify-copy-code"></script>
  <script src="http://unpkg.com/prismjs/components/prism-sql.min.js"></script>
  <script src="http://unpkg.com/prismjs/components/prism-http.min.js"></script>
  <script src="http://unpkg.com/prismjs/components/prism-json.min.js"></script>
  <script src="http://unpkg.com/prismjs/components/prism-bash.min.js"></script>
  <script src="http://unpkg.com/prismjs/components/prism-java.min.js"></script>
  <script src="http://unpkg.com/prismjs/components/prism-markdown.min.js"></script>
  <script src="http://unpkg.com/prismjs/components/prism-nginx.min.js"></script>
  <script src="http://unpkg.com/prismjs/components/prism-php.min.js"></script>
  <script src="http://unpkg.com/prismjs/components/prism-python.min.js"></script>
  <script src="http://unpkg.com/docsify-pagination/dist/docsify-pagination.min.js"></script>

  <!-- docsify-themeable -->
  <script src="https://unpkg.com/docsify-themeable"></script>


</body>
</html>

編寫側(cè)邊欄

$ cat _sidebar.md
* [首頁(yè)](firstpage.md)

* [環(huán)境管理](環(huán)境管理/README.md)
  - [測(cè)試環(huán)境地址](環(huán)境管理/測(cè)試環(huán)境地址.md)
  - [聯(lián)調(diào)環(huán)境地址](環(huán)境管理/聯(lián)調(diào)環(huán)境地址.md)

其中：

  1. []對(duì)應(yīng)是左側(cè)菜單的名字
  2. ()對(duì)應(yīng)是實(shí)體文件的相對(duì)路徑。請(qǐng)確保路徑正確，如果文件或者文件夾不存在，點(diǎn)擊菜單會(huì)報(bào)錯(cuò)。
  3. 注意-格式對(duì)齊，這個(gè)是二級(jí)標(biāo)題
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
禁止轉(zhuǎn)載，如需轉(zhuǎn)載請(qǐng)通過簡(jiǎn)信或評(píng)論聯(lián)系作者。

友情鏈接更多精彩內(nèi)容