コンテンツにスキップ
Starlight

フロントマター

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

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

概要ページへようこそ！

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

title（必須）

type: string

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

description

type: string

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

editUrl

type: string | boolean

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

type: HeadConfig[]

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

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

tableOfContents

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

グローバルの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;
  }>;
}