オーバーライド

Starlightのcomponents設定オプションに置き換え対象のコンポーネントへのパスを指定することで、Starlightの組み込みコンポーネントをオーバーライドできます。このページでは、オーバーライド可能なすべてのコンポーネントと、GitHub上にあるコンポーネントのデフォルト実装へのリンクの一覧を記載しています。

コンポーネントのオーバーライドガイドも参照してください。

コンポーネントprops

すべてのコンポーネントは、現在のページに関する情報を含んでいる、標準のAstro.propsオブジェクトにアクセスできます。

カスタムコンポーネントに型を付けるには、StarlightからProps型をインポートします。

---
import type { Props } from '@astrojs/starlight/props';

const { hasSidebar } = Astro.props;
//      ^ type: boolean
---

これにより、Astro.propsにアクセスする際、オートコンプリートと型が有効になります。

Props

Starlightは、以下のpropsをカスタムコンポーネントに渡します。

`dir`

Type: 'ltr' | 'rtl'

ページの書字方向。

`lang`

Type: string

このページのロケールのBCP-47言語タグ。たとえばen、zh-CN、pt-BRなど。

`locale`

Type: string | undefined

言語が配信されるベースパス。ルートロケールスラグの場合はundefinedとなります。

`slug`

Type: string

コンテンツファイル名から生成されたページのスラグ。

`id`

Type: string

コンテンツファイル名に基づくページの一意のID。

`isFallback`

Type: true | undefined

このページが現在の言語で未翻訳であり、デフォルトロケールのフォールバックコンテンツを使用している場合はtrueとなります。多言語サイトでのみ使用されます。

`entryMeta`

Type: { dir: 'ltr' | 'rtl'; lang: string }

ページコンテンツのロケールメタデータ。ページがフォールバックコンテンツを使用している場合、トップレベルのロケール値とは異なる場合があります。

`entry`

現在のページのAstroコンテンツコレクションのエントリー。entry.dataには、現在のページのフロントマターの値が含まれます。

entry: {
  data: {
    title: string;
    description: string | undefined;
    // その他の値
  }
}

このオブジェクトの構造については、Astroのコレクションエントリー型リファレンスを参照してください。

`sidebar`

Type: SidebarEntry[]

ページのサイトナビゲーション用サイドバーのエントリー。

`hasSidebar`

Type: boolean

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

`pagination`

Type: { prev?: Link; next?: Link }

ページネーションの設定が有効な場合にサイドバーに表示される、前のページと次のページへのリンク。

`toc`

Type: { minHeadingLevel: number; maxHeadingLevel: number; items: TocItem[] } | undefined

目次の設定が有効な場合、このページの目次。

`headings`

Type: { depth: number; slug: string; text: string }[]

現在のページから抽出されたすべてのMarkdown見出しの配列。Starlightの設定オプションをもとに目次コンポーネントを作成したい場合は、tocを使用してください。

`lastUpdated`

Type: Date | undefined

最終更新日の設定が有効な場合、このページが最後に更新された日時を表わすJavaScriptのDateオブジェクト。

`editUrl`

Type: URL | undefined

ページの編集設定が有効な場合、このページを編集可能なアドレスのURLオブジェクト。

`labels`

Type: Record<string, string>

現在のページのローカライズされたUI文字列を含んだオブジェクト。利用可能なすべてのキーの一覧については、「StarlightのUIを翻訳する」ガイドを参照してください。

コンポーネント

ヘッド

以下のコンポーネントは、各ページの<head>要素内にレンダリングされます。<head>内に配置可能な要素のみを含めるようにしてください。

`Head`

デフォルトコンポーネント: Head.astro

各ページの<head>内にレンダリングされるコンポーネント。<title>や<meta charset="utf-8">などの重要なタグが含まれます。

このコンポーネントをオーバーライドするのは最後の手段としてください。可能な限り、Starlightの設定オプションheadを使用してください。

`ThemeProvider`

デフォルトコンポーネント: ThemeProvider.astro

