ホームページ

VitePress のデフォルトのテーマはホームページのレイアウトを提供します。このレイアウトは このサイトのホームページ にも使用されています。layout: home を フロントマター で指定することで、任意のページで使用できます。

---
layout: home
---

ただし、それだけではあまり役に立ちません。hero や features などの追加オプションを設定することで、ホームページに複数の事前テンプレート化された「セクション」を追加できます。

ヒーローセクション

ヒーローセクションはホームページの一番上に表示されます。以下に、ヒーローセクションを設定する方法を示します。

---
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 は name にブランドカラー (--vp-c-brand-1) を使用します。ただし、--vp-home-hero-name-color 変数をオーバーライドすることで、この色をカスタマイズできます。

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

さらに、--vp-home-hero-name-background を組み合わせることでさらにカスタマイズし、name にグラデーションカラーを付けることもできます。

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

特徴セクション

特徴セクションでは、ヒーローセクションの直後に表示する任意の数の特徴をリストできます。設定するには、features オプションをフロントマターに渡します。

各特徴にアイコンを提供できます。アイコンは絵文字または任意のタイプの画像です。設定されたアイコンが画像 (svg、png、jpeg など) の場合、アイコンを適切な幅と高さで指定する必要があります。また、必要に応じて説明、本質的なサイズ、およびダークおよびライトテーマのバリエーションも指定できます。

---
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
    }

マークダウンコンテンツ

--- フロントマターの区切り線の後にマークダウンを追加するだけで、サイトのホームページにコンテンツを追加できます。

---
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 ページの追加コンテンツを自動的にスタイル付けしません。以前の動作に戻すには、markdownStyles: false をフロントマターに追加します。