撰風要介紹一款非常好用的本地端系統－－MkDocs。身為一個筆記控，我個人習慣把資料寫成筆記，我用過許多筆記軟體，但總覺得使用起來不夠彈性，也無法自訂成自己喜歡的樣子，直到我發現 MkDocs，深得我心。
MkDocs 是以 Markdown 語法為基礎的靜態網站設計工具，通常用來撰寫文件、操作手冊、知識庫，然後再將結構化的資料轉成 HTML 靜態網站，完成後可以放在本地端自己查看，也可以上傳到網路上或GitHub Pages上供人查詢。所以對於公司內的重要文件，我覺得 MkDocs 可以表現得非常稱職，不用放到網路上也能讓同事查看資料。
第一次聽到Markdown語法的初學者請不用緊張，Markdown 語法是非常容易上手且直覺的語法，如果你有一些 Notion、Wordpress、HTML 等經驗，學習難度非常非常低，但就算沒有經驗，我這裡也會整理一些常用的語法，多寫幾次就會了。
MkDocs 學習章節
- MkDocs 簡介
- 安裝方法
- 新增頁面
- 新增外掛
- 網站部署
MkDocs 簡介
MkDocs 是一個以Markdown為基礎的靜態網站產生器，專門設計來撰寫文件與筆記。它能將簡單的 Markdown 檔案轉換成結構化的網站，方便快速建立技術文件、操作手冊、知識庫、筆記本。
推薦理由
- 安裝簡單，幾分鐘就能建立一個新網站
- Markdown 語法簡單，幾乎沒有學習成本
- Material 主題外觀專業、支援行動裝置
- 適合技術筆記、知識管理、團隊文件、API 文件
安裝方法
如何安裝 MkDocs？
- 本文安裝將以 Visual Stuido Code 整合開發環境操作為例
- 安裝 Python 3.8 或以上的版本
自訂主題
如何自訂 MkDocs 主題？
- 內建多種佈景主題
- 可自訂 CSS / JavaScript 來改變版面設計
- 支援深色模式、配色調整
新增頁面
如何新增 MkDocs 網站頁面？
- 採用簡單的Markdown語法，專注於內容撰寫
- 支援標題、清單、表格、程式碼、數學公式
擴充功能
如何新增 MkDocs 網站擴充功能？
- pymdown-extensions：增強 Markdown 語法（提示框、標籤、程式碼高亮）
- MathJax / KaTeX：支援數學公式
- 插件（plugins）：例如全文搜尋、多語言支持
網站部署
如何部署 MkDocs 網站？
- 使用
mkdocs build生成 HTML 網站，輸出到site/資料夾 - 不需伺服器或資料庫，任何地方都能打開
- 可放到任何靜態網站伺服器
相關網站
相關文章
![[PlayCanvas] 滿版畫面設計 (VIVERSE World)](https://i1.wp.com/img.jfsblog.com/2026/01/20260111173300_0_7739d6.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[PlayCanvas] 滿版畫面設計 (VIVERSE World)")
![[PlayCanvas 筆記 06] VIVERSE Extension 使用方法－觸發效果 (Trigger & Actions)](https://i0.wp.com/img.jfsblog.com/2026/01/20260112232515_0_67f013.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[PlayCanvas 筆記 06] VIVERSE Extension 使用方法－觸發效果 (Trigger & Actions)")
![[PlayCanvas 筆記 04] VIVERSE Extension 使用方法－發布專案 (Publish)](https://i2.wp.com/img.jfsblog.com/2026/01/20260112232253_0_0b5cd1.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[PlayCanvas 筆記 04] VIVERSE Extension 使用方法－發布專案 (Publish)")
![[PlayCanvas 筆記 03] 如何為瀏覽器安裝 VIVERSE Extension 外掛](https://i1.wp.com/img.jfsblog.com/2026/01/20260112005243_0_efac5b.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[PlayCanvas 筆記 03] 如何為瀏覽器安裝 VIVERSE Extension 外掛")
![[PlayCanvas 筆記 01] 前置作業－環境與帳號](https://i2.wp.com/img.jfsblog.com/2026/01/20260112000122_0_4eee0a.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[PlayCanvas 筆記 01] 前置作業－環境與帳號")
![[PlayCanvas 筆記 02] Claude MCP Server 設定教學](https://i1.wp.com/img.jfsblog.com/2025/11/20251206160632_0_7ed12c.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[PlayCanvas 筆記 02] Claude MCP Server 設定教學")
![[PlayCanvas 筆記 05] VIVERSE Extension 使用方法－任務系統 (Quests)](https://i0.wp.com/img.jfsblog.com/2026/01/20260112232359_0_592e82.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[PlayCanvas 筆記 05] VIVERSE Extension 使用方法－任務系統 (Quests)")
