Skip to content

Home Page

VitePress 默认主题提供了一个Home Page布局,你也可以在这个网站的首页上看到它的使用。你可以在你的任何页面上使用它,只要在frontmatter中指定layout: home

layout: home


Hero Section

Hero Section位于首页的顶部。下面是你如何配置Hero Section的方法。

layout: home
  name: VitePress
  text: Vite & Vue powered static site generator.
  tagline: Lorem ipsum...
    src: /logo.png
    alt: VitePress
    - theme: brand
      text: Get Started
      link: /guide/what-is-vitepress
    - theme: alt
      text: View on GitHub
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
  // Action buttons to display in home hero section.
  actions?: HeroAction[]
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

自定义 name 属性的 color


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


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

Features Section

Features Section,你可以在Hero Section之后列出你想要显示的任何数量的feature。请将features选项传递给frontmatter来要配置它。

layout: home
  - icon: ⚡️
    title: Vite, The DX that can't be beat
    details: Lorem ipsum...
  - icon: 🖖
    title: Power of Vue meets Markdown
    details: Lorem ipsum...
  - icon: 🛠️
    title: Simple and minimal, always
    details: Lorem ipsum...
interface Feature {
  // Show icon on each feature box. Currently, only emojis
  // are supported.
  icon?: string
  // Title of the feature.
  title: string
  // Details of the feature.
  details: string