Вставки

Для отображения второстепенной информации рядом с основным содержимым страницы используйте компонент <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 также предоставляет собственный синтаксис для рендеринга в Markdown и MDX в качестве альтернативы компоненту <Aside>. Подробную информацию о пользовательском синтаксисе см. в руководстве Создание контента в Markdown.

Использование пользовательских заголовков

Переопределяйте стандартные заголовки вставок, используя атрибут title.

MDX

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

<Aside type="caution" title="Осторожно!">
  Предупреждение *с* пользовательским заголовком.
</Aside>

Markdoc

{% aside type="caution" title="Осторожно!" %}
Предупреждение *с* пользовательским заголовком.
{% /aside %}

Превью

Осторожно!

Предупреждение с пользовательским заголовком.

Использование пользовательских иконок

Переопределяйте стандартные иконки боковой панели, используя атрибут icon с именем одной из встроенных иконок Starlight.

MDX

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

<Aside type="tip" icon="starlight">
  Подсказка *с* пользовательской иконкой.
</Aside>

Markdoc

{% aside type="tip" icon="starlight" %}
Подсказка *с* пользовательской иконкой.
{% /aside %}

Превью

Совет

Подсказка с пользовательской иконкой.

Параметры <Aside>

Реализация: Aside.astro

Компонент <Aside> принимает следующие параметры:

type

тип: 'note' | 'tip' | 'caution' | 'danger'
по умолчанию: 'note'

Тип вставки для отображения:

• note (по умолчанию), вставка синего цвета, с информационной иконкой.
• tip, вставка фиолетового цвета, с иконкой ракеты.
• caution, вставка жёлтого цвета, с треугольной предупреждающей иконкой.
• danger, вставка красного цвета, с восьмиугольнаой предупреждающей иконкой.

title

тип: string

Заголовок вставки для отображения. Если title не установлен, будет использоваться заголовок по умолчанию для текущего type вставки.

icon

тип: StarlightIcon

Вставка может включать атрибут icon, содержащий имя одной из встроенных иконок Starlight.