コンテンツにスキップ

コンポーネントの使用

コンポーネントを使用すると、UIの一部やスタイリングを一貫して簡単に再利用できます。 例えば、リンクカードやYouTube埋め込みなどが挙げられます。 StarlightはMDXMarkdocファイルでのコンポーネントの使用をサポートし、いくつかの一般的なコンポーネントを提供しています。

Astro Docsでコンポーネントの構築についてさらに学ぶ

MDXでコンポーネントを使用する

コンポーネントを使用するには、MDXファイルにインポートし、JSXタグとしてレンダリングします。 これらはHTMLタグのように見えますが、import文の名前に一致する大文字で始まります:

src/content/docs/example.mdx
---
title: 私のドキュメントへようこそ
---
import { Icon } from '@astrojs/starlight/components';
import CustomCard from '../../components/CustomCard.astro';
<Icon name="open-book" />
<CustomCard>
コンポーネントには**ネストされたコンテンツ**も含めることができます。
</CustomCard>

StarlightはAstroを基盤としているため、MDXファイルでサポートされているUIフレームワーク(React、Preact、Svelte、Vue、Solid、Alpine)で構築されたコンポーネントのサポートを追加できます。 AstroドキュメントのMDXでのコンポーネントの使用についてさらに学んでください。

Markdocでコンポーネントを使用する

Markdocセットアップガイドに従って、Markdocでコンテンツを作成するためのサポートを追加してください。

Starlight Markdocプリセットを使用すると、Markdocの{% %}タグ構文でStarlightの組み込みコンポーネントを使用できます。 MDXとは異なり、Markdocのコンポーネントはインポートする必要がありません。 以下の例は、MarkdocファイルでのStarlightのカードコンポーネントのレンダリングを示しています:

src/content/docs/example.mdoc
---
title: 私のドキュメントへようこそ
---
{% card title="" icon="star" %}
シリウス、ベガ、ベテルギウス
{% /card %}

Markdocファイルでのコンポーネントの使用方法についての詳細は、Astro Markdoc統合ドキュメントを参照してください。

組み込みコンポーネント

Starlightは、一般的なドキュメントのユースケースに対応した組み込みコンポーネントを提供しています。 これらのコンポーネントは、MDXファイルでは@astrojs/starlight/componentsパッケージから、MarkdocファイルではStarlight Markdocプリセットから利用できます。

利用可能なコンポーネントとその使用方法のリストについては、サイドバーを参照してください。

Starlightのスタイルとの互換性

Starlightは、Markdownコンテンツにデフォルトのスタイリングを適用します。例えば、要素間にマージンを追加します。 これらのスタイルがコンポーネントの外観と競合する場合は、not-contentクラスをコンポーネントに設定して無効化できます。

src/components/Example.astro
<div class="not-content">
<p>Starlightのデフォルトのコンテンツスタイリングの影響を受けません。</p>
</div>

コンポーネントのprops

astro/typesからのComponentPropsタイプを使用して、コンポーネント自体がエクスポートしていない場合でも、コンポーネントが受け入れるPropsを参照できます。 これは、既存のコンポーネントをラップまたは拡張する際に役立ちます。

以下の例では、ComponentPropsを使用してStarlightの組み込みIconコンポーネントが受け入れるpropsのタイプを取得しています:

src/components/Example.astro
---
import type { ComponentProps } from 'astro/types';
import { Icon } from '@astrojs/starlight/icon';
type IconProps = ComponentProps<typeof Icon>;
---