フロントマター

Starlightでは、フロントマターに値を設定することで、MarkdownとMDXのページを個別にカスタマイズできます。たとえば通常のページでは、titleとdescriptionフィールドを設定します。

---
title: このプロジェクトについて
description: 私が取り組んでいるプロジェクトについてもっと知る。
---

概要ページへようこそ！

フロントマターのフィールド

`title`（必須）

type: string

すべてのページにタイトルを指定する必要があります。これは、ページの上部、ブラウザのタブ、およびページのメタデータとして表示されます。

`description`

type: string

ページに関する説明文はページのメタデータとして使用され、また検索エンジンやソーシャルメディアのプレビューでも使用されます。

`editUrl`

type: string | boolean

グローバルの editLink 設定を上書きします。falseを設定して特定のページの「ページを編集」リンクを無効にするか、あるいはこのページのコンテンツを編集する代替URLを指定します。

`head`

type: HeadConfig[]

フロントマターのheadフィールドを使用して、ページの<head>にタグを追加できます。これにより、カスタムスタイル、メタデータ、またはその他のタグを単一のページに追加できます。グローバルのheadオプションと同様です。

---
title: 私たちについて
head:
  # カスタム<title>タグを使う
  - tag: title
    content: カスタムのタイトル
---

`tableOfContents`

type: false | { minHeadingLevel?: number; maxHeadingLevel?: number; }

グローバルのtableOfContents設定を上書きします。表示したい見出しのレベルをカスタマイズするか、あるいはfalseに設定して目次を非表示とします。

---
title: 目次にH2のみを表示するページ
tableOfContents:
  minHeadingLevel: 2
  maxHeadingLevel: 2
---

---
title: 目次のないページ
tableOfContents: false
---

`template`

type: 'doc' | 'splash'
default: 'doc'

ページのレイアウトテンプレートを設定します。ページはデフォルトで'doc'レイアウトを使用します。ランディングページ向けにサイドバーのない幅広のレイアウトを使用するには、'splash'を設定します。

`hero`

type: HeroConfig

ヒーローコンポーネントをページの上部に追加します。template: splashとの相性が良いでしょう。

リポジトリからの画像の読み込みなど、よく使われるオプションの設定例は以下となります。

---
title: 私のホームページ
template: splash
hero:
  title: '私のプロジェクト: 最高品質を、最速で'
  tagline: 瞬く間に月まで一往復。
  image:
    alt: キラリと光る、鮮やかなロゴ
    file: ../../assets/logo.png
  actions:
    - text: もっと知りたい
      link: /getting-started/
      icon: right-arrow
      variant: primary
    - text: GitHubで見る
      link: https://github.com/astronaut/my-project
      icon: external
---

`HeroConfig`

interface HeroConfig {
  title?: string;
  tagline?: string;
  image?: {
    alt?: string;
    // リポジトリ内の画像への相対パス。
    file?: string;
    // 画像のスロットに使用する生のHTML。
    // カスタムの`<img>`タグやインラインの`<svg>`などが使えます。
    html?: string;
  };
  actions?: Array<{
    text: string;
    link: string;
    variant: 'primary' | 'secondary' | 'minimal';
    icon: string;
  }>;
}

`lastUpdated`

type: Date | boolean

グローバルのlastUpdatedオプションを上書きします。日付を指定する場合は有効なYAMLタイムスタンプである必要があり、ページのGit履歴に保存されている日付を上書きします。

---
title: 最終更新日をカスタマイズしたページ
lastUpdated: 2022-08-09
---

`prev`

type: boolean | string | { link?: string; label?: string }

グローバルのpaginationオプションを上書きします。文字列を指定すると生成されるリンクテキストが置き換えられ、オブジェクトを指定するとリンクとテキストの両方を上書きできます。

---
# 前のページへのリンクを非表示にする
prev: false
---

---
# 前のページへのリンクテキストを上書きする
prev: チュートリアルを続ける
---

---
# 前のページへのリンクとテキストを上書きする
prev:
  link: /unrelated-page/
  label: その他のページをチェックする
---

`next`

type: boolean | string | { link?: string; label?: string }

次のページへのリンクに対して、prevと同様の設定ができます。

---
# 次のページへのリンクを非表示にする
next: false
---

`sidebar`

type: { label?: string; order?: number }

自動生成されるリンクのグループを使用している際に、サイドバーにページをどのように表示するかを設定します。

`label`

type: string
default: ページのtitle

自動生成されるリンクのグループ内に表示される、ページのサイドバー上でのラベルを設定します。

---
title: このプロジェクトについて
sidebar:
  label: 概要
---

`order`

type: number

自動生成されるリンクのグループをソートする際の、このページの順番を設定します。小さな数値ほどリンクグループの上部に表示されます。

---
title: 最初に表示するページ
sidebar:
  order: 1
---

フロントマター