旁注

要与页面的主要内容一起显示次要信息，请使用 <Aside> 组件。

预览

注释

在 <Aside> 中包含非必要的补充信息。

导入

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

用法

使用 <Aside> 组件显示一个旁注（也称为“admonitions”或“callouts”）。

一个 <Aside> 可以有一个可选的 type 属性，它控制旁注的颜色、图标和默认标题。

MDX

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

<Aside>Some content in an aside.</Aside>

<Aside type="caution">Some cautionary content.</Aside>

<Aside type="tip">

Other content is also supported in asides.

```js
// A code snippet, for example.
```

</Aside>

<Aside type="danger">Do not give your password to anyone.</Aside>

Markdoc

{% aside %}
Some content in an aside.
{% /aside %}

{% aside type="caution" %}
Some cautionary content.
{% /aside %}

{% aside type="tip" %}
Other content is also supported in asides.

```js
// A code snippet, for example.
```
{% /aside %}

{% aside type="danger" %}
Do not give your password to anyone.
{% /aside %}

预览

注释

旁注中的一些内容。

警告

一些警示性内容。

提示

旁注中也支持其他内容。

// A code snippet, for example.

危险

不要将你的密码告诉任何人。

Starlight 还提供了一种自定义语法，用于在 Markdown 和 MDX 中渲染旁注，作为 <Aside> 组件的替代方案。有关自定义语法的详细信息，请参阅“在 Markdown 中编写内容”指南。

使用自定义标题

通过使用 title 属性来覆盖默认的旁注标题。

MDX

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

<Aside type="caution" title="Watch out!">
  A warning aside *with* a custom title.
</Aside>

Markdoc

{% aside type="caution" title="Watch out!" %}
A warning aside *with* a custom title.
{% /aside %}

预览

请注意！

一个带有自定义标题的警告旁注。

使用自定义图标

通过将 icon 属性设置为 Starlight 的一个内置图标的名称来覆盖默认的旁注图标。

MDX

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

<Aside type="tip" icon="starlight">
  A tip aside *with* a custom icon.
</Aside>

Markdoc

{% aside type="tip" icon="starlight" %}
A tip aside *with* a custom icon.
{% /aside %}

预览

提示

一个带有自定义图标的提示旁注。

<Aside> 属性

实现： Aside.astro

<Aside> 组件接受以下属性

type

type： 'note' | 'tip' | 'caution' | 'danger'
默认值： 'note'

要显示的旁注类型

• note 类型的旁注（默认）是蓝色的，并显示一个信息图标。
• tip 类型的旁注是紫色的，并显示一个火箭图标。
• caution 类型的旁注是黄色的，并显示一个三角形的警告图标。
• danger 类型的旁注是红色的，并显示一个八角形的警告图标。

title

类型： string

要显示的旁注标题。如果未设置 title，将使用当前旁注 type 的默认标题。

icon

type： StarlightIcon

旁注可以包含一个 icon 属性，设置为 Starlight 的一个内置图标的名称。