Nebenbemerkungen
Um sekundäre Informationen neben dem Hauptinhalt einer Seite anzuzeigen, verwende die Komponente <Aside>
.
import { Aside } from '@astrojs/starlight/components';
Verwendung
Abschnitt betitelt „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.
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>
{% 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 %}
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
Abschnitt betitelt „Benutzerdefinierte Titel verwenden“Überschreibe die voreingestellten Überschriften der Nebenbemerkungen mit dem Attribut title
.
import { Aside } from '@astrojs/starlight/components';
<Aside type="caution" title="Aufgepasst!"> Ein Warnhinweis *mit* einem benutzerdefinierten Titel.</Aside>
{% aside type="caution" title="Aufgepasst!" %}Ein Warnhinweis *mit* einem benutzerdefinierten Titel.{% /aside %}
Benutzerdefinierte Symbole verwenden
Abschnitt betitelt „Benutzerdefinierte Symbole verwenden“Überschreibe die Standard-Symbole der Nebenbemerkungen, indem du das Attribut icon
auf den Namen eines der in Starlight integrierten Symbole setzt.
import { Aside } from '@astrojs/starlight/components';
<Aside type="tip" icon="starlight"> Ein Hinweis *mit* einem benutzerdefinierten Symbol.</Aside>
{% aside type="tip" icon="starlight" %}Ein Hinweis *mit* einem benutzerdefinierten Symbol.{% /aside %}
<Aside>
-Eigenschaften
Abschnitt betitelt „<Aside>-Eigenschaften“Implementation: Aside.astro
Die Komponente <Aside>
akzeptiert die folgenden Eigenschaften:
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.
Typ: string
Die Überschrift der anzuzeigenden Nebenbemerkung.
Wenn title
nicht gesetzt ist, wird der Standardtitel für den aktuellen type
der Nebenbemerkung verwendet.
Typ: StarlightIcon
Eine Nebenbemerkung kann ein icon
-Attribut enthalten, das auf den Namen eines der in Starlight integrierten Symbole gesetzt ist.