オーバーライド
Starlightのcomponents
設定オプションに置き換え対象のコンポーネントへのパスを指定することで、Starlightの組み込みコンポーネントをオーバーライドできます。このページでは、オーバーライド可能なすべてのコンポーネントと、GitHub上にあるコンポーネントのデフォルト実装へのリンクの一覧を記載しています。
コンポーネントのオーバーライドガイドも参照してください。
コンポーネントprops
Section titled “コンポーネントprops”すべてのコンポーネントは、現在のページに関する情報を含んでいる、標準のAstro.props
オブジェクトにアクセスできます。
カスタムコンポーネントに型を付けるには、StarlightからProps
型をインポートします。
---import type { Props } from '@astrojs/starlight/props';
const { hasSidebar } = Astro.props;// ^ type: boolean---
これにより、Astro.props
にアクセスする際、オートコンプリートと型が有効になります。
Starlightは、以下のpropsをカスタムコンポーネントに渡します。
Type: 'ltr' | 'rtl'
ページの書字方向。
Type: string
このページのロケールのBCP-47言語タグ。たとえばen
、zh-CN
、pt-BR
など。
locale
Section titled “locale”Type: string | undefined
言語が配信されるベースパス。ルートロケールスラグの場合はundefined
となります。
siteTitle
Section titled “siteTitle”Type: string
このページのロケールのサイトタイトル。
siteTitleHref
Section titled “siteTitleHref”Type: string
サイトタイトルのhref
属性の値。たとえば/
など、ホームページへのリンクとなります。多言語サイトの場合、たとえば/en/
や/zh-cn/
など、現在のロケールが含まれます。
Type: string
コンテンツファイル名から生成されたページのスラグ。
Type: string
コンテンツファイル名に基づくページの一意のID。
isFallback
Section titled “isFallback”Type: true | undefined
このページが現在の言語で未翻訳であり、デフォルトロケールのフォールバックコンテンツを使用している場合はtrue
となります。多言語サイトでのみ使用されます。
entryMeta
Section titled “entryMeta”Type: { dir: 'ltr' | 'rtl'; lang: string }
ページコンテンツのロケールメタデータ。ページがフォールバックコンテンツを使用している場合、トップレベルのロケール値とは異なる場合があります。
現在のページのAstroコンテンツコレクションのエントリー。entry.data
には、現在のページのフロントマターの値が含まれます。
entry: { data: { title: string; description: string | undefined; // その他の値 }}
このオブジェクトの構造については、Astroのコレクションエントリー型リファレンスを参照してください。
sidebar
Section titled “sidebar”Type: SidebarEntry[]
ページのサイトナビゲーション用サイドバーのエントリー。
hasSidebar
Section titled “hasSidebar”Type: boolean
ページにサイドバーを表示するかどうか。
pagination
Section titled “pagination”Type: { prev?: Link; next?: Link }
ページネーションの設定が有効な場合にサイドバーに表示される、前のページと次のページへのリンク。
Type: { minHeadingLevel: number; maxHeadingLevel: number; items: TocItem[] } | undefined
目次の設定が有効な場合、このページの目次。
headings
Section titled “headings”Type: { depth: number; slug: string; text: string }[]
現在のページから抽出されたすべてのMarkdown見出しの配列。Starlightの設定オプションをもとに目次コンポーネントを作成したい場合は、toc
を使用してください。
lastUpdated
Section titled “lastUpdated”Type: Date | undefined
最終更新日の設定が有効な場合、このページが最後に更新された日時を表わすJavaScriptのDate
オブジェクト。
editUrl
Section titled “editUrl”Type: URL | undefined
ページの編集設定が有効な場合、このページを編集可能なアドレスのURL
オブジェクト。
コンポーネント
Section titled “コンポーネント”以下のコンポーネントは、各ページの<head>
要素内にレンダリングされます。<head>
内に配置可能な要素のみを含めるようにしてください。
デフォルトコンポーネント: Head.astro
各ページの<head>
内にレンダリングされるコンポーネント。<title>
や<meta charset="utf-8">
などの重要なタグが含まれます。
このコンポーネントをオーバーライドするのは最後の手段としてください。可能な限り、Starlightの設定オプション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
の名前付きスロットと、メインコンテンツのデフォルトスロットを含みます。また、小さな(モバイル)ビューポートでのサイドバーナビゲーションの切り替えをサポートするために、<MobileMenuToggle />
をレンダリングします。
MobileMenuToggle
Section titled “MobileMenuToggle”デフォルトコンポーネント: MobileMenuToggle.astro
小さな(モバイル)ビューポートでのサイドバーナビゲーションの切り替えを担当する、<PageFrame>
内にレンダリングされるコンポーネント。
TwoColumnContent
Section titled “TwoColumnContent”デフォルトコンポーネント: TwoColumnContent.astro
メインコンテンツのカラムと右サイドバー(目次)をラップするレイアウトコンポーネント。デフォルトの実装では、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-content
CSSクラスにスコープされています。
以下のコンポーネントは、ページコンテンツのメインカラムの下部にレンダリングされます。
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
前のページと次のページとの間にナビゲーション用矢印を表示するために、ページフッターにレンダリングされるコンポーネント。