ダーク/ライトテーマのサポートを設定するための、<head>内にレンダリングされるコンポーネント。デフォルトの実装では、インラインスクリプトと<ThemeSelect />で使用される<template>が含まれています。

アクセシビリティ

`SkipLink`

デフォルトコンポーネント: SkipLink.astro

アクセシビリティのために<body>内の最初の要素としてレンダリングされる、メインページコンテンツへのリンクのコンポーネント。デフォルトの実装では、ユーザーがキーボードでタブを押してフォーカスするまで非表示となります。

レイアウト

以下のコンポーネントは、Starlightのコンポーネントのレイアウトと、異なるブレークポイント間のビューの管理を担当します。これらをオーバーライドすると著しく複雑になるため、可能な限り、より低レベルのコンポーネントをオーバーライドすることをおすすめします。

`PageFrame`

デフォルトコンポーネント: PageFrame.astro

ページコンテンツの大部分をラップするレイアウトコンポーネント。デフォルトの実装では、ヘッダー・サイドバー・メインのレイアウトをセットし、headerとsidebarの名前付きスロットと、メインコンテンツのデフォルトスロットを含みます。また、小さな（モバイル）ビューポートでのサイドバーナビゲーションの切り替えをサポートするために、<MobileMenuToggle />をレンダリングします。

`MobileMenuToggle`

デフォルトコンポーネント: MobileMenuToggle.astro

小さな（モバイル）ビューポートでのサイドバーナビゲーションの切り替えを担当する、<PageFrame>内にレンダリングされるコンポーネント。

`TwoColumnContent`

デフォルトコンポーネント: TwoColumnContent.astro

メインコンテンツのカラムと右サイドバー（目次）をラップするレイアウトコンポーネント。デフォルトの実装では、1カラムの小さなビューポート向けレイアウトと、2カラムの大きなビューポート向けレイアウトの切り替えをおこないます。

ヘッダー

以下のコンポーネントは、Starlightのトップナビゲーションバーをレンダリングします。

`Header`

デフォルトコンポーネント: Header.astro

すべてのページの上部に表示されるヘッダーコンポーネント。デフォルトの実装では、<SiteTitle />、<Search />、<SocialIcons />、<ThemeSelect />、<LanguageSelect />を表示します。

`SiteTitle`

デフォルトコンポーネント: SiteTitle.astro

サイトタイトルをレンダリングするためにサイトヘッダーの先頭にレンダリングされるコンポーネント。デフォルトの実装では、Starlightの設定で定義されたロゴをレンダリングするためのロジックが含まれています。

`Search`

デフォルトコンポーネント: Search.astro

Starlightの検索UIをレンダリングするために使用されるコンポーネント。デフォルトの実装では、ヘッダー内のボタンと、クリックされたときに検索モーダルを表示し、PagefindのUIをロードするためのコードが含まれています。

pagefindが無効になっている場合、デフォルトの検索コンポーネントはレンダリングされません。ただし、Searchをオーバーライドすると、pagefind設定オプションがfalseであっても常にカスタムコンポーネントがレンダリングされます。これにより、Pagefindを無効にしたときに、代替となる検索プロバイダーのUIを追加できます。

`SocialIcons`

デフォルトコンポーネント: SocialIcons.astro

ソーシャルアイコンへのリンクを含む、サイトヘッダーにレンダリングされるコンポーネント。デフォルトの実装では、Starlightの設定のsocialオプションを使用して、アイコンとリンクをレンダリングします。

`ThemeSelect`

デフォルトコンポーネント: ThemeSelect.astro

ユーザーが好みのカラースキームを選択できるようにするための、サイトヘッダーにレンダリングされるコンポーネント。

`LanguageSelect`

デフォルトコンポーネント: LanguageSelect.astro

ユーザーが別の言語に切り替えられるようにするための、サイトヘッダーにレンダリングされるコンポーネント。

グローバルサイドバー

Starlightのグローバルサイドバーには、メインのサイトナビゲーションが含まれます。小さなビューポートでは、これはドロップダウンメニューの背後に隠されます。

