各ページはMDXファイルで、MarkdownコンテンツとReactコンポーネントを組み合わせることで、リッチでインタラクティブなドキュメントを作成できます。

​
ページメタデータ

すべてのページは、ファイルの先頭で --- に囲まれた frontmatter（YAML メタデータ）から始まります。このメタデータはページの表示と動作を定義します。 メタデータで制御できる項目:
  • ページのタイトルと説明
  • サイドバーのタイトル、アイコン、タグ
​
title
string
required
ナビゲーションやブラウザのタブに表示されるページタイトル。
​
description
string
このページの内容を簡潔に説明します。タイトルの下に表示され、SEO に寄与します。
​
sidebarTitle
string
サイドバーのナビゲーションに表示される短いタイトル。
​
icon
string
表示するアイコン。オプション:
  • Font Awesome icon の名前
  • Lucide icon の名前
  • 中括弧で囲んだ JSX 互換の SVG コード
  • 外部でホストされているアイコンへの URL
  • プロジェクト内のアイコンファイルへのパス
カスタム SVG アイコンの場合:
  1. SVGR converter を使って SVG を変換します。
  2. SVG コードを SVG の入力フィールドに貼り付けます。
  3. JSX の出力フィールドから完全な <svg>...</svg> 要素をコピーします。
  4. JSX 互換の SVG コードを中括弧で囲みます: icon={<svg ...> ... </svg>}。
  5. 必要に応じて height と width を調整します。
​
iconType
string
Font Awesome のアイコンスタイル。Font Awesome のアイコンでのみ使用されます。オプション: regular, solid, light, thin, sharp-solid, duotone, brands。
​
tag
string
サイドバーのページタイトル横に表示されるタグ。
Example YAML frontmatter
---
title: "About frontmatter"
description: "Frontmatter is the metadata that controls how your page appears and behaves"
sidebarTitle: "Frontmatter"
icon: "book"
tag: "NEW"
---

​
ページモード

mode 設定でページの表示方法を管理します。

​
デフォルト

モードが定義されていない場合、サイドバーのナビゲーションと目次を備えた標準レイアウトが使用されます。 
---
title: "Default page title"
---

​
ワイド

ワイドモードでは目次が非表示になります。見出しのないページや、横幅を広く使いたい場合に便利です。ワイドモードはすべてのテーマで利用できます。 
---
title: "Wide page title"
mode: "wide"
---

​
カスタム

カスタムモードは、トップナビバー以外の要素をすべて取り除いたミニマルなレイアウトを提供します。ランディングページや、ナビゲーション要素を最小限に抑えたい独自レイアウトを作成するためのキャンバスとして利用できます。カスタムモードはすべてのテーマで利用可能です。 
---
title: "Custom page title"
mode: "custom"
---

​
フレーム

フレームモードはカスタムモードに近いレイアウトを提供しますが、サイドバーのナビゲーションは保持されます。このページモードでは、デフォルトのナビゲーション体験を維持しつつ、カスタムHTMLやコンポーネントを使用できます。フレームモードはAspenおよびAlmondテーマでのみ利用できます。 
---
title: "Frame page title"
mode: "frame"
---

​
中央寄せ

中央寄せモードはサイドバーと目次を非表示にし、コンテンツを中央に配置します。変更履歴や、コンテンツを強調したいページに適しています。中央寄せモードは Mint と Linden のテーマで利用できます。 
---
title: "Center page title"
mode: "center"
---

​
APIページ

フロントマターに api または openapi の API 仕様を追加して、インタラクティブな APIプレイグラウンド を作成します。 
---
openapi: "GET /endpoint"
---
API ドキュメントの作成方法について詳しくはこちらをご覧ください。 ナビゲーションから url メタデータを使って外部サイトへ直接リンクできます。 
---
title: "npm Package"
url: "https://www.npmjs.com/package/mint"
---

​
検索エンジン最適化

ほとんどの SEO メタタグは自動生成されます。サイトの SEO、ソーシャルでの共有、ブラウザー互換性を高めるために、SEO メタタグを手動で設定することもできます。
コロンを含むメタタグは、引用符で囲む必要があります。
---
"twitter:image": "/images/social-preview.jpg"
---
利用可能な SEO メタデータの全オプションについては、SEO を参照してください。

​
内部検索キーワード

メタデータで keywords を指定することで、内蔵検索における特定ページの発見性を高められます。これらのキーワードはページ本文や検索結果の表示には含まれませんが、該当キーワードで検索したユーザーにはそのページが結果として表示されます。 
---
keywords: ['configuration', 'setup', 'getting started']
---