Bludit Blowfish Theme: Vorstellung und Einrichtung

Was Blowfish als Theme für Bludit mitbringt, wie es installiert wird und welche drei Voreinstellungen man nach der Installation anpassen sollte.

Warum Blowfish

bludit-blowfish von Spleenftw bringt fünf Farbschema (Light, Dark, Nord, Dracula, Catppuccin) über einen Picker in der Navigationsbar mit, dazu ein Inhaltsverzeichnis (Desktop und mobil) in der Seitenleiste (sticky ToC), Lightbox, Suche sowie Codeblöcke mit Copy-Button und Syntaxhervorhebung. Und das ohne jQuery, ohne Bootstrap-JavaScript und mit selbst gehosteten Schriften: keine Anfrage an ein CDN, kein Font-Nachladen von Google.

Wer Bludit als Flat-File-CMS wählt, weil es schlank ist, bekommt hier ein Theme, das dieselbe Linie hält.

Was drinsteckt

Fünf Farbschema. Die Auswahl landet in localStorage und zusätzlich in einem Cookie, damit die Seite schon serverseitig in der richtigen Farbe ausgeliefert wird — kein Aufblitzen beim nächsten Aufruf. Ohne Auswahl richtet sich das Theme nach der Systemeinstellung.

Inhaltsverzeichnis. Sobald ein Beitrag Überschriften der Ebenen 2 bis 4 enthält, schaltet das Layout von zwei auf drei Spalten und blendet links ein Verzeichnis ein, das beim Scrollen mitwandert. Am Telefon übernimmt ein Knopf unten rechts, der eine Liste hochschiebt.

Suche im Browser. Ein JSON-Index aller Beiträge steckt im Seitenfuß; die Suche läuft vollständig im Browser, ohne Anfrage an den Server. Aufrufbar über die Lupe oder die Taste /.

Tastenkürzel. / öffnet die Suche, g h springt zur Startseite, t nach oben, Esc schließt Überlagerungen.

Für Inhalte: Callout-Kästen, Codeblöcke mit Reitern, ein Bilderkarussell, Lightbox, Bildunterschriften aus dem Markdown-Titel, Aufgabenlisten mit Häkchen, Fortschrittsbalken beim Lesen, Zurück-nach-oben-Knopf und eine Serien-Navigation über Tags nach dem Muster series-*.

Fürs Drumherum: Open Graph, Twitter Cards, JSON-LD, kanonische URLs, ein Web-App-Manifest, Bildgrößen werden serverseitig eingesetzt, damit beim Laden nichts springt.

Wie das alles aussieht, steht auf meiner Testseite — dort ist jede Formatierung einmal aufgeführt, samt der Schreibweise darunter.

Installation

Das Theme kommt als Verzeichnis, es gibt nichts zu bauen:

cd bl-themes
git clone https://github.com/Spleenftw/bludit-blowfish.git

Danach im Administrationsbereich unter Einstellungen → Themes aktivieren. Vorausgesetzt wird Bludit ab Version 3.22.0. Wie der Unterbau bei mir aussieht, steht im Beitrag zum Hosting mit Docker und Caddy.

Ein Hinweis für Docker-Setups: Liegt das Bludit-Verzeichnis in einem gemounteten Volume, gehört das Theme auf den Host und nicht in den laufenden Container — sonst ist es beim nächsten --force-recreate verschwunden.

Drei Voreinstellungen, die man ändern sollte

Nach dem Aktivieren sieht die Seite fertig aus. An drei Stellen zeigt sie allerdings noch auf den Theme-Autor statt auf einen selbst.

Der Avatar. Das Theme lädt img/spleenftw.jpeg — im Hero der Startseite, in der Seitenleiste und als Vorschaubild für alle Beiträge ohne eigenes Titelbild. Am einfachsten ersetzt man die Datei unter demselben Namen durch ein eigenes Bild. Wer sie umbenennen will, muss den Pfad in php/home.php, php/sidebar.php und php/head.php nachziehen.

Die E-Mail-Adresse. Das Theme zieht sie aus Bludits Absenderadresse (Einstellungen → Erweitert → E-Mail). Ist die leer, greift eine fest hinterlegte Ersatzadresse aus index.php — und die gehört dem Theme-Autor. Der Briefumschlag im Menü schickt Post dann an einen Fremden. Also entweder die Absenderadresse in Bludit setzen oder die Zeile in index.php anpassen.

Das Twitter-Handle. In index.php steht $blowfishTwitterHandle = '@spleenftw'. Dieser Wert landet in twitter:site und twitter:creator, jede geteilte Seite schreibt sich damit dem Theme-Autor zu. Hier hilft nur die Änderung in der Datei: Meta-Tags entstehen serverseitig, und Suchmaschinen wie soziale Netzwerke führen kein JavaScript aus. Wer kein Twitter-Konto hat, setzt den Wert auf eine leere Zeichenkette.

[!NOTE] Die ersten beiden Punkte lassen sich ohne Eingriff in Theme-Dateien lösen. Beim dritten geht es nicht — das ist zugleich die Grenze aller Anpassungen, die nur im Browser stattfinden.

Was ich sonst noch geändert habe

Beim Einrichten sind mir fünf Kleinigkeiten aufgefallen — vom unsichtbaren Fortschrittsbalken im hellen Schema bis zu einem Seitensprung beim Farbwechsel. Wie ich die ohne Änderung an den Theme-Dateien behoben habe, steht im nächsten Beitrag: Eigene Optimierungen.