Nebenbemerkungen

Um sekundäre Informationen neben dem Hauptinhalt einer Seite anzuzeigen, verwende die Komponente <Aside>.

Vorschau

Hinweis

Füge nicht wesentliche, ergänzende Informationen in ein <Aside>.

Import

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

Verwendung

Zeige eine Nebenbemerkung (auch bekannt als „Hinweise“, „Ermahnungen“ oder „Aufrufe“) mit Hilfe der Komponente <Aside>.

Ein <Aside> kann ein optionales type Attribute haben, welches die Farbe, das Symbol und den Standardtitel der Nebenbemerkung steuert.

MDX

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

<Aside>Einige Inhalte am Rande.</Aside>

<Aside type="caution">Einige warnende Inhalte.</Aside>

<Aside type="tip">

Auch andere Inhalte werden durch Nebenbemerkungen unterstützt.

```js
// Ein Codeschnipsel zum Beispiel.
```

</Aside>

<Aside type="danger">Gib dein Passwort nie an Dritte weiter!</Aside>

Markdoc

{% aside %}
Einige Inhalte am Rande.
{% /aside %}

{% aside type="caution" %}
Einige warnende Inhalte.
{% /aside %}

{% aside type="tip" %}
Auch andere Inhalte werden durch Nebenbemerkungen unterstützt.

```js
// Ein Codeschnipsel zum Beispiel.
```
{% /aside %}

{% aside type="danger" %}
Gib dein Passwort nie an Dritte weiter!
{% /aside %}

Vorschau

Hinweis

Einige Inhalte am Rande.

Achtung

Einige warnende Inhalte.

Tipp

Auch andere Inhalte werden durch Nebenbemerkungen unterstützt.

// Ein Codeschnipsel zum Beispiel.

Gefahr

Gib dein Passwort nie an Dritte weiter!

Starlight bietet auch eine benutzerdefinierte Syntax für die Darstellung von Nebenbemerkungen in Markdown und MDX als Alternative zur <Aside> Komponente. Siehe den Leitfaden „Inhalte in Markdown verfassen“ für Details zu dieser Syntax.

Benutzerdefinierte Titel verwenden

Überschreibe die voreingestellten Überschriften der Nebenbemerkungen mit dem Attribut title.

MDX

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

<Aside type="caution" title="Aufgepasst!">
  Ein Warnhinweis *mit* einem benutzerdefinierten Titel.
</Aside>

Markdoc

{% aside type="caution" title="Aufgepasst!" %}
Ein Warnhinweis *mit* einem benutzerdefinierten Titel.
{% /aside %}

Vorschau

Aufgepasst!

Ein Warnhinweis mit einem benutzerdefinierten Titel.

Benutzerdefinierte Symbole verwenden

Überschreibe die Standard-Symbole der Nebenbemerkungen, indem du das Attribut icon auf den Namen eines der in Starlight integrierten Symbole setzt.

MDX

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

<Aside type="tip" icon="starlight">
  Ein Hinweis *mit* einem benutzerdefinierten Symbol.
</Aside>

Markdoc

{% aside type="tip" icon="starlight" %}
Ein Hinweis *mit* einem benutzerdefinierten Symbol.
{% /aside %}

Vorschau

Tipp

Ein Hinweis mit einem benutzerdefinierten Symbol.

<Aside>-Eigenschaften

Implementation: Aside.astro

Die Komponente <Aside> akzeptiert die folgenden Eigenschaften:

type

Typ: 'note' | 'tip' | 'caution' | 'danger'
Standard: 'note'

Die Art der Nebenbemerkung, die angezeigt werden soll:

• note-Hinweise (die Standardeinstellung) sind blau und zeigen ein Informationssymbol an.
• tip-Hinweise sind violett und zeigen ein Raketensymbol an.
• caution-Hinweise sind gelb und zeigen ein dreieckiges Warnsymbol an.
• danger-Hinweise sind rot und zeigen ein achteckiges Warnsymbol an.

title

Typ: string

Die Überschrift der anzuzeigenden Nebenbemerkung. Wenn title nicht gesetzt ist, wird der Standardtitel für den aktuellen type der Nebenbemerkung verwendet.

icon

Typ: StarlightIcon

Eine Nebenbemerkung kann ein icon-Attribut enthalten, das auf den Namen eines der in Starlight integrierten Symbole gesetzt ist.