Docsify 簡易版文件管理系統

前言

你是否手頭上有不少文件、筆記需要整理託管呢?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/[email protected]/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/[email protected]/dist/docsify-katex.js"></script>
    <!-- or <script src="//cdn.jsdelivr.net/gh/upupming/docsify-[email protected]/dist/docsify-katex.js"></script> -->
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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