`Sidebar`

デフォルトコンポーネント: Sidebar.astro

グローバルナビゲーションを含んだ、ページコンテンツの前にレンダリングされるコンポーネント。デフォルトの実装では、十分に広いビューポートではサイドバーとして、小さな（モバイル）ビューポートではドロップダウンメニューの内側に表示されます。また、モバイルメニュー内に追加のアイテムを表示するために、<MobileMenuFooter />をレンダリングします。

`MobileMenuFooter`

デフォルトコンポーネント: MobileMenuFooter.astro

モバイルドロップダウンメニューの下部にレンダリングされるコンポーネント。デフォルトの実装では、<ThemeSelect />と<LanguageSelect />をレンダリングします。

ページサイドバー

Starlightのページサイドバーは、現在のページの見出しを列挙する目次の表示を担当しています。小さなビューポートでは、これは固定されたドロップダウンメニューへと折りたたまれます。

`PageSidebar`

デフォルトコンポーネント: PageSidebar.astro

目次を表示するために、メインページのコンテンツの前にレンダリングされるコンポーネント。デフォルトの実装では、<TableOfContents />と<MobileTableOfContents />をレンダリングします。

`TableOfContents`

デフォルトコンポーネント: TableOfContents.astro

現在のページの目次を、大きめのビューポートにおいてレンダリングするコンポーネント。

`MobileTableOfContents`

デフォルトコンポーネント: MobileTableOfContents.astro

現在のページの目次を、小さな（モバイル）ビューポートにおいてレンダリングするコンポーネント。

コンテンツ

以下のコンポーネントは、ページコンテンツのメインカラムにレンダリングされます。

`Banner`

デフォルトコンポーネント: Banner.astro

各ページの上部にレンダリングされるバナーコンポーネント。デフォルトの実装では、ページのbannerフロントマターの値を使用して、レンダリングするかどうかを決定します。

`ContentPanel`

デフォルトコンポーネント: ContentPanel.astro

メインコンテンツカラムのセクションをラップするために使用されるレイアウトコンポーネント。

`PageTitle`

デフォルトコンポーネント: PageTitle.astro

現在のページの<h1>要素を含むコンポーネント。

デフォルトの実装と同様に、<h1>要素にid="_top"を設定する必要があります。

`FallbackContentNotice`

デフォルトコンポーネント: FallbackContentNotice.astro

現在の言語の翻訳が利用できないページにおいて、ユーザーに表示される通知。多言語サイトでのみ使用されます。

`Hero`

デフォルトコンポーネント: Hero.astro

フロントマターでheroが設定されている場合に、ページの上部にレンダリングされるコンポーネント。デフォルトの実装では、大きなタイトル、タグライン、コールトゥアクション（call-to-action）リンク、オプションの画像を表示します。

`MarkdownContent`

デフォルトコンポーネント: MarkdownContent.astro

各ページのメインコンテンツの周囲にレンダリングされるコンポーネント。デフォルトの実装では、Markdownコンテンツに適用する基本的なスタイルをセットします。

Markdownコンテンツのスタイルは@astrojs/starlight/style/markdown.cssにも公開されており、.sl-markdown-contentCSSクラスにスコープされています。

フッター

以下のコンポーネントは、ページコンテンツのメインカラムの下部にレンダリングされます。

`Footer`

デフォルトコンポーネント: Footer.astro

各ページの下部に表示されるフッターコンポーネント。デフォルトの実装では、<LastUpdated />、<Pagination />、<EditLink />を表示します。

`LastUpdated`

デフォルトコンポーネント: LastUpdated.astro

最終更新日を表示するために、ページフッターにレンダリングされるコンポーネント。

`EditLink`

デフォルトコンポーネント: EditLink.astro

ページを編集できる場所へのリンクを表示するために、ページフッターにレンダリングされるコンポーネント。

`Pagination`

デフォルトコンポーネント: Pagination.astro

前のページと次のページとの間にナビゲーション用矢印を表示するために、ページフッターにレンダリングされるコンポーネント。