首頁

VitePress 預設佈景主題提供首頁版面配置，您也可以在此網站的首頁上看到。您可以在任何頁面上使用它，只要在頁面設定中指定 layout: home 即可。

yaml

---
layout: home
---

不過，單獨使用這個選項並不會產生什麼作用。您可以透過設定其他選項（例如 hero 和 features）來新增幾個不同的預設範本「區段」到首頁。

英雄區段

英雄區段出現在首頁的最上方。以下是設定英雄區段的方法。

yaml

---
layout: home

hero:
  name: VitePress
  text: Vite & Vue powered static site generator.
  tagline: Lorem ipsum...
  image:
    src: /logo.png
    alt: VitePress
  actions:
    - theme: brand
      text: Get Started
      link: /guide/what-is-vitepress
    - theme: alt
      text: View on GitHub
      link: https://github.com/vuejs/vitepress
---

interface Hero {
  // The string shown top of `text`. Comes with brand color
  // and expected to be short, such as product name.
  name?: string

  // The main text for the hero section. This will be defined
  // as `h1` tag.
  text: string

  // Tagline displayed below `text`.
  tagline?: string

  // The image is displayed next to the text and tagline area.
  image?: ThemeableImage

  // Action buttons to display in home hero section.
  actions?: HeroAction[]
}

type ThemeableImage =
  | string
  | { src: string; alt?: string }
  | { light: string; dark: string; alt?: string }

interface HeroAction {
  // Color theme of the button. Defaults to `brand`.
  theme?: 'brand' | 'alt'

  // Label of the button.
  text: string

  // Destination link of the button.
  link: string

  // Link target attribute.
  target?: string

  // Link rel attribute.
  rel?: string
}

自訂名稱顏色

VitePress 使用品牌顏色 (--vp-c-brand-1) 作為 name。不過，您可以透過覆寫 --vp-home-hero-name-color 變數來自訂這個顏色。

css

:root {
  --vp-home-hero-name-color: blue;
}

您也可以進一步自訂，結合 --vp-home-hero-name-background 來給予 name 漸層顏色。

css

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

功能區段

在功能區段中，您可以列出您想在英雄區段後顯示的任何數量功能。若要設定它，請將 features 選項傳遞到頁面設定。

您可以為每個功能提供一個圖示，它可以是表情符號或任何類型的圖片。當設定的圖示是圖片（svg、png、jpeg...）時，您必須提供適當寬度和高度的圖示；您也可以提供描述、其內在大小，以及在需要時提供深色和淺色佈景主題的變體。

yaml

---
layout: home

features:
  - icon: 🛠️
    title: Simple and minimal, always
    details: Lorem ipsum...
  - icon:
      src: /cool-feature-icon.svg
    title: Another cool feature
    details: Lorem ipsum...
  - icon:
      dark: /dark-feature-icon.svg
      light: /light-feature-icon.svg
    title: Another cool feature
    details: Lorem ipsum...
---

interface Feature {
  // Show icon on each feature box.
  icon?: FeatureIcon

  // Title of the feature.
  title: string

  // Details of the feature.
  details: string

  // Link when clicked on feature component. The link can
  // be both internal or external.
  //
  // e.g. `guide/reference/default-theme-home-page` or `https://example.com`
  link?: string

  // Link text to be shown inside feature component. Best
  // used with `link` option.
  //
  // e.g. `Learn more`, `Visit page`, etc.
  linkText?: string

  // Link rel attribute for the `link` option.
  //
  // e.g. `external`
  rel?: string

  // Link target attribute for the `link` option.
  target?: string
}

type FeatureIcon =
  | string
  | { src: string; alt?: string; width?: string; height: string }
  | {
      light: string
      dark: string
      alt?: string
      width?: string
      height: string
    }

Markdown 內容

您只要在 --- 頁面設定分隔線下方新增 Markdown，就能為您網站的首頁新增其他內容。

---
layout: home

hero:
  name: VitePress
  text: Vite & Vue powered static site generator.
---

## Getting Started

You can get started using VitePress right away using `npx`!

```sh
npm init
npx vitepress init
```

資訊

VitePress 並非總是自動設定 `layout: home` 頁面的額外內容樣式。若要回復到舊有行為，可以在 frontmatter 中加入 `markdownStyles: false`。

首頁 ​

英雄區段 ​

自訂名稱顏色 ​

功能區段 ​

Markdown 內容 ​

首頁

英雄區段

自訂名稱顏色

功能區段

Markdown 內容