Max Mustermann
tbsch ist ein eigenständiges Hugo-Theme - schnell, datenschutzfreundlich
und ohne externe CDNs. Diese Seite zeigt jede Funktion an einem echten Beispiel.
Schön, dass du da bist! Diese Demo ist gleichzeitig die Dokumentation des Themes. Statt einer trockenen Referenz findest du hier lebende Beispiele: Jeder Beitrag stellt einen Funktionsbereich vor und zeigt im Quelltext, wie er gemacht ist.
Was das Theme mitbringt #
- Solarflare-Design - eine Verlaufsfarbe von Orange über Pink nach Violett, Hintergrund-Heroes und ein schwebender Pill-Header.
- Automatischer Dark Mode mit manuellem Schalter und ohne Aufblitzen beim Laden.
- Token-basiertes Design-System - Abstände, Typografie, Radien und Bewegung als CSS-Custom-Properties.
- Bilder, die sich selbst sortieren - jedes Markdown-Bild wird zu WebP umgerechnet, responsiv ausgeliefert und per Lightbox zoombar.
- Shortcodes für Lead-Absätze, Buttons, Tabs, Galerien, GitHub-Karten, Mermaid-Diagramme, KaTeX-Mathe und Inline-Icons.
- GitHub-Style-Admonitions (
> [!note],> [!warning], …), auch aufklappbar. - Suche (Fuse.js, clientseitig), drei Feeds (RSS, Atom, JSON Feed) und ein IndieWeb-Setup (microformats2, Webmentions).
- Datenschutz: alle Schriften und Bibliotheken liegen lokal, externe Einbettungen laufen über den Consent-Manager Klaro.
So liest du diese Demo
Sieh dir jeden Beitrag gerendert an und wirf parallel einen Blick in seine
index.md. Der Markdown-Quelltext ist die eigentliche Anleitung.
Wo du anfängst #
| Thema | Beitrag |
|---|---|
| Markdown & Typografie | Markdown-Grundlagen |
| Hinweisboxen | Admonitions |
| Shortcodes | Shortcodes im Überblick |
| Bilder & Galerien | Bilder und Galerien |
| Diagramme & Mathe | Diagramme und Mathe |
| Front Matter & SEO | Front Matter und SEO |
Am besten arbeitest du dich der Reihe nach durch - oder springst direkt zu dem Thema, das dich gerade interessiert.
