オーバーライド
Starlightのcomponents設定オプションに置き換え対象のコンポーネントへのパスを指定することで、Starlightの組み込みコンポーネントをオーバーライドできます。このページでは、オーバーライド可能なすべてのコンポーネントと、GitHub上にあるコンポーネントのデフォルト実装へのリンクの一覧を記載しています。
コンポーネントのオーバーライドガイドも参照してください。
コンポーネント
Section titled “コンポーネント”以下のコンポーネントは、各ページの<head>要素内にレンダリングされます。<head>内に配置可能な要素のみを含めるようにしてください。
デフォルトコンポーネント: Head.astro
各ページの<head>内にレンダリングされるコンポーネント。
このコンポーネントをオーバーライドするのは最後の手段としてください。可能であれば、head設定オプション、headフロントマターフィールド、またはルートデータミドルウェアを使用して、デフォルトコンポーネントがレンダリングするルートデータをカスタマイズすることをおすすめします。
ThemeProvider
Section titled “ThemeProvider”デフォルトコンポーネント: ThemeProvider.astro
ダーク/ライトテーマのサポートを設定するための、<head>内にレンダリングされるコンポーネント。デフォルトの実装では、インラインスクリプトと<ThemeSelect />で使用される<template>が含まれています。
アクセシビリティ
Section titled “アクセシビリティ”SkipLink
Section titled “SkipLink”デフォルトコンポーネント: SkipLink.astro
アクセシビリティのために<body>内の最初の要素としてレンダリングされる、メインページコンテンツへのリンクのコンポーネント。デフォルトの実装では、ユーザーがキーボードでタブを押してフォーカスするまで非表示となります。
以下のコンポーネントは、Starlightのコンポーネントのレイアウトと、異なるブレークポイント間のビューの管理を担当します。これらをオーバーライドすると著しく複雑になるため、可能な限り、より低レベルのコンポーネントをオーバーライドすることをおすすめします。
PageFrame
Section titled “PageFrame”デフォルトコンポーネント: PageFrame.astro
名前付きスロット: header, sidebar
ページコンテンツの大部分をラップするレイアウトコンポーネント。デフォルトの実装では、ヘッダー・サイドバー・メインのレイアウトをセットし、headerとsidebarの名前付きスロットと、メインコンテンツのデフォルトスロットを含みます。また、小さな（モバイル）ビューポートでのサイドバーナビゲーションの切り替えをサポートするために、<MobileMenuToggle />をレンダリングします。
MobileMenuToggle
Section titled “MobileMenuToggle”デフォルトコンポーネント: MobileMenuToggle.astro
小さな（モバイル）ビューポートでのサイドバーナビゲーションの切り替えを担当する、<PageFrame>内にレンダリングされるコンポーネント。
TwoColumnContent
Section titled “TwoColumnContent”デフォルトコンポーネント: TwoColumnContent.astro
名前付きスロット: right-sidebar
メインコンテンツのカラムと右サイドバー（目次）をラップするレイアウトコンポーネント。デフォルトの実装では、1カラムの小さなビューポート向けレイアウトと、2カラムの大きなビューポート向けレイアウトの切り替えをおこないます。
以下のコンポーネントは、Starlightのトップナビゲーションバーをレンダリングします。
Header
Section titled “Header”デフォルトコンポーネント: Header.astro
すべてのページの上部に表示されるヘッダーコンポーネント。デフォルトの実装では、<SiteTitle />、<Search />、<SocialIcons />、<ThemeSelect />、<LanguageSelect />を表示します。
SiteTitle
Section titled “SiteTitle”デフォルトコンポーネント: SiteTitle.astro
サイトタイトルをレンダリングするためにサイトヘッダーの先頭にレンダリングされるコンポーネント。デフォルトの実装では、Starlightの設定で定義されたロゴをレンダリングするためのロジックが含まれています。
Search
Section titled “Search”デフォルトコンポーネント: Search.astro
Starlightの検索UIをレンダリングするために使用されるコンポーネント。デフォルトの実装では、ヘッダー内のボタンと、クリックされたときに検索モーダルを表示し、PagefindのUIをロードするためのコードが含まれています。
pagefindが無効になっている場合、デフォルトの検索コンポーネントはレンダリングされません。ただし、Searchをオーバーライドすると、pagefind設定オプションがfalseであっても常にカスタムコンポーネントがレンダリングされます。これにより、Pagefindを無効にしたときに、代替となる検索プロバイダーのUIを追加できます。
SocialIcons
Section titled “SocialIcons”デフォルトコンポーネント: SocialIcons.astro
ソーシャルアイコンへのリンクを含む、サイトヘッダーにレンダリングされるコンポーネント。デフォルトの実装では、Starlightの設定のsocialオプションを使用して、アイコンとリンクをレンダリングします。
ThemeSelect
Section titled “ThemeSelect”デフォルトコンポーネント: ThemeSelect.astro
ユーザーが好みのカラースキームを選択できるようにするための、サイトヘッダーにレンダリングされるコンポーネント。
LanguageSelect
Section titled “LanguageSelect”デフォルトコンポーネント: LanguageSelect.astro
ユーザーが別の言語に切り替えられるようにするための、サイトヘッダーにレンダリングされるコンポーネント。
グローバルサイドバー
Section titled “グローバルサイドバー”Starlightのグローバルサイドバーには、メインのサイトナビゲーションが含まれます。小さなビューポートでは、これはドロップダウンメニューの背後に隠されます。
Sidebar
Section titled “Sidebar”デフォルトコンポーネント: Sidebar.astro
グローバルナビゲーションを含んだ、ページコンテンツの前にレンダリングされるコンポーネント。デフォルトの実装では、十分に広いビューポートではサイドバーとして、小さな（モバイル）ビューポートではドロップダウンメニューの内側に表示されます。また、モバイルメニュー内に追加のアイテムを表示するために、<MobileMenuFooter />をレンダリングします。
MobileMenuFooter
Section titled “MobileMenuFooter”デフォルトコンポーネント: MobileMenuFooter.astro
モバイルドロップダウンメニューの下部にレンダリングされるコンポーネント。デフォルトの実装では、<ThemeSelect />と<LanguageSelect />をレンダリングします。
ページサイドバー
Section titled “ページサイドバー”Starlightのページサイドバーは、現在のページの見出しを列挙する目次の表示を担当しています。小さなビューポートでは、これは固定されたドロップダウンメニューへと折りたたまれます。
PageSidebar
Section titled “PageSidebar”デフォルトコンポーネント: PageSidebar.astro
目次を表示するために、メインページのコンテンツの前にレンダリングされるコンポーネント。デフォルトの実装では、<TableOfContents />と<MobileTableOfContents />をレンダリングします。
TableOfContents
Section titled “TableOfContents”デフォルトコンポーネント: TableOfContents.astro
現在のページの目次を、大きめのビューポートにおいてレンダリングするコンポーネント。
MobileTableOfContents
Section titled “MobileTableOfContents”デフォルトコンポーネント: MobileTableOfContents.astro
現在のページの目次を、小さな（モバイル）ビューポートにおいてレンダリングするコンポーネント。
以下のコンポーネントは、ページコンテンツのメインカラムにレンダリングされます。
Banner
Section titled “Banner”デフォルトコンポーネント: Banner.astro
各ページの上部にレンダリングされるバナーコンポーネント。デフォルトの実装では、ページのbannerフロントマターの値を使用して、レンダリングするかどうかを決定します。
ContentPanel
Section titled “ContentPanel”デフォルトコンポーネント: ContentPanel.astro
メインコンテンツカラムのセクションをラップするために使用されるレイアウトコンポーネント。
PageTitle
Section titled “PageTitle”デフォルトコンポーネント: PageTitle.astro
現在のページの<h1>要素を含むコンポーネント。
デフォルトの実装と同様に、<h1>要素にid="_top"を設定する必要があります。
DraftContentNotice
Section titled “DraftContentNotice”デフォルトコンポーネント: DraftContentNotice.astro
現在のページがドラフトとしてマークされている場合、開発中にユーザーに表示される通知。
FallbackContentNotice
Section titled “FallbackContentNotice”デフォルトコンポーネント: FallbackContentNotice.astro
現在の言語の翻訳が利用できないページにおいて、ユーザーに表示される通知。多言語サイトでのみ使用されます。
デフォルトコンポーネント: Hero.astro
フロントマターでheroが設定されている場合に、ページの上部にレンダリングされるコンポーネント。デフォルトの実装では、大きなタイトル、タグライン、コールトゥアクション（call-to-action）リンク、オプションの画像を表示します。
MarkdownContent
Section titled “MarkdownContent”デフォルトコンポーネント: MarkdownContent.astro
各ページのメインコンテンツの周囲にレンダリングされるコンポーネント。デフォルトの実装では、Markdownコンテンツに適用する基本的なスタイルをセットします。
Markdownコンテンツのスタイルは@astrojs/starlight/style/markdown.cssにも公開されており、.sl-markdown-contentCSSクラスにスコープされています。
以下のコンポーネントは、ページコンテンツのメインカラムの下部にレンダリングされます。
Footer
Section titled “Footer”デフォルトコンポーネント: Footer.astro
各ページの下部に表示されるフッターコンポーネント。デフォルトの実装では、<LastUpdated />、<Pagination />、<EditLink />を表示します。
LastUpdated
Section titled “LastUpdated”デフォルトコンポーネント: LastUpdated.astro
最終更新日を表示するために、ページフッターにレンダリングされるコンポーネント。
EditLink
Section titled “EditLink”デフォルトコンポーネント: EditLink.astro
ページを編集できる場所へのリンクを表示するために、ページフッターにレンダリングされるコンポーネント。
Pagination
Section titled “Pagination”デフォルトコンポーネント: Pagination.astro
前のページと次のページとの間にナビゲーション用矢印を表示するために、ページフッターにレンダリングされるコンポーネント。