|
|
# ホームページ {#home-page}
|
|
|
|
|
|
VitePress のデフォルトテーマにはホームページ用レイアウトが用意されています（[このサイトのトップページ](../) でも使われています）。[フロントマター](./frontmatter-config) に `layout: home` を指定すれば、任意のページで利用できます。
|
|
|
|
|
|
```yaml
|
|
|
---
|
|
|
layout: home
|
|
|
---
|
|
|
```
|
|
|
|
|
|
ただし、この指定だけでは多くのことは起きません。`hero` や `features` などの追加オプションを設定して、ホームページにあらかじめ用意された複数の「セクション」を配置できます。
|
|
|
|
|
|
## ヒーローセクション {#hero-section}
|
|
|
|
|
|
ヒーローセクションはホームページの最上部に表示されます。設定例は次のとおりです。
|
|
|
|
|
|
```yaml
|
|
|
---
|
|
|
layout: home
|
|
|
|
|
|
hero:
|
|
|
name: VitePress
|
|
|
text: Vite & Vue powered static site generator.
|
|
|
tagline: 概要テキスト...
|
|
|
image:
|
|
|
src: /logo.png
|
|
|
alt: VitePress
|
|
|
actions:
|
|
|
- theme: brand
|
|
|
text: はじめる
|
|
|
link: /guide/what-is-vitepress
|
|
|
- theme: alt
|
|
|
text: GitHub で見る
|
|
|
link: https://github.com/vuejs/vitepress
|
|
|
---
|
|
|
```
|
|
|
|
|
|
```ts
|
|
|
interface Hero {
|
|
|
// `text` の上に表示される短い文字列。ブランドカラーで表示。
|
|
|
// 製品名のような短い文言を想定。
|
|
|
name?: string
|
|
|
|
|
|
// ヒーローセクションのメインテキスト。`h1` として出力。
|
|
|
text: string
|
|
|
|
|
|
// `text` の下に表示されるタグライン。
|
|
|
tagline?: string
|
|
|
|
|
|
// テキストとタグラインの横に表示する画像。
|
|
|
image?: ThemeableImage
|
|
|
|
|
|
// ヒーローに表示するアクションボタン。
|
|
|
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
|
|
|
|
|
|
// a 要素の target 属性。
|
|
|
target?: string
|
|
|
|
|
|
// a 要素の rel 属性。
|
|
|
rel?: string
|
|
|
}
|
|
|
```
|
|
|
|
|
|
### name の色をカスタマイズする {#customizing-the-name-color}
|
|
|
|
|
|
`name` にはブランドカラー（`--vp-c-brand-1`）が使われますが、`--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-section}
|
|
|
|
|
|
フィーチャーセクションでは、ヒーロー直下に任意の数の機能説明を並べられます。フロントマターに `features` オプションを指定して設定します。
|
|
|
|
|
|
各フィーチャーにはアイコン（絵文字または画像）を指定できます。アイコンが画像（svg, png, jpeg など）の場合は、**適切な幅・高さ** を指定してください。必要に応じて説明テキストや実サイズ、ライト／ダーク用の差し替えも指定できます。
|
|
|
|
|
|
```yaml
|
|
|
---
|
|
|
layout: home
|
|
|
|
|
|
features:
|
|
|
- icon: 🛠️
|
|
|
title: いつでもシンプル＆ミニマル
|
|
|
details: 概要テキスト...
|
|
|
- icon:
|
|
|
src: /cool-feature-icon.svg
|
|
|
title: もうひとつの便利機能
|
|
|
details: 概要テキスト...
|
|
|
- icon:
|
|
|
dark: /dark-feature-icon.svg
|
|
|
light: /light-feature-icon.svg
|
|
|
title: さらに別の機能
|
|
|
details: 概要テキスト...
|
|
|
---
|
|
|
```
|
|
|
|
|
|
```ts
|
|
|
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
|
|
|
|
|
|
// `link` 用の rel 属性。
|
|
|
//
|
|
|
// 例: `external`
|
|
|
rel?: string
|
|
|
|
|
|
// `link` 用の target 属性。
|
|
|
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-content}
|
|
|
|
|
|
`---` で区切るフロントマターの下に Markdown を書くだけで、ホームページに追加コンテンツを表示できます。
|
|
|
|
|
|
````md
|
|
|
---
|
|
|
layout: home
|
|
|
|
|
|
hero:
|
|
|
name: VitePress
|
|
|
text: Vite & Vue powered static site generator.
|
|
|
---
|
|
|
|
|
|
## はじめに
|
|
|
|
|
|
`npx` を使えば、すぐに VitePress を始められます！
|
|
|
|
|
|
```sh
|
|
|
npm init
|
|
|
npx vitepress init
|
|
|
```
|
