{"version":"https://jsonfeed.org/version/1.1","title":"tbsch Theme","home_page_url":"https://theme.docs.tbsch.de/de/","feed_url":"https://theme.docs.tbsch.de/de/feed.json","description":"Ein modernes, datenschutzfreundliches Hugo-Theme — Demo \u0026 Dokumentation.","language":"de","authors":[{"name":"Max Mustermann","url":"https://theme.docs.tbsch.de/"}],"items":[{"id":"https://theme.docs.tbsch.de/de/post/2026-02-23-willkommen/","url":"https://theme.docs.tbsch.de/de/post/2026-02-23-willkommen/","title":"Willkommen beim tbsch-Theme","summary":"Ein Überblick über das tbsch-Theme und wie diese Demo-Seite aufgebaut ist.","date_published":"2026-02-23T00:00:00Z","date_modified":"2026-02-23T00:00:00Z","tags":["Grundlagen","hugo","theme","einstieg"],"_social":{"hashtags":[],"mentions":{"mastodon":[],"bluesky":[]}},"content_text":"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.\nWas 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 (\u003e [!note], \u003e [!warning], …), auch aufklappbar. Suche (Pagefind, 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.\nWo du anfängst # Thema Beitrag Markdown \u0026 Typografie Markdown-Grundlagen Hinweisboxen Admonitions Shortcodes Shortcodes im Überblick Bilder \u0026 Galerien Bilder und Galerien Diagramme \u0026 Mathe Diagramme und Mathe Front Matter \u0026 SEO Front Matter und SEO Am besten arbeitest du dich der Reihe nach durch - oder springst direkt zu dem Thema, das dich gerade interessiert."},{"id":"https://theme.docs.tbsch.de/de/post/2026-02-16-front-matter-und-seo/","url":"https://theme.docs.tbsch.de/de/post/2026-02-16-front-matter-und-seo/","title":"Front Matter und SEO","summary":"Sämtliche Theme-Parameter im Front Matter mit genauer Wirkung: Anzeige-Schalter, Werte, Titelbild und der discovery-Block für SEO.","date_published":"2026-02-16T00:00:00Z","date_modified":"2026-03-01T00:00:00Z","tags":["Grundlagen","seo","front-matter","konfiguration"],"_social":{"hashtags":[],"mentions":{"mastodon":[],"bluesky":[]}},"content_text":"Das Theme liest eine ganze Reihe eigener Front-Matter-Parameter. Fast jeder hat einen globalen Default in params.yaml und lässt sich pro Seite (oder pro Sektion via cascade) überschreiben. Die Auflösung ist: Front Matter → globaler Default → Theme-Fallback.\nTheme-Parameter gehören in den params:-Block Alles, was das Theme auswertet, gehört in den params:-Block - so bleibt sichtbar, was von Hugo und was vom Theme kommt. Alle Beispiele hier zeigen es genau so.\nLesezeit \u0026 Wortzahl fehlen hier mit Absicht Dieser Beitrag setzt showReadingTime: false und showWordCount: false im params:-Block - deshalb sind beide im Hero ausgeblendet. Bei allen anderen Beiträgen erscheinen sie.\nAufbau des Front Matter # --- title: \"Mein Beitrag\" # von Hugo gelesen date: 2026-02-16 draft: false description: \"…\" categories: [\"Funktionen\"] # Taxonomien tags: [\"hugo\"] params: # alles Theme-spezifische in diesen Block showReadingTime: false featureimage: titel.webp discovery: noindex: true --- Anzeige-Schalter # Boolesche Schalter (Default in Klammern). Ein expliziter Wert im params:-Block gewinnt - auch ein false:\nparams: showDate: true # (an) Veröffentlichungsdatum im Hero showDateUpdated: true # (an) \"Aktualisiert\"-Datum aus lastmod im Hero showReadingTime: true # (an) Lesezeit in der Meta-Zeile showWordCount: true # (an) Wortzahl in der Meta-Zeile showTaxonomies: true # (an) Tags \u0026 Kategorien im Hero showTableOfContents: true # (an) schwebendes Inhaltsverzeichnis (links) showHeadingAnchors: true # (an) Direktlink-Anker an jeder Überschrift showAuthor: true # (an) Autoren-Box am Ende showSharingLinks: true # (an) Teilen-Leiste showComments: true # (an) Reaktionen/Kommentare am Ende showPagination: true # (an) vor/zurück innerhalb der Sektion showRelatedContent: false # (AUS) \"Verwandte Beiträge\" unter dem Beitrag showDraftLabel: true # (an) \"Entwurf\"-Badge, solange draft: true seriesOpened: true # (an) Serien-Box startet aufgeklappt Werte-Parameter # Parameter mit einem Wert statt eines Schalters:\nparams: # Nur diese Netzwerke in der Teilen-Leiste zeigen (Schlüssel aus # data/sharing.yaml); überschreibt den globalen Satz aus params.yaml. sharingLinks: [\"bluesky\", \"mastodon\", \"email\"] # Anzahl der \"Verwandten Beiträge\" (Default 3), wenn showRelatedContent an ist. relatedContentLimit: 5 # Autorname NUR für die strukturierten Daten (Person/JSON-LD) dieser Seite; # überschreibt den Standardautor aus params.yaml. author: \"Gastautorin\" Social-Tags fürs Cross-Posting (socialTags) # socialTags ist keine flache Liste, sondern ein Block mit hashtags und mentions (je Netzwerk). Er wird nicht auf der Seite gerendert, sondern in den JSON Feed unter der Erweiterung _social geschrieben - von dort übernimmt ihn ein Cross-Posting-Dienst und hängt beim automatischen Posten nach Mastodon bzw. Bluesky die Hashtags und @-Erwähnungen an.\nparams: socialTags: hashtags: - SelfHosted - DNS - PiHole mentions: mastodon: [\"selfhosted@lemmy.world\"] bluesky: [\"mariushosting.com\"] Titelbild (featureimage) # Das Hero-/Titelbild löst das Theme in dieser Reihenfolge auf:\nparams.featureimage (lokaler Pfad oder absolute URL), ein Bild namens *background*/*feature*/*cover*/*thumbnail* im Bündel, das defaultBackgroundImage aus params.yaml. params: featureimage: titelbild.webp # Bild im Beitragsbündel … # featureimage: https://…/og.png # … oder eine absolute URL Der discovery-Block (Crawling, Index, Suche) # Für SEO bringt das Theme einen eigenen discovery:-Block mit - Hugo hat dafür keine Entsprechung. Alle Schalter haben einen sinnvollen Default, du setzt nur die Abweichung:\nparams: discovery: noindex: true # default false → \u003cmeta name=\"robots\" content=\"noindex\"\u003e nofollow: true # default false → ergänzt nofollow sitemap: false # default true → Seite aus sitemap.xml entfernen search: false # default true → Seite aus der Pagefind-Suche entfernen llms: false # default true → Seite aus llms.txt entfernen partials/seo-robots.html ist die einzige Quelle für die Robots-Direktive (Front Matter → 404 → Default index, follow); es schreibt nur die Opt-out- Tokens (noindex/nofollow), nie das implizite index, follow. Die Sitemap ist daran gekoppelt: jede noindex-Seite fällt automatisch aus der Sitemap.\nDie dünnen Schlagwort-Seiten setzen genau das per cascade in content/tags/_index.md; die Rechtsseiten (siehe Datenschutz) kombinieren noindex mit search: false + llms: false und outputs: [\"HTML\"].\nKuratierte Schlagwort-Hubs (linkTitle + discovery) # Eine Schlagwort-Seite ist standardmäßig dünn und noindex (die Cascade oben). Um ein Schlagwort in einen indexierbaren Evergreen-Hub zu verwandeln - eine kuratierte Landing-Page, die den Hauptbegriff besetzt, während die einzelnen Beiträge ihre Long-Tails behalten - gib dem Schlagwort ein eigenes _index.md unter content/tags/\u003ctag\u003e/:\n# content/tags/seo/_index.md --- title: \"Suchmaschinen-Optimierung\" # \u003ch1\u003e der Seite + SEO-Titel linkTitle: \"seo\" # kurzes Label in den Tag-Chips description: \"…\" # Hero-Lede + Meta-Description discovery: noindex: false # zurück in den Index, überschreibt die Thin-Tag-Cascade sitemap: true --- Einleitungsabsatz/-absätze, gerendert über der Liste der getaggten Beiträge. Das eigene discovery der Seite überschreibt die kind: term-Cascade aus content/tags/_index.md, sodass dieses eine Schlagwort index, follow wird und wieder in der Sitemap steht; der Body erscheint als Intro über den Beiträgen.\ntitle vs. linkTitle Die Tag-Chips (die #tag-Pills im Beitrags-Hero und in der /tags/-Wolke) rendern .LinkTitle, die Hub-Seite rendert .Title als ihr \u003ch1\u003e. So kann ein beschreibender title: \"Suchmaschinen-Optimierung\" die Überschrift der Seite bleiben, während linkTitle: \"seo\" jeden Chip als knappes #seo hält - ohne linkTitle würde der volle Titel in jeden Chip lecken. (Chips werden per CSS kleingeschrieben, linkTitle braucht also nur die Kurzform, nicht die exakte Groß-/Kleinschreibung.)\nAutorenprofil (authorProfile) # Auf einer “Über mich”-Seite sorgt authorProfile: true für ProfilePage- und Person-JSON-LD (mit sameAs-Links aus params.author.links) - siehe die Seite Über mich.\nparams: authorProfile: true Kategorie-Icon (categoryIcon) # Im _index.md einer Kategorie (content/categories/\u003cname\u003e/) bestimmt categoryIcon das Tabler-Icon, das auf der Kategorie-Karte erscheint (Default tag):\n# content/categories/funktionen/_index.md params: categoryIcon: rocket Hugo-eigene Schlüssel # Diese liest Hugo selbst, nicht das Theme:\ntitle, date, lastmod, draft - Titel und Daten. lastmod wird (bei aktivem showDateUpdated) als “Aktualisiert”-Datum angezeigt. description, summary - Meta-Description bzw. Lede/Teaser. categories, tags, series - die drei Taxonomien des Themes. translationKey - verbindet die Sprachvarianten eines Beitrags. slug, url - URL-Steuerung. outputs - Ausgabeformate (z. B. nur HTML). aliases - clientseitige Weiterleitungs-Stubs (automatisch noindex), praktisch für alte oder Kurz-URLs: aliases: - /alte-url/ - /l/kurzlink Die vollständige Liste dieser Schlüssel steht in der Hugo-Dokumentation zum Front Matter ."},{"id":"https://theme.docs.tbsch.de/de/post/2026-02-09-diagramme-und-mathe/","url":"https://theme.docs.tbsch.de/de/post/2026-02-09-diagramme-und-mathe/","title":"Diagramme und Mathe","summary":"Alle Möglichkeiten von Chart.js (Charts), KaTeX (Mathe) und Mermaid (Diagramme): Chart-/Diagrammtypen, Formelsatz und wie sie nur bei Bedarf geladen werden.","date_published":"2026-02-09T00:00:00Z","date_modified":"2026-02-09T00:00:00Z","tags":["Funktionen","charts","mermaid","katex","diagramme"],"_social":{"hashtags":[],"mentions":{"mastodon":[],"bluesky":[]}},"content_text":"Chart.js (Charts), KaTeX (Mathe) und Mermaid (Diagramme) sind selbst gehostet und werden nur dann geladen, wenn der jeweilige Shortcode auf der Seite vorkommt - kein unnötiges JavaScript auf Seiten ohne sie. Auf der Shortcodes-Seite sind sie kurz vorgestellt; hier gehen wir in die Tiefe. Jedes Beispiel hat zwei Tabs: Beispiel zeigt das Ergebnis, Code die Quelle dazu.\nCharts: das Grundprinzip # Der chart-Shortcode rendert ein Canvas mit Chart.js . Der Inhalt ist die Konfiguration als JSON (type + data); ein optionales title setzt das Accessible-Label des Canvas. Achsen-, Raster- und Textfarben sind an die Theme-Tokens gebunden und wechseln live beim Umschalten des Dark Mode; Datenreihen ohne eigene Farbe werden aus der Akzent-Palette der Seite gefüllt.\nLiniendiagramm # Beispiel Code { \"type\": \"line\", \"data\": { \"labels\": [\"Mo\", \"Di\", \"Mi\", \"Do\", \"Fr\", \"Sa\", \"So\"], \"datasets\": [ { \"label\": \"Desktop\", \"data\": [120, 132, 101, 134, 90, 60, 70], \"tension\": 0.35 }, { \"label\": \"Mobil\", \"data\": [220, 182, 191, 234, 210, 150, 160], \"tension\": 0.35 } ] } } Balkendiagramm # Zwei Datenreihen werden als gruppierte Balken dargestellt; eine Legende kommt automatisch dazu.\nBeispiel Code { \"type\": \"bar\", \"data\": { \"labels\": [\"Q1\", \"Q2\", \"Q3\", \"Q4\"], \"datasets\": [ { \"label\": \"2025\", \"data\": [42, 55, 48, 61] }, { \"label\": \"2026\", \"data\": [51, 63, 59, 74] } ] } } Ringdiagramm # Für eine einzelne Reihe von Anteilen gibst du der Datenreihe ein explizites backgroundColor-Array, damit jedes Segment eine eigene Farbe bekommt.\nBeispiel Code { \"type\": \"doughnut\", \"data\": { \"labels\": [\"Organisch\", \"Direkt\", \"Social\", \"Verweise\"], \"datasets\": [ { \"data\": [58, 22, 12, 8], \"backgroundColor\": [\"#ff5d8f\", \"#f59e0b\", \"#8b5cf6\", \"#12a594\"] } ] } } Netzdiagramm # Beispiel Code { \"type\": \"radar\", \"data\": { \"labels\": [\"Performance\", \"Barrierefreiheit\", \"Best Practices\", \"SEO\", \"PWA\"], \"datasets\": [ { \"label\": \"Vorher\", \"data\": [72, 88, 80, 90, 40] }, { \"label\": \"Nachher\", \"data\": [98, 100, 95, 100, 80] } ] } } KaTeX: das Grundprinzip # Setz einmal den Marker-Shortcode {{\u003c katex \u003e}} auf die Seite - er lädt den KaTeX-Renderer. Die eigentliche Mathematik schreibst du danach ganz normal im Fließtext mit $ ... $ (inline) bzw. $$ ... $$ (abgesetzt); ein Marker genügt für die ganze Seite.\nBeispiel Code Inline: $E = mc^2$ steht mitten im Satz, ohne die Zeilenhöhe zu sprengen. Abgesetzt landet die Formel zentriert in eigener Zeile:\n$$ \\int_{-\\infty}^{\\infty} e^{-x^2}\\,dx = \\sqrt{\\pi} $$Inline: $E = mc^2$ steht mitten im Satz. $$ \\int_{-\\infty}^{\\infty} e^{-x^2}\\,dx = \\sqrt{\\pi} $$ Brüche, Wurzeln, Potenzen und Indizes # Beispiel Code $$ \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a} \\qquad \\sqrt[3]{x} \\qquad a_{i,j}^{2} $$$$ \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a} \\qquad \\sqrt[3]{x} \\qquad a_{i,j}^{2} $$ Summen, Produkte, Grenzwerte # Beispiel Code $$ \\sum_{k=1}^{n} k = \\frac{n(n+1)}{2} \\qquad \\prod_{i=1}^{n} i = n! \\qquad \\lim_{x \\to 0} \\frac{\\sin x}{x} = 1 $$$$ \\sum_{k=1}^{n} k = \\frac{n(n+1)}{2} \\qquad \\prod_{i=1}^{n} i = n! \\qquad \\lim_{x \\to 0} \\frac{\\sin x}{x} = 1 $$ Griechische Buchstaben und Operatoren # Beispiel Code $$ \\alpha,\\ \\beta,\\ \\gamma,\\ \\Delta,\\ \\Omega \\qquad \\nabla \\cdot \\vec{E} = \\frac{\\rho}{\\varepsilon_0} \\qquad x \\in \\mathbb{R},\\ A \\subseteq B $$$$ \\alpha,\\ \\beta,\\ \\gamma,\\ \\Delta,\\ \\Omega \\qquad \\nabla \\cdot \\vec{E} = \\frac{\\rho}{\\varepsilon_0} \\qquad x \\in \\mathbb{R},\\ A \\subseteq B $$ Matrizen # Beispiel Code $$ \\begin{pmatrix} a \u0026 b \\\\ c \u0026 d \\end{pmatrix} \\begin{pmatrix} x \\\\ y \\end{pmatrix} = \\begin{pmatrix} ax + by \\\\ cx + dy \\end{pmatrix} $$$$ \\begin{pmatrix} a \u0026 b \\\\ c \u0026 d \\end{pmatrix} \\begin{pmatrix} x \\\\ y \\end{pmatrix} = \\begin{pmatrix} ax + by \\\\ cx + dy \\end{pmatrix} $$ Mehrzeilig ausgerichtet und Fallunterscheidungen # Mit aligned richtest du an \u0026 aus, mit cases setzt du Fallunterscheidungen:\nBeispiel Code $$ \\begin{aligned} f(x) \u0026= (x+1)^2 \\\\ \u0026= x^2 + 2x + 1 \\end{aligned} \\qquad |x| = \\begin{cases} x, \u0026 \\text{falls } x \\ge 0 \\\\ -x, \u0026 \\text{sonst} \\end{cases} $$$$ \\begin{aligned} f(x) \u0026= (x+1)^2 \\\\ \u0026= x^2 + 2x + 1 \\end{aligned} \\qquad |x| = \\begin{cases} x, \u0026 \\text{falls } x \\ge 0 \\\\ -x, \u0026 \\text{sonst} \\end{cases} $$ Mermaid: das Grundprinzip # Du beschreibst das Diagramm als Text zwischen {{\u003c mermaid \u003e}} und {{\u003c /mermaid \u003e}} - Mermaid rendert daraus im Browser ein SVG. Die erste Zeile bestimmt den Diagrammtyp (graph/flowchart, sequenceDiagram, classDiagram, …).\nBeispiel Code graph LR A[Markdown] --\u003e B{Render-Hook} B --\u003e C[WebP] B --\u003e D[Lightbox] graph LR A[Markdown] --\u003e B{Render-Hook} B --\u003e C[WebP] B --\u003e D[Lightbox] Flussrichtung und Knotenformen # graph/flowchart kennt die Richtungen TD (oben→unten), LR, RL und BT. Die Klammern um den Knotentext bestimmen die Form: [eckig], (rund), ([Stadion]), {Raute}, ((Kreis)).\nBeispiel Code flowchart TD Start([Start]) --\u003e Frage{Alles grün?} Frage --\u003e|ja| Deploy[Deploy] Frage --\u003e|nein| Fix(Fehler beheben) Fix --\u003e Frage Deploy --\u003e Ende((Fertig)) flowchart TD Start([Start]) --\u003e Frage{Alles grün?} Frage --\u003e|ja| Deploy[Deploy] Frage --\u003e|nein| Fix(Fehler beheben) Fix --\u003e Frage Deploy --\u003e Ende((Fertig)) Sequenzdiagramm # Für Abläufe zwischen Beteiligten - mit Aktivierungsbalken und Notizen.\nBeispiel Code sequenceDiagram participant B as Besucher participant S as Server B-\u003e\u003eS: GET /post/... activate S S--\u003e\u003eB: HTML (vorgerendert) deactivate S Note over B: Dark Mode anwenden (kein Flash) sequenceDiagram participant B as Besucher participant S as Server B-\u003e\u003eS: GET /post/... activate S S--\u003e\u003eB: HTML (vorgerendert) deactivate S Note over B: Dark Mode anwenden (kein Flash) Klassendiagramm # Beispiel Code classDiagram class Beitrag { +string Titel +Date Datum +render() string } class Serie { +string Name } Serie \"1\" o-- \"*\" Beitrag : enthält classDiagram class Beitrag { +string Titel +Date Datum +render() string } class Serie { +string Name } Serie \"1\" o-- \"*\" Beitrag : enthält Zustandsdiagramm # Beispiel Code stateDiagram-v2 [*] --\u003e Entwurf Entwurf --\u003e Review: einreichen Review --\u003e Entwurf: Änderungen Review --\u003e Veröffentlicht: freigeben Veröffentlicht --\u003e [*] stateDiagram-v2 [*] --\u003e Entwurf Entwurf --\u003e Review: einreichen Review --\u003e Entwurf: Änderungen Review --\u003e Veröffentlicht: freigeben Veröffentlicht --\u003e [*] Gantt-Diagramm # Beispiel Code gantt title Projektfahrplan dateFormat YYYY-MM-DD section Planung Konzept :done, des1, 2026-01-01, 2026-01-07 Entwurf :active, des2, 2026-01-08, 5d section Umsetzung Bau : des3, after des2, 10d Test \u0026 Launch : des4, after des3, 4d gantt title Projektfahrplan dateFormat YYYY-MM-DD section Planung Konzept :done, des1, 2026-01-01, 2026-01-07 Entwurf :active, des2, 2026-01-08, 5d section Umsetzung Bau : des3, after des2, 10d Test \u0026 Launch : des4, after des3, 4d Tortendiagramm # Beispiel Code pie showData title Zeit pro Aufgabe \"Schreiben\" : 45 \"Basteln\" : 35 \"Aufräumen\" : 20 pie showData title Zeit pro Aufgabe \"Schreiben\" : 45 \"Basteln\" : 35 \"Aufräumen\" : 20 ER-Diagramm # Beispiel Code erDiagram KATEGORIE ||--o{ BEITRAG : hat BEITRAG }o--o{ TAG : verschlagwortet erDiagram KATEGORIE ||--o{ BEITRAG : hat BEITRAG }o--o{ TAG : verschlagwortet Mermaid übernimmt automatisch das helle bzw. dunkle Farbschema und re-rendert live, wenn du den Dark Mode umschaltest - probier oben rechts den Umschalter aus, während ein Diagramm sichtbar ist.\nUnter der Haube # Was beide Shortcodes im Hintergrund erledigen - ganz ohne Zutun:\nSelbst gehostet, kein CDN. Mermaid, KaTeX (inklusive Schriften) und Chart.js sind aus npm ins Theme vendort und werden von der eigenen Domain geladen - DSGVO-freundlich, keine Drittanbieter-Requests. Nur bei Bedarf. Die Bibliotheken landen ausschließlich auf Seiten, die den mermaid-, katex- bzw. chart-Shortcode nutzen (.HasShortcode). Seiten ohne Diagramme, Formeln oder Charts laden kein zusätzliches JavaScript. CSP-freundlich. Die Init-Skripte werden als reguläre \u003cscript src\u003e mit Subresource-Integrity defer geladen, nicht inline - eine strenge Content Security Policy ohne unsafe-inline bleibt möglich. Dark Mode live. Ein MutationObserver auf html.dark rendert die Diagramme neu und thematisiert die Charts um, sobald das Farbschema wechselt (Mermaid und Chart.js thematisieren nur zur Render-Zeit). Stabile Größen. Mermaid misst Textboxen beim Rendern; das Init wartet auf document.fonts.ready, damit die Diagramme mit der geladenen Schrift vermessen werden und ihre Größe zwischen Reloads nicht springt. Sicher. Mermaid läuft mit securityLevel: \"strict\". KaTeX rendert per Auto-Render nur die Prosa-Bereiche der Seite und lässt Code-Blöcke unangetastet - $-Zeichen in Beispielen bleiben also stehen. "},{"id":"https://theme.docs.tbsch.de/de/post/2026-02-02-bilder-und-galerien/","url":"https://theme.docs.tbsch.de/de/post/2026-02-02-bilder-und-galerien/","title":"Bilder und Galerien","summary":"Wie das Theme Bilder verarbeitet - WebP, responsiv, zoombar - plus Bildunterschriften, Größen und Galerien.","date_published":"2026-02-02T00:00:00Z","date_modified":"2026-02-02T00:00:00Z","tags":["Funktionen","bilder","galerie","lightbox"],"_social":{"hashtags":[],"mentions":{"mastodon":[],"bluesky":[]}},"content_text":"Dieser Beitrag hat ein Titelbild: Ein Bild namens feature.webp im Beitragsbündel wird automatisch als Hero-Hintergrund erkannt. (Alternativ greift featureimage: im Front Matter, ein Bild namens *background*/*cover*/*thumbnail* im Bündel oder das defaultBackgroundImage der Seite.)\nDer Bild-Render-Hook # Jedes ganz normale Markdown-Bild wird automatisch nach WebP umgerechnet, in mehreren Größen (srcset) responsiv ausgeliefert, lazy geladen - und ist per Lightbox (PhotoSwipe) zoombar. Du schreibst einfach:\n![Ein Arbeitsablauf als Diagramm](workflow.webp) Klick aufs Bild öffnet die volle Auflösung. Kein manuelles Konvertieren, kein Verlinken auf das Originalbild.\nBildunterschriften # Ein Markdown-Titel (in Anführungszeichen nach der URL) wird zur sichtbaren Bildunterschrift - und gleichzeitig zur Bildunterschrift in der Lightbox:\n![Alt-Text](workflow.webp \"Eine **Bildunterschrift** mit Markdown.\") Eine Bildunterschrift mit Markdown.Bildgrößen # Über ein Block-Attribut auf der Zeile unter dem Bild kannst du die Breite begrenzen - small, medium, large oder wide:\n![Alt](workflow.webp) {class=\"medium\"} Alle vier Größen im Vergleich - small (schmal, z.B. für Hochkant-Screenshots), medium, large und wide (bricht aus der Textspalte aus):\nsmallmediumlargewideGalerie - automatisch # Der gallery-Shortcode legt mehrere Bilder als Spalten an (Masonry). Im Automatik-Modus schreibst du einfach ein Bild pro Zeile; cols bestimmt die Spaltenzahl (Standard 3, auf dem Handy 1). Alle Bilder einer Galerie sind eine zusammenhängende, durchwischbare Lightbox-Gruppe.\nDie Aufteilung erfolgt der Reihe nach, nicht abwechselnd: bei sechs Bildern und drei Spalten landen Bild 1-2 in der ersten, 3-4 in der zweiten und 5-6 in der dritten Spalte. Auf schmalen Viewports lösen sich die Spalten auf und die Bilder fließen wieder in Quellreihenfolge untereinander. Eine Bildunterschrift (Markdown-Titel, siehe oben) funktioniert auch in der Galerie - sichtbar unter dem Bild und als Beschriftung in der Lightbox:\n{{\u003c gallery cols=\"3\" \u003e}} ![Wohnzimmer](galerie/bild-1.webp \"Das Dashboard im Wohnzimmer.\") ![Wechselrichter](galerie/bild-2.webp) ![Mini-PC](galerie/bild-3.webp) ![Am Mac](galerie/bild-4.webp) ![Am iPhone](galerie/bild-5.webp) ![Fensterkontakt](galerie/bild-6.webp) {{\u003c /gallery \u003e}} Das Dashboard im Wohnzimmer. Galerie - explizite Spalten # Für volle Kontrolle, welches Bild in welcher Spalte sitzt, verschachtelst du gallery-column. Der cols-Parameter wird in diesem Modus ignoriert - die Spaltenzahl ergibt sich aus der Zahl der gallery-column-Blöcke, und innerhalb einer Spalte stapeln sich die Bilder in der notierten Reihenfolge. So kannst du etwa Hoch- und Querformate gezielt verteilen oder ein bestimmtes Bild oben links festhalten. Lightbox-Gruppe und Mobil-Verhalten sind dieselben wie im Automatik-Modus.\n{{\u003c gallery \u003e}} {{\u003c gallery-column \u003e}} ![Wohnzimmer](galerie/bild-1.webp) ![Mini-PC](galerie/bild-3.webp) {{\u003c /gallery-column \u003e}} {{\u003c gallery-column \u003e}} ![Wechselrichter](galerie/bild-2.webp) ![Fensterkontakt](galerie/bild-6.webp) {{\u003c /gallery-column \u003e}} {{\u003c /gallery \u003e}} Verlinkte Bilder # Ein Bild, das selbst ein Link ist, wird nicht in die Lightbox-Gruppe aufgenommen - praktisch für anklickbare Logos:\n[![Hugo-Logo](galerie/bild-3.webp)](https://gohugo.io) Unter der Haube # Was die Galerie im Hintergrund erledigt - ganz ohne weitere Parameter:\nJedes Bild durchläuft den normalen Bild-Render-Hook: WebP-Konvertierung, mehrere srcset-Größen, Lazy Loading. Der sizes-Hinweis wird pro Galerie auf die tatsächliche Spaltenbreite umgeschrieben (bei drei Spalten also rund ein Drittel des Viewports) - der Browser lädt dadurch die kleinstmögliche passende Variante statt der vollen Breite. Die Spalten sind Flex-Spalten, keine CSS-Multi-Columns: alle Spalten beginnen in jedem Browser an derselben Oberkante, ohne engine-abhängiges Umbrechen. Auf dem Handy löst display: contents die Spalten auf - die Bilder stehen dann wieder untereinander in Quellreihenfolge. ","image":"https://theme.docs.tbsch.de/post/2026-02-02-images-and-galleries/feature_hu_9b41f50389646781.webp"},{"id":"https://theme.docs.tbsch.de/de/post/2026-01-26-shortcodes/","url":"https://theme.docs.tbsch.de/de/post/2026-01-26-shortcodes/","title":"Shortcodes im Überblick","summary":"Die Shortcodes des Themes: Akkordeon, Buttons, Card, Carousel, Galerie, GitHub, Icons, KaTeX, Lead, Mermaid, Chart, Specs und Tabs.","date_published":"2026-01-26T00:00:00Z","date_modified":"2026-01-26T00:00:00Z","tags":["Funktionen","shortcodes","hugo"],"_social":{"hashtags":[],"mentions":{"mastodon":[],"bluesky":[]}},"content_text":"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.\nAkkordeon # Aufklappbare Abschnitte auf Basis von nativem \u003cdetails\u003e - 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.\n{{\u003c accordion \u003e}} {{\u003c accordion-item label=\"Was ist ein Shortcode?\" icon=\"puzzle\" \u003e}} Ein wiederverwendbarer Baustein als **Markdown**. {{\u003c /accordion-item \u003e}} {{\u003c accordion-item label=\"Brauche ich JavaScript?\" open=\"true\" \u003e}} Nein - es nutzt natives `\u003cdetails\u003e`/`\u003csummary\u003e`. {{\u003c /accordion-item \u003e}} {{\u003c /accordion \u003e}} Was ist ein Shortcode? Ein wiederverwendbarer Baustein, den du mitten im Markdown aufrufst. Brauche ich dafür JavaScript? Nein - das Akkordeon nutzt natives \u003cdetails\u003e/\u003csummary\u003e 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 (\u003c 24 h) - gemäß Amazons Vorgaben.\n{{\u003c amazon \"https://amzlink.to/az0sqPpjSZX54\" \u003e}} Midea Portasplit Cool Mobile Klimaanlage nur Kühlung\nAuf Amazon ansehen Funktioniert auch im Card-Grid - mehrere amazon-Shortcodes zwischen card-grid-Tags legen und sie ordnen sich als gleich hohe Zellen an:\n{{\u003c card-grid cols=2 \u003e}} {{\u003c amazon \"https://amzlink.to/az0sqPpjSZX54\" \u003e}} {{\u003c amazon \"https://amzlink.to/az0demo1234\" \u003e}} {{\u003c /card-grid \u003e}} Midea Portasplit Cool Mobile Klimaanlage nur Kühlung\nAuf Amazon ansehen Raspberry Pi 5 (8 GB RAM)\nQuad-Core Cortex-A76 @ 2,4 GHz, PCIe 2.0, Dual-4K-HDMI — der Einplatinenrechner für dein nächstes Homelab-Projekt.\nAuf Amazon ansehen Buttons # Ein Button ist ein als Schaltfläche gestylter Link.\n{{\u003c button href=\"https://gohugo.io\" target=\"_blank\" \u003e}}Zur Hugo-Doku{{\u003c /button \u003e}} {{\u003c button href=\"https://example.com/produkt\" sponsored=\"true\" \u003e}}Affiliate-Link{{\u003c /button \u003e}} 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.\nCard # 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.\n{{\u003c card \"posts/01-willkommen\" \u003e}} {{\u003c card \"series/beispiel-serie\" \u003e}} Willkommen beim tbsch-Theme Willkommen beim tbsch-ThemeGrundlagenEin Überblick über das tbsch-Theme: was es kann, wie diese Demo aufgebaut ist und wo du anfängst.\n23 Feb. 2026 2 Min. Beispiel-Serie 3 TeileEine dreiteilige Serie, die zeigt, wie das Theme zusammengehörige Beiträge verknüpft.\nTeil 1: Beispiel-Serie, Teil 1: Der Anfang Teil 2: Beispiel-Serie, Teil 2: Die Mitte Teil 3: Beispiel-Serie, Teil 3: Das Ende 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.\n{{\u003c card-grid \u003e}} {{\u003c card \"posts/01-willkommen\" \u003e}} {{\u003c card \"series/beispiel-serie\" \u003e}} {{\u003c /card-grid \u003e}} Willkommen beim tbsch-Theme Willkommen beim tbsch-ThemeGrundlagenEin Überblick über das tbsch-Theme: was es kann, wie diese Demo aufgebaut ist und wo du anfängst.\n23 Feb. 2026 2 Min. Beispiel-Serie 3 TeileEine dreiteilige Serie, die zeigt, wie das Theme zusammengehörige Beiträge verknüpft.\nTeil 1: Beispiel-Serie, Teil 1: Der Anfang Teil 2: Beispiel-Serie, Teil 2: Die Mitte Teil 3: Beispiel-Serie, Teil 3: Das Ende Mit cols=3:\n{{\u003c card-grid cols=3 \u003e}} {{\u003c card \"posts/02-markdown-grundlagen\" \u003e}} {{\u003c card \"posts/03-admonitions\" \u003e}} {{\u003c card \"posts/05-bilder-und-galerien\" \u003e}} {{\u003c /card-grid \u003e}} Markdown-Grundlagen \u0026 Typografie Markdown-Grundlagen \u0026 TypografieGrundlagenÜberschriften, Listen, Tabellen, Code, Fußnoten, Zitate - wie das Theme Standard-Markdown rendert.\n12 Jan. 2026 4 Min. Admonitions - Hinweisboxen Admonitions - HinweisboxenFunktionenAlle farbigen Hinweisboxen im GitHub-Alert-Stil: note, tip, warning, danger und mehr - auch aufklappbar.\n19 Jan. 2026 2 Min. Bilder und Galerien Bilder und GalerienFunktionenDer Bild-Render-Hook (WebP, responsiv, zoombar), Bildgrößen, Bildunterschriften und die Galerie-Shortcodes.\n2 Feb. 2026 3 Min. 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.\nAm 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\").\n{{\u003c carousel \u003e}} {{\u003c carousel-slide \u003e}}![Alpe](carousel-1.webp){{\u003c /carousel-slide \u003e}} {{\u003c carousel-slide \u003e}} ### Auch Markdown Jede Folie nimmt **beliebigen** Inhalt - Überschriften, Listen, Code. {{\u003c /carousel-slide \u003e}} {{\u003c /carousel \u003e}} Bilder oder Markdown # Jede Folie nimmt beliebigen Inhalt auf:\nÜberschriften und Fließtext Listen Code Und mit Automatik (auto=5) und reinen Text-Folien - deren Inhalt rückt seitlich ein, damit die Pfeile nichts überdecken:\n{{\u003c carousel auto=5 ratio=\"21 / 9\" \u003e}} {{\u003c carousel-slide \u003e}}### Folie eins …{{\u003c /carousel-slide \u003e}} {{\u003c carousel-slide \u003e}}### Folie zwei …{{\u003c /carousel-slide \u003e}} {{\u003c carousel-slide \u003e}}### Folie drei …{{\u003c /carousel-slide \u003e}} {{\u003c /carousel \u003e}} Folie eins # Blättert alle 5 Sekunden automatisch weiter.\nFolie zwei # Hover oder Fokus pausiert die Automatik.\nFolie drei # Nach der letzten Folie geht es vorn weiter (loop).\nChart # 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.\n{{\u003c chart title=\"Besucher pro Monat\" \u003e}} { \"type\": \"bar\", \"data\": { \"labels\": [\"Jan\", \"Feb\", \"Mär\"], \"datasets\": [{ \"label\": \"Besucher\", \"data\": [820, 932, 1290] }] } } {{\u003c /chart \u003e}} 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.\n{{\u003c gallery cols=\"2\" \u003e}} ![Wohnzimmer](galerie-1.webp) ![Wechselrichter](galerie-2.webp) ![Mini-PC](galerie-3.webp) ![Am Mac](galerie-4.webp) {{\u003c /gallery \u003e}} 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.\nGitHub # 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.\n{{\u003c github repo=\"gohugoio/hugo\" \u003e}} gohugoio/hugo auf GitHub besuchen Icons # {{\u003c ti name \u003e}} 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).\nKaTeX # Setzt einmalig den Marker-Shortcode {{\u003c katex \u003e}} 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.\n{{\u003c katex \u003e}} Inline: die Eulersche Identität $e^{i\\pi} + 1 = 0$. Inline: die Eulersche Identität $e^{i\\pi} + 1 = 0$, abgesetzt die Gauß-Summe:\n$$ \\sum_{k=1}^{n} k = \\frac{n(n+1)}{2} $$Block-, Matrizen- und mehrzeilige Formeln zeigt der Beitrag Diagramme und Mathe.\nLead # Ein hervorgehobener Einleitungsabsatz. Der Inhalt wird als Markdown gerendert.\n{{\u003c lead \u003e}} Ein **Lead**-Absatz fasst den Beitrag in ein, zwei Sätzen zusammen. {{\u003c /lead \u003e}} 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).\n{{\u003c mermaid \u003e}} graph LR A[Markdown] --\u003e B[HTML] {{\u003c /mermaid \u003e}} graph LR A[Markdown] --\u003e B[HTML] Flowcharts, Sequenz-, Klassen-, Zustands-, Gantt- und weitere Diagrammtypen zeigt der Beitrag Diagramme und Mathe.\nSpecs # 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.\n{{\u003c specs title=\"Midea PortaSplit Cool\" badge=\"Datenblatt\" \u003e}} {{\u003c spec icon=\"snowflake\" label=\"Kühlleistung\" value=\"2,35 kW\" \u003e}} {{\u003c spec icon=\"tag\" label=\"Preis (UVP)\" value=\"899 €\" \u003e}} {{\u003c /specs \u003e}} 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:\nVergleichPortaSplit 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 Angebot Zum 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).\n{{\u003c tabs group=\"os\" label=\"Betriebssystem\" \u003e}} {{\u003c tab label=\"Linux\" icon=\"brand-debian\" \u003e}} `sudo apt install hugo` {{\u003c /tab \u003e}} {{\u003c tab label=\"macOS\" icon=\"brand-apple\" \u003e}} `brew install hugo` {{\u003c /tab \u003e}} {{\u003c /tabs \u003e}} Linux macOS Windows Installation per Paketmanager:\nsudo apt install hugo Installation per Homebrew:\nbrew install hugo Installation per Winget:\nwinget 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.\nDiese zweite Gruppe nutzt dasselbe group=\"os\" - wechsle oben das Betriebssystem und beobachte, wie sie mitspringt (die Wahl wird zudem gemerkt):\nLinux macOS Windows Konfigurationsdatei unter ~/.config/hugo.toml.Konfigurationsdatei unter ~/Library/Application Support/hugo.toml.Konfigurationsdatei unter %AppData%\\hugo.toml. "},{"id":"https://theme.docs.tbsch.de/de/post/2026-01-19-admonitions-hinweisboxen/","url":"https://theme.docs.tbsch.de/de/post/2026-01-19-admonitions-hinweisboxen/","title":"Admonitions - Hinweisboxen","summary":"Alle farbigen Hinweisboxen im GitHub-Alert-Stil - auch aufklappbar und mit eigenem Titel.","date_published":"2026-01-19T00:00:00Z","date_modified":"2026-01-19T00:00:00Z","tags":["Funktionen","markdown","admonitions"],"_social":{"hashtags":[],"mentions":{"mastodon":[],"bluesky":[]}},"content_text":"Hinweisboxen entstehen aus GitHub-Style-Alerts in ganz normalem Markdown: ein Blockzitat, dessen erste Zeile [!typ] enthält. Der Blockquote-Render-Hook macht daraus eine farbige Box mit Icon und Titel.\nDie Typen # \u003e [!note] \u003e So schreibst du eine Hinweisbox. Hinweis Ein neutraler Hinweis. note ist der Standardtyp.\nInfo Eine Information - wie note, nur in Blau.\nTipp Ein hilfreicher Tipp (tip).\nErfolg Hat geklappt! success ist für erledigte Dinge und Erfolge.\nWichtig Etwas Wichtiges (important), das man nicht überlesen sollte.\nWarnung Eine Warnung (warning) - hier ist Vorsicht geboten.\nVorsicht caution - noch eine Stufe ernster.\nAchtung Achtung, hier kann etwas kaputtgehen - danger.\nFehler Etwas ist fehlgeschlagen (failure).\nFrage Eine offene Frage oder ein FAQ-Eintrag - question.\nEigener Titel # Schreib den Titel hinter den Typ:\n\u003e [!tip] Mein eigener Titel \u003e Inhalt der Box. Mein eigener Titel Der Standardtitel (“Tipp”) wird durch deinen Text ersetzt.\nAufklappbar # Ein + macht die Box zu einem aufgeklappten \u003cdetails\u003e, ein - zu einem zugeklappten:\n\u003e [!info]- Zugeklappt - zum Aufklappen tippen \u003e Dieser Inhalt ist anfangs verborgen. Zugeklappt - zum Aufklappen tippen Dieser Inhalt ist anfangs verborgen und klappt auf Klick aus.\nAufgeklappt - kann zugeklappt werden Diese Box ist offen, lässt sich aber zuklappen.\nAliase # Viele gebräuchliche Schreibweisen werden automatisch übersetzt, z. B. [!warning]/[!attention], [!tip]/[!hint], [!danger]/[!error], [!success]/[!check]/[!done] oder [!question]/[!faq].\nTipp hint ist ein Alias für tip.\nEs gibt außerdem einen Typ affiliate für Werbehinweise - der wird vom Theme auch automatisch oben in Beiträgen mit Affiliate-Links eingeblendet."},{"id":"https://theme.docs.tbsch.de/de/post/2026-01-12-markdown-grundlagen-typografie/","url":"https://theme.docs.tbsch.de/de/post/2026-01-12-markdown-grundlagen-typografie/","title":"Markdown-Grundlagen \u0026 Typografie","summary":"Wie das Theme Standard-Markdown rendert: Typografie, Listen, Tabellen, Code, Fußnoten und mehr.","date_published":"2026-01-12T00:00:00Z","date_modified":"2026-01-12T00:00:00Z","tags":["Grundlagen","markdown","typografie","code"],"_social":{"hashtags":[],"mentions":{"mastodon":[],"bluesky":[]}},"content_text":"Dieser Beitrag zeigt, wie das Theme ganz normales Markdown darstellt - die Lese-Typografie, das Inhaltsverzeichnis (links bei genug Platz) und die Direktlinks an jeder Überschrift entstehen alle automatisch.\nJedes Beispiel hat zwei Tabs: Markdown zeigt das gerenderte Ergebnis, Raw die Quelle dazu.\nÜberschriften \u0026 Inhaltsverzeichnis # # H1 ist für den Seitentitel reserviert (den rendert das Theme im Hero) - im Inhalt geht es deshalb bei ## los. Die ##-Überschriften dieses Beitrags landen im Inhaltsverzeichnis und bekommen beim Drüberfahren einen Direktlink (Anker); die Tiefe steuert tableOfContents in markup.yaml (hier H2–H4). Die Demo-Überschriften im Tab werden isoliert gerendert und halten das Inhaltsverzeichnis sauber.\nMarkdown Raw Überschrift H2 # Überschrift H3 # Überschrift H4 # Überschrift H5 # Überschrift H6 # ## Überschrift H2 ### Überschrift H3 #### Überschrift H4 ##### Überschrift H5 ###### Überschrift H6 Textauszeichnung # Interne Links setzt du am besten per relref-Shortcode - wie diesen zum Willkommens-Beitrag; externe Links öffnen in einem neuen Tab und bekommen automatisch ein passendes Icon (die URL→Icon-Zuordnung steht in data/link-icons.yaml).\nMarkdown Raw Text kann fett, kursiv, beides, durchgestrichen oder als Inline-Code gesetzt werden. Emojis funktionieren ebenfalls 😎.\nEin Absatz mit einem externen Link - er öffnet in einem neuen Tab und trägt sein Icon.\nText kann **fett**, *kursiv*, ***beides***, ~~durchgestrichen~~ oder als `Inline-Code` gesetzt werden. Emojis funktionieren ebenfalls :sunglasses:. Ein Absatz mit einem [externen Link](https://gohugo.io) - er öffnet in einem neuen Tab und trägt sein Icon. Listen # Markdown Raw Ungeordnet:\nErster Punkt Zweiter Punkt Verschachtelt Noch einer Dritter Punkt Geordnet:\nSchritt eins Schritt zwei Schritt drei Aufgabenliste:\nTheme installiert Demo gelesen Eigene Seite gebaut Ungeordnet: - Erster Punkt - Zweiter Punkt - Verschachtelt - Noch einer - Dritter Punkt Geordnet: 1. Schritt eins 2. Schritt zwei 3. Schritt drei Aufgabenliste: - [x] Theme installiert - [x] Demo gelesen - [ ] Eigene Seite gebaut Zitate # Für farbige Hinweisboxen siehe den Beitrag Admonitions - ein einfaches Blockzitat reicht der Blockquote-Render-Hook unverändert durch:\nMarkdown Raw Ein einfaches Blockzitat. Mehrere Zeilen werden zu einem Absatz zusammengefasst.\n\u003e Ein einfaches Blockzitat. Mehrere Zeilen werden zu einem Absatz \u003e zusammengefasst. Tabellen # Markdown Raw Funktion Standard Pro Seite überschreibbar Inhaltsverzeichnis an ja Lesezeit an ja Verwandte Beiträge an ja Teilen-Leiste an ja | Funktion | Standard | Pro Seite überschreibbar | | --- | :---: | :---: | | Inhaltsverzeichnis | an | ja | | Lesezeit | an | ja | | Verwandte Beiträge | an | ja | | Teilen-Leiste | an | ja | Code # Inline-Code wie hugo server steht mitten im Text. Codeblöcke werden mit Chroma klassenbasiert hervorgehoben, damit Hell- und Dunkel-Palette getrennt ausgeliefert werden können:\nMarkdown Raw // Ein kleines Beispiel package main import \"fmt\" func main() { fmt.Println(\"Hallo vom tbsch-Theme!\") } # Front Matter eines Beitrags title: \"Mein Beitrag\" date: 2026-01-01 tags: [\"hugo\", \"theme\"] @@ config @@ -baseURL = \"https://old.example\" +baseURL = \"https://tbsch.de\" languageCode = \"de\" ```go // Ein kleines Beispiel package main import \"fmt\" func main() { fmt.Println(\"Hallo vom tbsch-Theme!\") } ``` ```yaml # Front Matter eines Beitrags title: \"Mein Beitrag\" date: 2026-01-01 tags: [\"hugo\", \"theme\"] ``` ```diff @@ config @@ -baseURL = \"https://old.example\" +baseURL = \"https://tbsch.de\" languageCode = \"de\" ``` Fußnoten # Fußnoten werden ans Ende des Textes gesetzt und verlinkt - und erscheinen zusätzlich als Popover, wenn du eine Referenz mit der Maus überfährst oder per Tastatur fokussierst. (Im Tab rendert die Fußnotenliste am Ende des Tab-Inhalts; in einem echten Beitrag steht sie am Ende des Beitrags.)\nMarkdown Raw Markdown-Fußnoten1 werden ans Ende gesetzt und verlinkt - und erscheinen zusätzlich als Popover, wenn du eine Fußnoten-Referenz wie diese2 mit der Maus überfährst oder per Tastatur fokussierst.\nDas ist die erste Fußnote. ↩︎\nUnd das die zweite, mit einem Link . ↩︎\nMarkdown-Fußnoten[^1] werden ans Ende gesetzt und verlinkt - und erscheinen zusätzlich als Popover, wenn du eine Fußnoten-Referenz wie diese[^2] mit der Maus überfährst oder per Tastatur fokussierst. [^1]: Das ist die erste Fußnote. [^2]: Und das die zweite, mit einem [Link](https://gohugo.io/content-management/shortcodes/). Trennlinien # Markdown Raw Ein horizontaler Trenner separiert Abschnitte:\nDas war’s mit den Grundlagen.\nEin horizontaler Trenner separiert Abschnitte: --- Das war's mit den Grundlagen. "},{"id":"https://theme.docs.tbsch.de/de/post/2025-12-15-beispiel-serie-teil-3-das-ende/","url":"https://theme.docs.tbsch.de/de/post/2025-12-15-beispiel-serie-teil-3-das-ende/","title":"Beispiel-Serie, Teil 3: Das Ende","summary":"Dritter und letzter Teil der Beispiel-Serie.","date_published":"2025-12-15T00:00:00Z","date_modified":"2025-12-15T00:00:00Z","tags":["Funktionen","serien"],"_social":{"hashtags":[],"mentions":{"mastodon":[],"bluesky":[]}},"content_text":"Der dritte und letzte Teil. Damit ist die Serie komplett - die Box oben listet alle drei Teile in Reihenfolge.\nZurück zum Anfang."},{"id":"https://theme.docs.tbsch.de/de/post/2025-12-08-beispiel-serie-teil-2-die-mitte/","url":"https://theme.docs.tbsch.de/de/post/2025-12-08-beispiel-serie-teil-2-die-mitte/","title":"Beispiel-Serie, Teil 2: Die Mitte","summary":"Zweiter Teil der Beispiel-Serie.","date_published":"2025-12-08T00:00:00Z","date_modified":"2025-12-08T00:00:00Z","tags":["Funktionen","serien"],"_social":{"hashtags":[],"mentions":{"mastodon":[],"bluesky":[]}},"content_text":"Der zweite Teil. Die Serien-Box zeigt jetzt diesen Beitrag als aktuell an und verlinkt die übrigen Teile.\nZurück zu Teil 1 oder weiter zu Teil 3."},{"id":"https://theme.docs.tbsch.de/de/post/2025-12-01-beispiel-serie-teil-1-der-anfang/","url":"https://theme.docs.tbsch.de/de/post/2025-12-01-beispiel-serie-teil-1-der-anfang/","title":"Beispiel-Serie, Teil 1: Der Anfang","summary":"Erster Teil der Beispiel-Serie: wie Serien im Theme funktionieren.","date_published":"2025-12-01T00:00:00Z","date_modified":"2025-12-01T00:00:00Z","tags":["Funktionen","serien"],"_social":{"hashtags":[],"mentions":{"mastodon":[],"bluesky":[]}},"content_text":"Das ist der erste Teil der Serie. Oben siehst du die Serien-Box mit allen Teilen - der aktuelle ist hervorgehoben. Die Box entsteht allein durch das Front Matter:\nseries: - Beispiel-Serie Die Reihenfolge der Teile ergibt sich aus dem Veröffentlichungsdatum - ein zusätzliches Ordnungsfeld ist nicht nötig.\nWeiter geht es in Teil 2."}]}