前言
你是否手頭上有不少文件、筆記需要整理託管呢？Docsify 超簡單安裝過程，不需另外安裝後端套件，因此可以輕鬆部署在任意環境上。
此套件支援多語言切換、採用 Markdown 寫作、內建搜尋功能、支援佈景替換，而設定方式是筆者目前看過最容易的，沒有之一。
如何安裝
你可以用 npm 去裝，但那太麻煩，直接在目錄底下放置一個 index.html 檔案就好。
底下是我採用的，你可以直接貼上：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JackKuo's Note</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css">
</head>
<body>
<div id="app"></div>
<script>
window.$docsify = {
name: 'JackKuo 筆記',
loadSidebar: true,
subMaxLevel: 2
}
</script>
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
<!-- CDN files for docsify-katex -->
<script src="//cdn.jsdelivr.net/npm/docsify-katex@latest/dist/docsify-katex.js"></script>
<!-- or <script src="//cdn.jsdelivr.net/gh/upupming/docsify-katex@latest/dist/docsify-katex.js"></script> -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css" />
<script src="//unpkg.com/docsify/lib/plugins/search.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/zoom-image.min.js"></script>
<script src="//unpkg.com/docsify-copy-code"></script>
<script src="//cdn.jsdelivr.net/npm/docsify-prism@latest/dist/docsify-prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/plugins/autoloader/prism-autoloader.min.js"></script>
</body>
</html>
在建立一些文件後，你的目錄會長的像是這樣
--index.html
--README.md
--_sidebar.md
--AAAA.md
--K8S
|
--day1.md
--day2.md
--README.md
--_sidebar.md
--BBB.md
建議每層目錄底下都要有兩個檔案：README.md 與 _sidebar.md
在 K8S 資料夾中，_sidebar.md 可以長這樣：
**K8S**
- [Day1](K8S/day1.md)
- [Day1](K8S/day2)
在 根目錄底下的 _sidebar.md 可以長這樣：
**首頁**
- [K8S](K8S/)
- [AAA](AAA)
- [BBB](BBB)
至於 README 裡面要打什麼都行，別留空白就好。
結束，就這樣而已 :)
另外，官方有提供一些外掛可以使用，使用上也很方便。
如何啟用
這套件需要搭配網頁伺服器：
- 在 Windows 底下常見的有 XAMPP, Appserv 等等。
- 在 macOS 底下，有內建在 /Library/WebServer/Documents
或是，可以透過 python3 -m http.server 達到在該目錄下啟動一個臨時的靜態網頁伺服器。
這裡有各種一鍵啟動靜態網頁伺服器方式，滿有趣的～
題外話： Nginx 開啟密碼訪問：教學對網頁啟用密碼驗證
comments powered by Disqus