レイアウト

ページの frontmatter に layout オプションを設定することでページのレイアウトを選択できます。 3つのレイアウトオプションがあります。 doc、page、および home です。何も指定されない場合、ページは doc ページとして扱われます。

---
layout: doc
---

ドキュメントレイアウト

オプションの doc はデフォルトのレイアウトであり、Markdownコンテンツ全体に「ドキュメント」の外観をスタイリングします。 vp-doc cssクラスでコンテンツ全体をラップし、その下の要素にスタイルを適用することで機能します。

p または h2 などの一般的な要素はほぼすべて特別なスタイルが適用されます。そのため、Markdownコンテンツ内にカスタムHTMLを追加すると、それらもこれらのスタイルの影響を受けることに注意してください。

以下に示すドキュメントの特定の機能も提供します。これらの機能はこのレイアウトでのみ有効になります。

• 編集リンク
• 前/次のリンク
• アウトライン
• カーボン広告

ページレイアウト

オプションの page は「空白ページ」として扱われます。Markdownは引き続き解析され、すべての Markdown拡張機能 は doc レイアウトと同じように機能しますが、デフォルトのスタイリングは適用されません。

ページレイアウトを使用すると、VitePressテーマがマークアップに影響を与えないように、すべてを自分でスタイリングできます。これは独自のカスタムページを作成したい場合に役立ちます。

このレイアウトでも、ページに一致するサイドバーの設定がある場合は、サイドバーが表示されることに注意してください。

ホームレイアウト

オプションの home は、テンプレート化された「ホームページ」を生成します。このレイアウトでは、コンテンツをさらにカスタマイズするために hero や features などの追加のオプションを設定できます。詳細については、 デフォルトのテーマ:ホームページ を参照してください。

レイアウトなし

レイアウトを必要としない場合は、フロントマターで layout: false を渡すことができます。このオプションは、完全にカスタマイズ可能なランディングページ（デフォルトではサイドバー、ナビゲーションバー、フッターなし）を作成する場合に役立ちます。

カスタムレイアウト

カスタムレイアウトも使用できます

---
layout: foo
---

これは、コンテキストに登録された foo というコンポーネントを探します。たとえば、.vitepress/theme/index.ts でコンポーネントをグローバルに登録できます。

import DefaultTheme from 'vitepress/theme'
import Foo from './Foo.vue'

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    app.component('foo', Foo)
  }
}