フロントマター設定

フロントマターは、ページごとの設定を可能にします。すべてのMarkdownファイルで、フロントマター設定を使用して、サイトレベルまたはテーマレベルの設定オプションをオーバーライドできます。また、フロントマターでのみ定義できる設定オプションもあります。

使用例

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

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

{{ $frontmatter.title }}

title

• 種類: string

ページのタイトル。config.titleと同じで、サイトレベルの設定をオーバーライドします。

---
title: VitePress
---

titleTemplate

• 種類: string | boolean

タイトルの接尾辞。config.titleTemplateと同じで、サイトレベルの設定をオーバーライドします。

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

description

• 種類: string

ページの説明。config.descriptionと同じで、サイトレベルの設定をオーバーライドします。

---
description: VitePress
---

head

• 種類: HeadConfig[]

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

---
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`と同様に動作しますが、コンテンツにスタイルを適用しません。完全にカスタムページを作成する場合に便利です。

---
layout: doc
---

hero ホームページのみ

`layout`が`home`に設定されている場合、ホームヒーローセクションの内容を定義します。詳細はデフォルトテーマ：ホームページを参照してください。

features ホームページのみ

`layout`が`home`に設定されている場合、機能セクションに表示するアイテムを定義します。詳細はデフォルトテーマ：ホームページを参照してください。

navbar

• 種類: boolean
• デフォルト: true

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

---
navbar: false
---

sidebar

• 種類: boolean
• デフォルト: true

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

---
sidebar: false
---

aside

• 種類: `boolean | 'left'`
• デフォルト: true

`doc`レイアウトにおける`aside`コンポーネントの位置を定義します。

この値を`false`に設定すると、`aside`コンテナのレンダリングが منع されます。
この値を`true`に設定すると、`aside`が右側にレンダリングされます。
この値を`'left'`に設定すると、`aside`が左側にレンダリングされます。

---
aside: false
---

outline

• 種類: number | [number, number] | 'deep' | false
• デフォルト: 2

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

lastUpdated

• 種類: boolean | Date
• デフォルト: true

現在のページのフッターに最終更新テキストを表示するかどうか。日時が指定されている場合、最後のGit変更タイムスタンプの代わりに表示されます。

---
lastUpdated: false
---

editLink

• 種類: boolean
• デフォルト: true

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

---
editLink: false
---

footer

• 種類: boolean
• デフォルト: true

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

---
footer: false
---

pageClass

• 種類: string

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

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

その後、`.vitepress/theme/custom.css`ファイルでこの特定のページのスタイルをカスタマイズできます。

.custom-page-class {
  /* page-specific styles */
}