Docsify 簡易版文件管理系統

Jack Kuo
5 min readFeb 7, 2020

前言

好讀版:https://jackkuo.org/post/docsify_tutorial/

你是否手頭上有不少文件、筆記需要整理託管呢?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 開啟密碼訪問:教學對網頁啟用密碼驗證

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Jack Kuo
Jack Kuo

Written by Jack Kuo

Software Engineer at MediaTek

No responses yet

Write a response