# Shortcodes im Überblick > Akkordeon, Buttons, Card, Carousel, Galerie, GitHub, Icons, KaTeX, Lead, Mermaid, Chart, Specs und Tabs - die Shortcodes des Themes. _Quelle: https://theme.docs.tbsch.de/de/post/2026-01-26-shortcodes/ · Stand: 2026-01-26_ Das Theme bringt eine Handvoll Shortcodes mit - hier sind sie, alphabetisch sortiert. Diagramme (*Mermaid*) und Mathe (*KaTeX*) tauchen hier kompakt auf und werden im Beitrag [Diagramme und Mathe](/de/post/2026-02-09-diagramme-und-mathe/) ausführlich gezeigt. ## Akkordeon Aufklappbare Abschnitte auf Basis von nativem `
` - **ganz ohne JavaScript**. Standardmäßig ist nur ein Eintrag gleichzeitig geöffnet; mit `single="false"` dürfen mehrere offen sein. Mit `open="true"` startet ein Eintrag aufgeklappt. ```markdown {{< accordion >}} {{< accordion-item label="Was ist ein Shortcode?" icon="puzzle" >}} Ein wiederverwendbarer Baustein als **Markdown**. {{< /accordion-item >}} {{< accordion-item label="Brauche ich JavaScript?" open="true" >}} Nein - es nutzt natives `
`/``. {{< /accordion-item >}} {{< /accordion >}} ```
Was ist ein Shortcode?
Ein wiederverwendbarer Baustein, den du mitten im Markdown aufrufst.
Brauche ich dafür JavaScript?
Nein - das Akkordeon nutzt natives <details>/<summary> und funktioniert auch ohne aktiviertes JavaScript.
Kann mehr als ein Eintrag offen sein?
Standardmäßig nicht - setze single="false", um es zu erlauben.
## Amazon Rendert ein Affiliate-Produkt als Karte. Du übergibst nur den Affiliate-Reflink; Titel, Beschreibung, Bild und Preis kommen aus einem Build-Cache (`data/products.yaml`), den `script/fetch-amazon-products.js` aus der Amazon Creators API befüllt - der Site-Build selbst spricht Amazon nie an. Das Produktbild lädt erst nach Zustimmung über den Consent-Manager *Klaro* von Amazons CDN, und der Link trägt `rel="sponsored"` (was automatisch den Werbehinweis einblendet). Der Preis wird nur angezeigt, solange die Cache-Daten frisch sind (< 24 h) - gemäß Amazons Vorgaben. ```markdown {{< amazon "https://amzlink.to/az0sqPpjSZX54" >}} ```
Midea Portasplit Cool Mobile Klimaanlage nur Kühlung

Midea Portasplit Cool Mobile Klimaanlage nur Kühlung

Auf Amazon ansehen
Funktioniert auch im Card-Grid - mehrere `amazon`-Shortcodes zwischen `card-grid`-Tags legen und sie ordnen sich als gleich hohe Zellen an: ```markdown {{< card-grid cols=2 >}} {{< amazon "https://amzlink.to/az0sqPpjSZX54" >}} {{< amazon "https://amzlink.to/az0demo1234" >}} {{< /card-grid >}} ```
Midea Portasplit Cool Mobile Klimaanlage nur Kühlung

Midea Portasplit Cool Mobile Klimaanlage nur Kühlung

Auf Amazon ansehen
Raspberry Pi 5 (8 GB RAM)

Raspberry Pi 5 (8 GB RAM)

Quad-Core Cortex-A76 @ 2,4 GHz, PCIe 2.0, Dual-4K-HDMI — der Einplatinenrechner für dein nächstes Homelab-Projekt.

Auf Amazon ansehen
## Buttons Ein Button ist ein als Schaltfläche gestylter Link. ```markdown {{< button href="https://gohugo.io" target="_blank" >}}Zur Hugo-Doku{{< /button >}} {{< button href="https://example.com/produkt" sponsored="true" >}}Affiliate-Link{{< /button >}} ``` Zur Hugo-Doku Affiliate-Link Mit `sponsored="true"` bekommt der Button ein Einkaufswagen-Symbol und `rel="sponsored"` - dadurch wird oben auf der Seite **automatisch** der Werbehinweis eingeblendet (scroll mal hoch). Statt `href` kannst du auch `pageRef="posts/01-willkommen"` für interne Ziele angeben. ## Card Bettet einen Beitrag, eine Kategorie, Serie oder Seite als Karte mitten in den Text ein - im selben Look wie die Karten der Übersichtsseiten. Der Typ wird automatisch erkannt; mit `type="article|category|series|page"` lässt er sich überschreiben. ```markdown {{< card "posts/01-willkommen" >}} {{< card "series/beispiel-serie" >}} ```
## Card Grid Mehrere Cards nebeneinander, im selben Grid-Look wie die Übersichtsseiten. `cols` (optional, Standard `2`, maximal `4`) bestimmt die Spaltenzahl auf dem Desktop; auf schmalen Viewports bricht das Grid auf eine Spalte um. In den Inhalt gehören Card-Shortcodes. ```markdown {{< card-grid >}} {{< card "posts/01-willkommen" >}} {{< card "series/beispiel-serie" >}} {{< /card-grid >}} ```
Mit `cols=3`: ```markdown {{< card-grid cols=3 >}} {{< card "posts/02-markdown-grundlagen" >}} {{< card "posts/03-admonitions" >}} {{< card "posts/05-bilder-und-galerien" >}} {{< /card-grid >}} ```
## Carousel Ein horizontal wischbares Karussell. Jede Folie kann ein **Bild** oder beliebigen **Markdown** enthalten. Ohne JavaScript bleibt es ein per Swipe/Scroll bedienbarer Streifen; mit JS kommen Pfeil-Buttons, Punkte und Tastatursteuerung (Pfeiltasten) dazu. Am Ende geht es standardmäßig wieder beim ersten Slide los; `loop="false"` schaltet das ab (die Pfeile stoppen dann an den Enden). Mit `auto=5` blättert das Karussell alle 5 Sekunden automatisch weiter - nur bei aktivem `loop`, pausiert bei Hover/Fokus (der Timer läuft danach dort weiter, wo er stand) und respektiert reduzierte Bewegung. Die Pill des aktiven Slides füllt sich mit dem Timer. `ratio` bestimmt das Seitenverhältnis des Rahmens (Standard `"16 / 9"`, z. B. `ratio="21 / 9"` oder `ratio="4 / 3"`). ```markdown {{< carousel >}} {{< carousel-slide >}}![Alpe](carousel-1.webp){{< /carousel-slide >}} {{< carousel-slide >}} ### Auch Markdown Jede Folie nimmt **beliebigen** Inhalt - Überschriften, Listen, Code. {{< /carousel-slide >}} {{< /carousel >}} ```
Berglandschaft

