Max Mustermann
Diese Seite enthält Werbe-/Affiliate-Links, erkennbar am Einkaufswagen-Symbol.
Das Theme bringt eine Handvoll Shortcodes mit. Galerien, Diagramme und Mathe haben eigene Beiträge - hier sind alle übrigen, alphabetisch sortiert.
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?
Brauche ich dafür JavaScript?
<details>/<summary> und funktioniert
auch ohne aktiviertes JavaScript.Kann mehr als ein Eintrag offen sein?
single="false", um es zu erlauben.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 >}}
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" >}}
Willkommen beim tbsch-Theme
Ein Überblick über das tbsch-Theme und wie diese Demo-Seite aufgebaut ist.
Beispiel-Serie
Eine dreiteilige Serie, die zeigt, wie das Theme zusammengehörige Beiträge verknüpft.
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.
{{< carousel >}}
{{< slide >}}{{< /slide >}}
{{< slide >}}
### Auch Markdown
Jede Folie nimmt **beliebigen** Inhalt - Überschriften, Listen, Code.
{{< /slide >}}
{{< /carousel >}}
GitHub-Karte #
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" >}}
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.
Lead #
Ein hervorgehobener Einleitungsabsatz. Der Inhalt wird als Markdown gerendert.
{{< lead >}}
Ein **Lead**-Absatz fasst den Beitrag in ein, zwei Sätzen zusammen.
{{< /lead >}}
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”.
{{< tabs group="os" >}}
{{< 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):
~/.config/hugo.toml.~/Library/Application Support/hugo.toml.%AppData%\hugo.toml.Webmentions #
{{< webmentions >}} listet die Webmentions zur aktuellen Seite,
{{< webmentions "all" >}} alle gesammelten. Die Daten kommen aus
data/webmentions.json.
- https://brid.gy/like/mastodon/@example@mastodon.social/1/2001 verlinkt → https://example.org/post/2026-01-05-willkommen/
- https://brid.gy/like/mastodon/@example@mastodon.social/1/2002 verlinkt → https://example.org/post/2026-01-05-willkommen/
- https://brid.gy/repost/bluesky/example.com/1/3001 verlinkt → https://example.org/post/2026-01-05-willkommen/
- https://brid.gy/comment/mastodon/@example@mastodon.social/1/4001 verlinkt → https://example.org/post/2026-01-05-willkommen/
- https://brid.gy/comment/bluesky/example.com/1/4002 verlinkt → https://example.org/post/2026-01-26-shortcodes/
Reaktionen (Likes, Reposts, Antworten) werden außerdem automatisch als Facepile unter jedem Beitrag angezeigt - siehe ganz unten.
