vitepress

VitePress 是一個基於 Vite 和 Vue 3 的靜態網站產生器（SSG）。它接收 Markdown 內容，套用主題，並產生靜態 HTML，形成一個 SPA 以實現快速導覽。非常適合文件、部落格和行銷網站。

主要特色：

• 基於 .md 檔案的檔案路由
• Vue 元件可直接在 Markdown 中使用
• 快速 HMR，即時更新（<100ms）
• 預設主題針對文件最佳化
• 內建搜尋（本地或 Algolia）

在處理 VitePress 專案前：

• 檢查 .vitepress/config.ts 以設定網站
• 查看 .vitepress/theme/ 以自訂主題擴充
• public/ 目錄包含靜態資源，會原樣提供

此技能基於 VitePress 1.x，產生於 2026-01-28。

核心

主題	說明	參考
設定	設定檔、defineConfig、網站中繼資料	core-config
CLI	命令列介面：dev、build、preview、init	core-cli
路由	檔案路由、來源目錄、重寫規則	core-routing
Markdown	Frontmatter、容器、表格、錨點、包含	core-markdown

功能

程式碼與內容

主題	說明	參考
程式碼區塊	語法高亮、行高亮、差異、聚焦	features-code-blocks
Markdown 中的 Vue	元件、script setup、指令、模板	features-vue
資料載入	建置時資料載入器、createContentLoader	features-data-loading
動態路由	從資料產生頁面、路徑載入器檔案	features-dynamic-routes

主題

主題	說明	參考
主題設定	導覽列、側邊欄、搜尋、社交連結、頁尾	theme-config
自訂化	CSS 變數、插槽、字型、全域元件	theme-customization
自訂主題	從頭建立主題、主題介面	theme-custom

進階

主題	說明	參考
國際化	多語言網站、語系設定	advanced-i18n
SSR 相容性	伺服器端渲染、ClientOnly、動態匯入	advanced-ssr

食譜

主題	說明	參考
部署	GitHub Pages、Netlify、Vercel、Cloudflare、Nginx	recipes-deploy