Bilder oder Markdown #

Jede Folie nimmt beliebigen Inhalt auf:

  • Überschriften und Fließtext
  • Listen
  • Code
Noch eine Aussicht
Und mit Automatik (`auto=5`) und reinen Text-Folien - deren Inhalt rückt seitlich ein, damit die Pfeile nichts überdecken: ```markdown {{< carousel auto=5 ratio="21 / 9" >}} {{< carousel-slide >}}### Folie eins …{{< /carousel-slide >}} {{< carousel-slide >}}### Folie zwei …{{< /carousel-slide >}} {{< carousel-slide >}}### Folie drei …{{< /carousel-slide >}} {{< /carousel >}} ```

Folie eins #

Blättert alle 5 Sekunden automatisch weiter.

Folie zwei #

Hover oder Fokus pausiert die Automatik.

Folie drei #

Nach der letzten Folie geht es vorn weiter (loop).

## Chart Ein Diagramm via selbst gehostetem Chart.js, nur geladen, wenn der Shortcode vorkommt. Der innere Inhalt ist die Chart.js-Konfiguration als **valides JSON**; Achsen, Gitter und Legende folgen dem Theme und färben live um, wenn du auf den Dunkelmodus umschaltest. ```markdown {{< chart title="Besucher pro Monat" >}} { "type": "bar", "data": { "labels": ["Jan", "Feb", "Mär"], "datasets": [{ "label": "Besucher", "data": [820, 932, 1290] }] } } {{< /chart >}} ```
## Galerie Der `gallery`-Shortcode ordnet mehrere Bilder als Masonry-Spalten an. Im **Automatik-Modus** schreibst du einfach ein Bild pro Zeile; `cols` (optional, Standard `3`) bestimmt die Spaltenzahl auf dem Desktop, auf dem Handy wird daraus eine Spalte. Alle Bilder einer Galerie bilden **eine** durchwischbare Lightbox-Gruppe (*PhotoSwipe*); verlinkte Bilder (`[![…](…)](url)`) bleiben normale Links und gehören nicht dazu. ```markdown {{< gallery cols="2" >}} ![Wohnzimmer](galerie-1.webp) ![Wechselrichter](galerie-2.webp) ![Mini-PC](galerie-3.webp) ![Am Mac](galerie-4.webp) {{< /gallery >}} ```
WohnzimmerWechselrichter
Mini-PCAm Mac
Statt der Automatik kannst du die Spalten mit verschachtelten `gallery-column`-Blöcken auch **explizit** belegen - `cols` wird dann ignoriert, die Spaltenzahl ergibt sich aus der Zahl der Blöcke. Alle Details (Spaltenlogik, Bildunterschriften, responsive Größen, verlinkte Bilder) zeigt der Beitrag [Bilder und Galerien](/de/post/2026-02-02-bilder-und-galerien/). ## GitHub Bettet die OpenGraph-Vorschau eines Repos ein. Das externe Vorschaubild lädt erst nach Zustimmung über den Consent-Manager *Klaro* - der Link zum Projekt funktioniert immer. ```markdown {{< github repo="gohugoio/hugo" >}} ```
gohugoio/hugo auf GitHub
gohugoio/hugo auf GitHub besuchen
## Icons `{{< ti name >}}` setzt ein *Tabler*-Icon mitten in den Text, das mit der Schriftgröße mitwächst - z. B. oder . Jeder Name aus dem [Tabler-Outline-Set](https://tabler.io/icons) funktioniert (bewusst nur *Outline*, nicht *Filled* - das Theme bindet ausschließlich das Strich-Set ein, damit alle Icons dieselbe Liniensprache sprechen). ## KaTeX Setzt **einmalig** den Marker-Shortcode `{{< katex >}}` auf die Seite - er lädt den (selbst gehosteten) *KaTeX*-Renderer. Danach schreibst du Mathematik inline mit `$ ... $` und abgesetzt mit `$$ ... $$`; geladen wird KaTeX nur, wenn der Marker vorkommt. ```markdown {{< katex >}} Inline: die Eulersche Identität $e^{i\pi} + 1 = 0$. ``` Inline: die Eulersche Identität $e^{i\pi} + 1 = 0$, abgesetzt die Gauß-Summe: $$ \sum_{k=1}^{n} k = \frac{n(n+1)}{2} $$ Block-, Matrizen- und mehrzeilige Formeln zeigt der Beitrag [Diagramme und Mathe](/de/post/2026-02-09-diagramme-und-mathe/). ## Lead Ein hervorgehobener Einleitungsabsatz. Der Inhalt wird als Markdown gerendert. ```markdown {{< lead >}} Ein **Lead**-Absatz fasst den Beitrag in ein, zwei Sätzen zusammen. {{< /lead >}} ```
Ein Lead-Absatz fasst den Beitrag in ein, zwei Sätzen zusammen - größer gesetzt und optisch abgesetzt vom Fließtext.
## Mermaid Schreibt ein Diagramm als Text in einen `mermaid`-Shortcode. Das (selbst gehostete) *Mermaid* wird nur geladen, wenn der Shortcode vorkommt, und folgt automatisch dem hellen bzw. dunklen Farbschema (auch beim Live-Umschalten). ```markdown {{< mermaid >}} graph LR A[Markdown] --> B[HTML] {{< /mermaid >}} ``` 
graph LR
  A[Markdown] --> B[HTML]
