コンポーネントの使用
コンポーネントを使用すると、UIの一部やスタイリングを一貫して簡単に再利用できます。 例えば、リンクカードやYouTube埋め込みなどが挙げられます。 StarlightはMDXとMarkdocファイルでのコンポーネントの使用をサポートし、いくつかの一般的なコンポーネントを提供しています。
Astro Docsでコンポーネントの構築についてさらに学ぶ。
MDXでコンポーネントを使用する
コンポーネントを使用するには、MDXファイルにインポートし、JSXタグとしてレンダリングします。
これらはHTMLタグのように見えますが、import
文の名前に一致する大文字で始まります:
StarlightはAstroを基盤としているため、MDXファイルでサポートされているUIフレームワーク(React、Preact、Svelte、Vue、Solid、Alpine)で構築されたコンポーネントのサポートを追加できます。 AstroドキュメントのMDXでのコンポーネントの使用についてさらに学んでください。
Markdocでコンポーネントを使用する
Markdocセットアップガイドに従って、Markdocでコンテンツを作成するためのサポートを追加してください。
Starlight Markdocプリセットを使用すると、Markdocの{% %}
タグ構文でStarlightの組み込みコンポーネントを使用できます。
MDXとは異なり、Markdocのコンポーネントはインポートする必要がありません。
以下の例は、MarkdocファイルでのStarlightのカードコンポーネントのレンダリングを示しています:
Markdocファイルでのコンポーネントの使用方法についての詳細は、Astro Markdoc統合ドキュメントを参照してください。
組み込みコンポーネント
Starlightは、一般的なドキュメントのユースケースに対応した組み込みコンポーネントを提供しています。
これらのコンポーネントは、MDXファイルでは@astrojs/starlight/components
パッケージから、MarkdocファイルではStarlight Markdocプリセットから利用できます。
利用可能なコンポーネントとその使用方法のリストについては、サイドバーを参照してください。
Starlightのスタイルとの互換性
Starlightは、Markdownコンテンツにデフォルトのスタイリングを適用します。例えば、要素間にマージンを追加します。
これらのスタイルがコンポーネントの外観と競合する場合は、not-content
クラスをコンポーネントに設定して無効化できます。
コンポーネントのprops
astro/types
からのComponentProps
タイプを使用して、コンポーネント自体がエクスポートしていない場合でも、コンポーネントが受け入れるProps
を参照できます。
これは、既存のコンポーネントをラップまたは拡張する際に役立ちます。
以下の例では、ComponentProps
を使用してStarlightの組み込みIcon
コンポーネントが受け入れるpropsのタイプを取得しています: