docsify 是一款以 JavaScript 為基礎的輕量級文件網站生成工具，專為開發者和技術團隊設計，讓你能夠快速將 Markdown 文件轉換為即時渲染的網站。與傳統的靜態網站生成器如 GitBook 或 Hexo 不同，Docsify 採用「即時渲染」的方式，無需預先編譯 HTML 文件，讓文件更新更加即時且靈活。

docsify 的核心特色

  • 即時渲染：docsify 在瀏覽器端動態解析 Markdown 文件，無需事先生成靜態 HTML 檔案，讓內容更新更為即時。

  • 輕量且快速：核心程式碼壓縮後僅約 21KB，載入速度快，適合部署在 GitHub Pages、Gitee Pages 或任何靜態伺服器上。

  • 高度自訂化：支援自訂封面（_coverpage.md）、側邊欄（_sidebar.md）、導覽列（_navbar.md）等，方便打造符合品牌風格的文件網站。

  • 豐富的外掛支援：提供全文搜索、Emoji 表情、主題切換等多種插件，提升使用者體驗。

  • 多語系支援：可輕鬆建立多語系文件結構，適合國際化團隊使用。

  • 相容性佳：支援 IE11 以上的瀏覽器，並可搭配服務端渲染（SSR）使用。

以下則是官方展示的一些使用該套件的網站：

  • styled-wind - A magical implementation of tailwind-like classnames into styled-components.
  • pyecharts - Documentation for pyecharts. A Python Echarts Plotting Library.
  • gallery-pyecharts - A Data Visualization Gallery Based on pyecharts.
  • Posthtml - Documentation for PostHTML, a tool to transform HTML/XML with JS plugins.
  • Explore Wanchain - Documentation for Wanchain, a blockchain with smart contracts, private transactions, and cross-chain features.
  • Laravel SweetAlert2 - Documentation for Laravel SweetAlert2, A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes for Laravel.
  • Security List - A series of personal cyber security tools, resources and checklists.
  • Snipaste - Snip & Paste.

 

 

可以透過 npm 安裝

npm i docsify-cli -g

 

或是使用以下樣板開始

<!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" href="//cdn.jsdelivr.net/npm/docsify@4/themes/vue.css" />
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      //...
    }
  </script>
  <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
</body>
</html>