跳轉到

Mkdocs 主題推薦

選對主題可以讓你的筆記從「純文字檔案」瞬間升級為「專業技術文件」。MkDocs 的主題生態系非常成熟,以下是目前主流的選擇評測。

MkDocs 主題列表

主題 安裝指令 配置文件配置 (theme.name) 說明 / 現況
Bootstrap 內建,無需安裝 bootstrap 預設 / 經典 Bootstrap 風格
Material for MkDocs pip install mkdocs-material material 推薦!功能最強大的標竿主題,不過已於 2025 年 11 月進入唯讀與純維護模式,並且推出了自己的靜態網站產生器 Zensical(全面相容 MkDocs 1.x)
MaterialX pip install mkdocs-materialx materialx 基於 Material 的延伸版,為了不想搬遷至 Zensical 的用戶,此專案直接承接並延伸 Material 主題的開發與客製功能。
ReadTheDocs-Dropdown pip install mkdocs-rtd-dropdown rtd-dropdown 基於內建 readthedocs 主題修改的導覽列下拉版本
Windmill pip install mkdocs-windmill windmill 適合大型文件的雙欄式(專注導覽列)經典主題
Windmill Dark pip install mkdocs-windmill-dark windmill-dark Windmill 主題 transition 出來的暗黑版本
Cluster pip install mkdocs-cluster cluster 乾淨、多層次導覽的傳統主題
Cinder pip install mkdocs-cinder cinder 基於 Bootstrap 3 的乾淨、簡約風格主題
Bootswatch pip install mkdocs-bootswatch yeti, flatly(註1) 內含多款 Bootswatch 經典樣式(如 Flatly, Slate 等)
Bootstrap386 pip install mkdocs-bootstrap386 bootstrap386 復古 80 年代 DOS/BBS 電腦風格主題
Bootstrap4 pip install mkdocs-bootstrap4 bootstrap4 升級至 Bootstrap 4 核心的基礎主題
GitBook Theme pip install mkdocs-gitbook gitbook 模仿知名平台 GitBook 風格的簡約主題
Ivory Theme pip install mkdocs-ivory ivory 非常極簡、以大量留白為主的優雅主題
Simple Blog pip install mkdocs-simple-blog simple-blog 將 MkDocs 轉化為網誌(Blog)形式的特殊主題
Terminal for MkDocs pip install mkdocs-terminal terminal 針對程式設計師設計,極簡的 Linux 終端機模擬風格

注意事項與建議

  • 註1:安裝 mkdocs-bootswatch 後,你的 theme.name 不是填寫 bootswatch,而是直接填寫你想要的樣式名稱,例如 name: flatlyname: yeti

如何安裝與啟用

以安裝 Material for MkDocs 為例

  1. 安裝:在終端機中輸入

    pip install mkdocs-material
    
  2. 配置:接著在 mkdocs.yml 中修改設定:

    theme:
    name: material
    
  3. 配色:你可以透過簡單的 YAML 語法調整配色與功能

    theme:
    name: material
    language: zh-Hant      # 設定為繁體中文介面
    palette:
        - media: "(prefers-color-scheme: light)"
        scheme: default
        primary: indigo    # 主色調
        accent: indigo     # 強調色
        toggle:
            icon: material/weather-sunny
            name: 切換至深色模式
        - media: "(prefers-color-scheme: dark)"
        scheme: slate
        primary: indigo
        accent: indigo
        toggle:
            icon: material/weather-night
            name: 切換至淺色模式
    features:
        - navigation.tabs    # 將選單改為頂部頁籤
        - navigation.top     # 顯示「回到頂部」按鈕
        - search.suggest     # 搜尋時自動顯示建議內容
        - search.highlight   # 高亮搜尋關鍵字
    

主題挑選建議

  1. 適應性:Material 主題在手機與平板上的選單收納做得非常好,這對於通勤時閱讀筆記非常重要。
  2. 穩定度:建議選擇 indigo (靛藍) 或 teal (藍綠) 等對眼睛負擔較小的顏色。
  3. 擴充性:Material 主題支援非常多額外的 Plugin(如圖表、數學公式),如果你未來有進階需求,選它能省下很多換主題的麻煩。