フロントマター設定

フロントマターはページ単位の設定を可能にします。各 Markdown ファイルで、サイト全体やテーマレベルの設定を上書きできます。フロントマターでしか定義できない項目もあります。

使用例:

---
title: Docs with VitePress
editLink: true
---

Vue の式内では、グローバル $frontmatter を介してフロントマターデータにアクセスできます。

{{ $frontmatter.title }}

title

型: string

ページのタイトルです。config.title と同じ意味で、サイトレベルの設定を上書きします。

yaml

---
title: VitePress
---

titleTemplate

型: string | boolean

タイトルのサフィックスです。config.titleTemplate と同じ意味で、サイトレベルの設定を上書きします。

yaml

---
title: VitePress
titleTemplate: Vite & Vue powered static site generator
---

description

型: string

ページの説明です。config.description と同じ意味で、サイトレベルの設定を上書きします。

yaml

---
description: VitePress
---

head

型: HeadConfig[]

現在のページに追加で挿入する <head> タグを指定します。サイトレベル設定で挿入されたタグの後に追加されます。

yaml

---
head:
  - - meta
    - name: description
      content: hello
  - - meta
    - name: keywords
      content: super duper SEO
---

type HeadConfig =
  | [string, Record<string, string>]
  | [string, Record<string, string>, string]

デフォルトテーマ専用

以下のフロントマター項目は、デフォルトテーマ使用時にのみ適用されます。

layout

型: doc | home | page
既定値: doc

ページのレイアウトを決めます。

doc — Markdown コンテンツにドキュメント向けの既定スタイルを適用します。
home — 「ホームページ」用の特別なレイアウト。hero や features を追加指定して、ランディングページを素早く構築できます。
page — doc と似ていますが、コンテンツにスタイルを適用しません。完全にカスタムなページを作りたい場合に便利です。

yaml

---
layout: doc
---

hero home ページ専用

layout: home のときのヒーローセクションの内容を定義します。詳しくはデフォルトテーマ: ホームページを参照。

features home ページ専用

layout: home のときのフィーチャーセクションに表示する項目を定義します。詳しくはデフォルトテーマ: ホームページを参照。

型: boolean
既定値: true

ナビゲーションバーを表示するかどうか。

yaml

---
navbar: false
---

型: boolean
既定値: true

サイドバーを表示するかどうか。

yaml

---
sidebar: false
---

aside

型: boolean | 'left'
既定値: true

doc レイアウトでの aside コンポーネントの位置を定義します。

この値を false にすると aside コンテナを表示しません。
true にすると右側に表示します。
'left' にすると左側に表示します。

yaml

---
aside: false
---

outline

型: number | [number, number] | 'deep' | false
既定値: 2

ページのアウトラインに表示する見出しレベルです。config.themeConfig.outline.level と同じ意味で、サイトレベルの設定を上書きします。

yaml

---
outline: [2, 4]
---

lastUpdated

型: boolean | Date
既定値: true

現在のページのフッターに最終更新を表示するかどうか。日時を指定した場合は、その日時が Git の最終更新時刻の代わりに表示されます。

yaml

---
lastUpdated: false
---

editLink

型: boolean
既定値: true

現在のページのフッターに編集リンクを表示するかどうか。

yaml

---
editLink: false
---

型: boolean
既定値: true

フッターを表示するかどうか。

yaml

---
footer: false
---

pageClass

型: string

特定のページに追加のクラス名を付与します。

yaml

---
pageClass: custom-page-class
---

その後、.vitepress/theme/custom.css でこのページ専用のスタイルを記述できます。

css

.custom-page-class {
  /* ページ固有のスタイル */
}

isHome

型: boolean

デフォルトテーマは通常、frontmatter.layout === 'home' のチェックに基づいてホームページかどうかを判断します。
カスタムレイアウトでホームページ用の要素を強制的に表示したい場合に便利です。

yaml

---
isHome: true
---

フロントマター設定 ​

title ​

titleTemplate ​

description ​

head ​

デフォルトテーマ専用 ​

layout ​

hero home ページ専用 ​

features home ページ専用 ​

navbar ​

sidebar ​

aside ​

outline ​

lastUpdated ​

editLink ​

footer ​

pageClass ​

isHome ​

フロントマター設定

title

titleTemplate

description

head

デフォルトテーマ専用

layout

hero home ページ専用

features home ページ専用

navbar

sidebar

aside

outline

lastUpdated

editLink

footer

pageClass

isHome