補足情報

ページのメインコンテンツの横に補足情報を表示するには、<Aside>コンポーネントを使用します。

プレビュー

ノート

<Aside>に重要ではない補足情報を含めます。

インポート

import { Aside } from '@astrojs/starlight/components';

使用方法

<Aside>コンポーネントを使用して補足情報（「アドモニション」や「コールアウト」とも呼ばれる）を表示します。

<Aside>にはオプションのtype属性があり、これによって補足情報の色、アイコン、およびデフォルトのタイトルが制御されます。

MDX

import { Aside } from '@astrojs/starlight/components';

<Aside>補足情報のコンテンツ。</Aside>

<Aside type="caution">注意が必要なコンテンツ。</Aside>

<Aside type="tip">

補足情報には他のコンテンツも対応しています。

```js
// たとえば、コードスニペットなど。
```

</Aside>

<Aside type="danger">パスワードを誰にも教えないでください。</Aside>

Markdoc

{% aside %}
補足情報のコンテンツ。
{% /aside %}

{% aside type="caution" %}
注意が必要なコンテンツ。
{% /aside %}

{% aside type="tip" %}
補足情報には他のコンテンツも対応しています。

```js
// たとえば、コードスニペットなど。
```
{% /aside %}

{% aside type="danger" %}
パスワードを誰にも教えないでください。
{% /aside %}

プレビュー

ノート

補足情報のコンテンツ。

注意

注意が必要なコンテンツ。

ヒント

補足情報には他のコンテンツも対応しています。

// たとえば、コードスニペットなど。

危険

パスワードを誰にも教えないでください。

Starlightは、<Aside>コンポーネントの代替として、MarkdownとMDXで補足情報をレンダリングするためのカスタム構文も提供しています。 カスタム構文の詳細については、“MarkdownでのContent作成”ガイドを参照してください。

カスタムタイトルの使用

title属性を使用して、デフォルトの補足情報タイトルを上書きできます。

MDX

import { Aside } from '@astrojs/starlight/components';

<Aside type="caution" title="注意してください！">
  カスタムタイトル*付きの*警告補足情報。
</Aside>

Markdoc

{% aside type="caution" title="注意してください！" %}
カスタムタイトル*付きの*警告補足情報。
{% /aside %}

プレビュー

注意してください！

カスタムタイトル付きの警告補足情報。

<Aside> プロパティ

実装: Aside.astro

<Aside>コンポーネントは以下のプロパティを受け入れます：

type

型: 'note' | 'tip' | 'caution' | 'danger'
デフォルト: 'note'

表示する補足情報のタイプ：

• note補足情報（デフォルト）は青色で、情報アイコンを表示します。
• tip補足情報は紫色で、ロケットアイコンを表示します。
• caution補足情報は黄色で、三角形の警告アイコンを表示します。
• danger補足情報は赤色で、八角形の警告アイコンを表示します。

title

型: string

補足情報に表示するタイトル。 titleが設定されていない場合、現在の補足情報にtypeのデフォルトタイトルが使用されます。