Flowcharts, Sequenz-, Klassen-, Zustands-, Gantt- und weitere Diagrammtypen zeigt der Beitrag [Diagramme und Mathe](/de/post/2026-02-09-diagramme-und-mathe/). ## Specs Ein Datenblatt listet die Eckdaten eines Produkts als Zeilen mit Icon und Bezeichnung. Mit `title2` und einem `value2` je Zeile wird daraus ein direkter Vergleich zweier Produkte. ```markdown {{< specs title="Midea PortaSplit Cool" badge="Datenblatt" >}} {{< spec icon="snowflake" label="Kühlleistung" value="2,35 kW" >}} {{< spec icon="tag" label="Preis (UVP)" value="899 €" >}} {{< /specs >}} ```
DatenblattMidea PortaSplit Cool
Kühlleistung 2,35 kW (8.000 BTU)
Für Räume bis 28 m²
Lautstärke im Silent-Modus 38 dB(A)
Preis (UVP) 899 €
Mit `title2` wird daraus ein Vergleich zweier Produkte; `image`/`image2` setzen ein Produktbild je Spalte, `link`/`link2` ergänzen einen Kauf-Button:
VergleichPortaSplit CoolPortaSplit
PortaSplit CoolPortaSplit
Kühlleistung 2,35 kW (8.000 BTU)3,5 kW (12.000 BTU)
Für Räume bis 28 m²42 m²
Lautstärke im Silent-Modus 38 dB(A)39 dB(A)
Heizfunktion NeinJa
Preis (UVP) 899 €1.199 €
Zum AngebotZum Angebot
## Tabs Tabs gruppieren alternative Inhalte (z. B. pro Betriebssystem). Tabs mit gleichem `group` synchronisieren sich seitenweit: Wählst du in einer Gruppe "macOS", springen alle anderen Gruppen ebenfalls auf "macOS". `group` ist dabei nur der interne Sync-Schlüssel; `label` setzt den für Screenreader vorgelesenen Namen der Tab-Leiste (ohne `label` greift die übersetzte Standardbezeichnung "Tabs" - nie der `group`-Schlüssel selbst). ```markdown {{< tabs group="os" label="Betriebssystem" >}} {{< tab label="Linux" icon="brand-debian" >}} `sudo apt install hugo` {{< /tab >}} {{< tab label="macOS" icon="brand-apple" >}} `brew install hugo` {{< /tab >}} {{< /tabs >}} ```

Installation per Paketmanager:

sudo apt install hugo

Installation per Homebrew:

brew install hugo

Installation per Winget:

winget install Hugo.Hugo.Extended
Mit `default="macOS"` wird ein anderer Tab als der erste vorausgewählt; mit `md=false` wird der Inhalt eines Tabs nicht als Markdown interpretiert. Diese zweite Gruppe nutzt dasselbe `group="os"` - wechsle oben das Betriebssystem und beobachte, wie sie mitspringt (die Wahl wird zudem gemerkt):
Konfigurationsdatei unter ~/.config/hugo.toml.
Konfigurationsdatei unter ~/Library/Application Support/hugo.toml.
Konfigurationsdatei unter %AppData%\hugo.toml.