[TOC] > [home](https://jingping-ye.github.io/docsify-docs-zh/) > [更多插件](https://docsify.js.org/#/awesome?id=plugins) ## 概述 Docsify 是一個輕量級的文檔網站生成器，不會生成靜態 html 文件，而是在運行時直接加載并解析 Markdown 文件。 **主要特點** * ?? 零配置，快速開始 * ?? 智能的全文搜索 * ?? 多個主題 * ?? 支持服務端渲染 SSR * ?? 豐富的插件系統 * ??兼容 IE11 * ?? 支持多語言 ## 插件 - 全文搜索 - 谷歌分析 - emoji - 外部腳本 - 放大圖片 - 每一頁添加 Edit on github 按鈕 - 嵌入 jsfiddle - 復制到剪貼板 - Disqus 評論 - 領英 - Gitalk - 翻頁插件 - 字數統計 ## 第三方插件 * [docsify-remote-markdown](https://github.com/JerryC8080/docsify-remote-markdown)\- 從遠程加載 markdown 文檔。[@JerryC](https://github.com/JerryC8080) * [docsify-plantuml](https://github.com/imyelo/docsify-plantuml)\- PlantUML for docsify @imyelo. [docsify-copy-code](https://github.com/jperasmus/docsify-copy-code)\- A docsify plugin that copies Markdown code block to your clipboard[@jperasmus](https://github.com/jperasmus). * [docsify-tabs](https://jhildenbiddle.github.io/docsify-tabs)\- 一個 docsify 插件，用于顯示 markdown （[@jhildenbiddle](https://github.com/jhildenbiddle/)） 中的選項卡式內容。 * [docsify-pdf-embed](https://github.com/lazypanda10117/docsify-pdf-embed)\- 用于將 PDF 嵌入任何頁面[@lazypanda10117](https://github.com/lazypanda10117)的 docsify 插件。 * [docsify-pdf-converter](https://github.com/meff34/docsify-to-pdf-converter)\- 根據您的 docsify 項目[@meff34](https://github.com/meff34)創建 PDF 文件。 * [docsify-toc](https://github.com/mrpotatoes/docsify-toc)\- 向您的網站添加`目錄`。[@mrpotatoes](https://github.com/mrpotatoes)。 * [docsify-changelog-plugin](https://github.com/anikethsaha/docsify-plugin/tree/master/packages/docsify-changelog-plugin)\- 將您的更改日志集成到一個 sweet 面板中。 * [docsify-top-bannner-plugin](https://github.com/anikethsaha/docsify-plugin/tree/master/packages/docsify-top-banner-plugin)\- 在頂部添加一個簡單而甜美的橫幅，以宣布某事。 * [docsify-dark-mode](https://github.com/anikethsaha/docsify-plugin/tree/master/packages/docsify-dark-mode)\- 在 docsify 站點中添加暗模式支持。 * [docsify-progress](https://github.com/HerbertHe/docsify-progress)\- 一個在 docsify 中呈現閱讀進度的插件。@HerbertHe。 * [docsify-charty](https://github.com/markbattistella/docsify-charty)\- 向 docsify 網站添加一些圖表和圖形。餅圖、圓環圖、截面圖、條形圖和柱形圖、折線圖和繪圖以及評論塊。如果您需要可視化一些數字，應有盡有！ ## 支持的主題 ``` // 未壓縮 <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css"> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/buble.css"> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dark.css"> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/pure.css"> // 壓縮 <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css"> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/buble.css"> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/dark.css"> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/pure.css"> ``` **第三方主題** * [docsify-darklight-theme](https://github.com/boopathikumar018/docsify-darklight-theme)- 這是一個簡單且高度可定制的 docsify.js 主題。使用此主題，文檔將具有主題切換器，用于在`深色模式`和`淺色模式`之間切換。在此處查看[預覽](https://docsify-darklight-theme.boopathikumar.me/)。[@boopathikumar](https://boopathikumar.me/)。 * [?? docsify-theme-github](https://github.com/LIGMATV/docsify-theme-github)\- 復制 GitHub Markdown 樣式的最小 CSS 量。[預覽](https://docsify-theme-github.vercel.app/)~[@LIGMATV](https://github.com/LIGMATV)。 ## 快速入門 ### 初始化 ``` docsify init docs ``` 目錄結構 ``` |—— docs |—— index.html 入口 |—— README.md 主頁 |—— .nojekyll 防止Github忽視下劃線開頭文件 ``` 運行 ``` docsify serve /or php -S 127.0.0.1:1234 ``` ### 添加頁面 ``` |—— docs |-- REAMD.md |-- 自定義.md |-- 指導文檔 |-- READMD.md |-- 部署.md ``` 添加側邊欄 _sidebar.md ``` - [首頁](/) - [快速入門](快速入門.md) ``` 配置 ``` <!-- index.html --> <script> window.$docsify = { loadSidebar: true, }; </script> <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script> ``` 為標簽設置標題 -sidebar.md ``` - [首頁](/) - [快速入門](快速入門.md "從這里開始") ``` 從這里開始會出現在頁面中 ### 頂部導航欄 index.html ``` <script> window.$docsify = { loadNavbar: true, }; </script> ``` _navbar ``` - [百度](https://www.baidu.com) - 經典文檔 - [快速入門](/快速入門.md) - [:cn:](/自定義導航欄.md) ``` ### 添加封面 index.html ``` window.$docsify = { coverpage: true, onlyCover: true, // false: 下拉顯示文檔, true=跳轉顯示文檔 }; ``` _coverpage.md ``` # docsify 中文文檔 <small>1.0</small> > 快速文檔生成器 - 簡單輕量（21kB） - 無需靜態構建 - 主題豐富 [GitHub](https://github.com/docsifyjs/docsify/) [快速上手](/快速上手/開始) ``` **自定義背景圖片** _coverpage.md ``` <!-- 背景 --> <!----> <!-- 背景顏色 -->  ```