Zum Inhalt springen
tbsch Theme
EnglishDeutsch
Funktionen

Shortcodes im Überblick

Max Mustermann 8 Min. Lesezeit 1653 Wörter < 1k Aufrufe
#Shortcodes#Hugo

Werbung Diese Seite enthält Werbe-/Affiliate-Links, erkennbar am Einkaufswagen-Symbol. Als Amazon-Partner verdiene ich an qualifizierten Verkäufen.

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 ausführlich gezeigt.

Akkordeon #

Aufklappbare Abschnitte auf Basis von nativem <details> - 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.

{{< 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 `<details>`/`<summary>`.
{{< /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.

{{< 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:

{{< 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.

{{< 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.

{{< 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.

{{< card-grid >}}
{{< card "posts/01-willkommen" >}}
{{< card "series/beispiel-serie" >}}
{{< /card-grid >}}

Mit cols=3:

{{< card-grid cols=3 >}}
{{< card "posts/02-markdown-grundlagen" >}}
{{< card "posts/03-admonitions" >}}
{{< card "posts/05-bilder-und-galerien" >}}
{{< /card-grid >}}

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").

{{< 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:

{{< 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.

{{< 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.

{{< 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.

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.

{{< 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 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.

{{< 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.

Lead #

Ein hervorgehobener Einleitungsabsatz. Der Inhalt wird als Markdown gerendert.

{{< 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).

{{< 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.

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.

{{< 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).

{{< 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.
Mitgeredet

Reaktionen

Noch keine Reaktionen - sei die/der Erste.

Auf Mastodon antworten Auf Bluesky antworten
Weiterlesen

Verwandte Beiträge