Skip to content

建立 2026-09-15 更新 2026-09-15

首頁版型

預設主題提供專門的首頁版型：大標題、行動按鈕、功能卡片。在 index.md 的 frontmatter 寫 layout: home 就會啟用。只開 layout 而沒填 hero，畫面會幾乎是空的。

官方參考：〈主頁〉。

Hero

---
layout: home

hero:
  name: VitePress
  text: 由 Vite 與 Vue 驅動的靜態網站產生器
  tagline: 用 Markdown 在幾分鐘內做出文件站
  actions:
    - theme: brand
      text: 快速開始
      link: /guide/getting-started
    - theme: alt
      text: GitHub
      link: https://github.com/vuejs/vitepress
---
  • name：產品名，預設用品牌色。
  • text：主標，會渲染成該頁的 h1。
  • tagline：一句話說明。
  • actions：brand 是主按鈕、alt 是次按鈕。
  • image（可選）：放在文字旁的 logo。

品牌色可用 CSS 變數覆寫，例如漸層：

:root {
  --vp-home-hero-name-color: transparent;
  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe, #41d1ff);
}

Features

Hero 下方可列任意張卡片：

features:
  - icon: 🛠️
    title: 專注寫內容
    details: 用 Markdown 就能產出完整文件站。
    link: /guide/markdown
    linkText: 了解 Markdown
  - icon: 🚀
    title: Vite 開發體驗
    details: 開發伺服器啟動快，存檔幾乎立刻更新。

icon 可以是 emoji 或圖片路徑；卡片可選加 link 讓整張可點。

首頁還能再寫 Markdown

--- 結束後仍可接一般 Markdown（公告、最新文章列表）。預設主題不一定會幫這段套上跟文件頁完全相同的內文樣式；若要改回舊行為，可在 frontmatter 加 markdownStyles: false。

文件內頁不要用 layout: home，否則會失去側欄與正文閱讀版型。