主页

VitePress 默认主题提供了一个主页布局，你也可以在此站点的主页上看到它。你可以通过在任何页面的 frontmatter 中指定 layout: home 来使用它。

---
layout: home
---

但是，仅此选项不会做太多事情。你可以通过设置其他选项（如 hero 和 features）向主页添加几个不同的预模板化"部分"。

Hero 部分

Hero 部分位于主页的顶部。以下是如何配置 Hero 的方法。

---
layout: home

hero:
  name: VitePress
  text: Vite & Vue powered static site generator.
  tagline: Lorem ipsum...
  image:
    src: /logo.svg
    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 {
  // `text` 上显示的字符串。带有品牌颜色
  // 并且预期简短，例如项目名称。
  name?: string

  // hero 的文本。这将被定义为 `h1` 标签。
  text: string

  // tagline 显示在 `text` 下方。
  tagline?: string

  // 在 hero 部分显示的图像。
  image?: ThemeableImage

  // 在 hero 部分显示的操作按钮。
  actions?: HeroAction[]
}

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

interface HeroAction {
  // 按钮的颜色主题。默认为 `brand`。
  theme?: 'brand' | 'alt'

  // 按钮的标签。
  text: string

  // 按钮的目标链接。
  link: string

  // 链接的目标属性。
  target?: string

  // 链接的 rel 属性。
  rel?: string
}

自定义 name 颜色

你可以通过覆盖 --vp-c-brand-1 变量来自定义 name 的颜色。

:root {
  --vp-c-brand-1: #646cff;
}

自定义 actions 样式

你可以通过覆盖 --vp-c-brand-* 变量来自定义操作按钮的样式。

:root {
  --vp-c-brand-1: #646cff;
  --vp-c-brand-2: #747bff;
}

Features 部分

在 Features 部分，你可以在 Hero 部分之后列出任意数量的功能。要配置它，请将 features 选项传递给 frontmatter。

你可以为每个功能提供图标，可以是表情符号或任何类型的图像。当配置的图标是图像（svg、png、jpeg...）时，你必须提供具有适当宽度和高度的图标；你还可以在需要时配置描述、其固有大小以及深色和浅色主题的变体。

---
layout: home

features:
  - icon: 📝
    title: Focus on Your Content
    details: Effortlessly create beautiful documentation sites with just markdown.
  - 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 {
  // 在每个功能框中显示图标。
  icon?: FeatureIcon

  // 功能的标题。
  title: string

  // 功能的详细信息。
  details: string

  // 单击功能组件时要导航到的链接。链接可以是内部链接，也可以是外部链接。
  //
  // 例如 `guide/reference/default-theme-home-page` 或 `https://example.com`
  link?: string

  // 功能组件内显示的链接文本。最好与 `link` 选项一起使用。
  //
  // 例如 `Learn more`、`Visit page` 等。
  linkText?: string

  // 链接的 rel 属性。例如 `external`
  rel?: string

  // 链接的 target 属性。
  target?: string
}

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