WkB Blog

A localized and modified version of hugo bear blog. Since you need to understand german anyway to possibly localize it to your language, documentation is in German as well. You can see it in action on https://www.wkb-ev.org/. If you are interested to localize this, hit me up :)

Anpassungen

Eventline

Zur Referenz noch einmal unser Beispiel:

+++
title = "Lesung »Wenn euch das Gefällt« mit Josefine Rieks"
date = "2025年10月17日"
tags = [
 "odradek",
 "lesung"
]
description = "Josefine Rieks kommt zurück ins Odradek! Mit einem Auszug aus »Wenn euch das gefällt« war Josefine Rieks für den Bachmann-Preis 2025 nominiert, nun freuen wir uns auf ihre Lesung am 17. Oktober."
images = ["Josefine-Rieks_Portrait.webp"]
start = "(vermutlich) 18:00"
ort = "Odradek"
+++

Hier einige Beispiele, wenn wir nur den Ort aus dem Beispiel ändern:

• ort = "Subbotnik" --> Lesung am 17. Oktober 2025 ab (vermutlich) 18:00 im Subbotnik
• ort = "auf Anfrage" --> Lesung am 17. Oktober 2025 ab (vermutlich) 18:00 // Ort: auf Anfrage
• ort = "Rosenplatz 12, Chemnitz" --> Lesung am 17. Oktober 2025 ab (vermutlich) 18:00 // Ort: Rosenplatz 12, Chemnitz

Gleiches gilt für die Tags:

• kein ort definiert, aber tag odradek --> Lesung am 17. Oktober 2025 ab (vermutlich) 18:00 im Odradek
• kein ort definiert, tags = [ "odradek", "veranstaltung" ] --> Veranstaltung am 17. Oktober 2025 ab (vermutlich) 18:00 im Odradek
• kein ort definiert, tags = [ "odradek", "konzert" ] --> Konzert am 17. Oktober 2025 ab (vermutlich) 18:00 im Odradek

::: success
Die Logik hinter dieser smarten Unterüberschrift findest du in den partials "eventline.html" und "location.html"

:::

CSS Klassen

• "invert" invertiert bilder im dark mode. praktisch für logos.
  • beispiel: das logo oben in "odradek.md"
• "spacer" garantiert 40px abstand oben & unten. prakisch zum seperieren von sinnzusammenhängen.
  • beispiel: das zweite bild in "odradek.md" wird ohne zu nah am text obendrüber gelayoutet, was okay wäre, wenn es einen sinnzusammenhang dazu gäbe. gibts aber nicht. da noch dazu die folgende überschrift mehr abstand lässt, ist hier etwas abstand nach oben geboten!

Shortcodes

Shortcodes können da wo der content entsteht genutzt werden.

figure-row

• eignet sich sehr für Buchcover + Auszug, aber auch allgemein Bilder mit längerem Text.
• anwendungsbeispiel in "aktuelles/2025-10 lesung rieks/index.md"

{{< figure-row 
	 src="bild.webp" 
	 alt="bildbeschreibung" 
	 precaption="Text über der caption"
 caption="text ohne absätze. **markdown** funktioniert, HTML nicht."
>}}

termine

kann termine gefiltert nach tag anzeigen, praktisch für kleine listen direkt bei der location

{{< events tag="tag_ohne_hash" >}}

logos

Wichtig ist hier, dass der übergebene Ordner neben der datei in der der shortcode verwendet wird existieren muss, pfade und dateinamen keine sonderzeichen wie umlaute (üöä) enthalten dürfen (!) und darin Logos liegen müssen. Unterstützte formate sind ".jpg" ".jpeg" ".png" ".svg" und ".webp".

{{< logos "ordnername">}}

buildtime

gibt den zeitpunkt aus, an dem die webseite das letzte mal gebaut wurde. Allgemein irrelevant, außer zum Debuggen.

Partials

• "feeds-list.html" iteriert über alle Tags und erstellt so eine Liste der verfügbaren Web-Feeds welche über "feeds/single.html" angeschaut werden kann
• "_default/_markup/style.html" und "footer.html" ästhetische Anpassungen Außerdem gibt es einige ästhetische Anpassungen sowie eine weitgehende Übersetzung auf Deutsch.
• "list.html" ist nur zur lokalisierung angepasst
• "eventline.html" enthält die logik für die dynamische Tagline in posts und wird darum in "_default/_markup/single.html" referenziert

Markup

• mit "render-heading.html" bekommen überschriften eine ID, damit auf sie verlinkt werden kann
• "render-image.html" konvertiert Bilder zu WebP, was deutlich kleinere dateien als resultat ergibt. Betrifft leider nicht bilder in metadaten/share cards, hier ist vorher konvertieren sinnvoll.