docsify乙個神奇的文件生成工具

在開發專案時，我們或許需要乙份精緻的開發文件，那麼使用docsify是不錯的選擇，docsify是乙個文件生成工具，它直接載入 markdown 檔案並動態渲染，同時還可以生成封面頁。所以我們只需要寫完 markdown 文件，就可以看到文件頁面了。

特性無需構建無需編譯，寫完markdown文件直接發布

容易使用並且輕量 (~18kb gzipped)

智慧型的全文搜尋

提供多套主題

豐富的 api

支援 emoji

相容 ie10+

支援 ssr (example)

快速上手

我們直接建立乙個index.html檔案。

html
>
.css
">
head>
>
window.$docsify = 
script>
">script>
body>
html>

# title ## balabala

如果你系統安裝了web伺服器的話，直接執行web服務，比如我使用php，命令列直接啟動web服務。

php -s localhost:3000

然後直接在瀏覽器開啟localhost:3000，就可以看到基本的網頁框架了。接下來我們就需要寫文件了。

當然你也可以直接把構建好的文件放到你的web伺服器上，比如nginx、apache或者iis上預覽。

我們也可以安裝官方提供的docsify-cli工具，可以方便建立及本地預覽文件**。

npm i docsify-cli -g docsify init ./docs

docsify serve docs

docsify提供 livereload 功能，可以讓實時的預覽，預設訪問localhost:3000。

多頁面readme.md作為主頁面，如果需要建立多個頁面，或者需要多級路由的**，在 docsify 裡也能很容易的實現。直接在文件目錄下建立對應的 *.md 檔案，例如建立乙個guide.md那麼對應的路由就是/guide。

假設你的目錄結構如下：

-| docs/
-| readme.md
-| guide.md
-| zh-cn/
-| readme.md
-| guide.md

那麼對應的訪問頁面將是:

docs/readme.md        => 
docs/guide.md => /guide
docs/zh-cn/readme.md => /zh-cn/
docs/zh-cn/guide.md => /zh-cn/guide

定製側邊欄

預設情況下，側邊欄會根據當前文件的標題生成目錄。也可以設定文件鏈結，通過 markdown 檔案生成，效果如當前的文件的側邊欄。

首先配置loadsidebar選項。

window.$docsify = 
script>
script>

接著建立 _sidebar.md 檔案，內容如下

- [安裝](install.md)
- [介紹](guide.md)

資源搜尋**大全

廣州vi設計公司

主題目前提供三套主題可供選擇，模仿 vue 和 buble 官網訂製的主題樣式。還有 @liril-net 貢獻的黑色風格的主題。直接修改index.html中的css鏈結即可。

全文搜尋

docsify支援全文搜尋，docsify會根據當前頁面上的超連結獲取文件內容，在 localstorage 內建立文件索引。預設過期時間為一天，當然我們可以自己指定需要快取的檔案列表或者配置過期時間。

window.$docsify = 
}script>
script>
">script>

執行後，我們在頁面的左上角會有乙個搜尋框，支援全文搜尋的。