Ich hatte schon mehrmals angedeutet, dass ich früher oder später von GRAV zu Kirby wechseln will. Leider ist Kirby 4 noch nicht veröffentlicht, aber ich bin das Thema jetzt trotzdem kurzfristig angegangen und hatte mir einen Zeitraum bis Ende dieses Jahres gesetzt um mich damit nicht unnötig zu stressen. Tatsächlich hab ich dann nur 8 Tage gebraucht. Am meisten hab ich mich mit Gestaltungsideen aufgehalten, die gar nichts mit dem Systemwechsel zu tun hatten. Und mit Serverproblemen, für die ich nichts konnte. Providerwechsel steht auf jeden Fall als Nächstes an. Ich hätte gedacht, dass ich für einige Funktionalitäten länger gebraucht hätte. Kirby ist aber sehr gut dokumentiert und im Forum findet man auch Hilfe. Außerdem konnte ich mich mit Manuela einige Male wie gewohnt konstruktiv austauschen hierzu, Danke dafür! Ich musste auch nicht alles "neu erfinden", Logik und Herangehensweise konnte ich aus der alten Welt in großen Teilen übernehmen und – wenn man so will – "übersetzen".
Die Inhalte musste ich händisch kopieren, also 50–60 Seiten und Artikel nochmal neu aufbauen. Man hätte sich bestimmt auch ein Konvertierungsscript basteln können, ich wollte aber sehen, wo ich überall Sonderlocken gezüchtet hab und diese nochmal hinterfragen. Evtl gibt es auch Import-Plugins, hab ich nicht nach gesucht, muss ich zugeben.
Die Planung und Abhaken der einzelnen Todos hab ich übrigens nach Langem mal wieder mit Things gemacht, was aber irgendwie mehr holprig als hilfreich war. Nächstes Mal vielleicht besser wieder Taskpaper.
Warum weg von Grav?
Ich hab für etliche Fragen keine Antwort gefunden oder bekommen, auch wenn die Doku sehr umfangreich erscheint. Vieles hab ich durch Ausprobieren selbst irgendwann hinbekommen und mich gefragt ob diese Anforderungen und Ideen nicht schon zig Leute vor mir hatten. Die Community scheint träge, im Forum ist kaum was los. Ich hab auch nicht das Gefühl, dass wirklich weiterentwickelt wird an Grav.
Warum Kirby?
Kirby hab ich vor einigen Jahren schonmal ins Visier genommen, schon allein, weil ich zu Bastian mal durchaus regen Kontakt hatte (Zootool-Zeit und so), hatte aber keinen konkreten Anlass mich reinzufuchsen. Es kam mir nochmal in den Sinn, als ich mir vor einigen Monaten, nee fast sogar schon vor 'nem Jahr einen aktuellen Überblick über Flat-File-CMS machen wollte. Prompt kam ein Auftrag für ein Website-Projekt rein, für dass ich zunächst Wordpress vorschlug, dann aber mit der Kundin zusammen beschloss, dass wir es mit Kirby aufbauen. Großer Vorteil hier im Vergleich zu Wordpress: Ich kann das Panel (die Administrationsoberfläche von Kirby) so auf den Kunden zuschneiden, wie es passt. Man muss sich nicht von dutzenden von unnötigen Feldern ablenken lassen und schleppt auch nicht tonnenweise ungenutzten Code mit, wie bei Wordpress. Fakt ist aber, dass die Zielgruppe für Kirby Web-Entwickler mit PHP-Kenntnissen sind. Das CMS kommt also nicht für Jede:n in Frage. Blog-Funktionalitäten sind auch erstmal nicht inbegriffen. Um das an den Start zu bringen, kann man aber den – wie gesagt – sehr guten "Rezepten" im Cookbook folgen. Ich fänd wirklich sinnvoll, wenn Bastian und Co. ein Package anbieten würden, das sämtliche Blog-Features schon enthält. Oder gibt es das und ich kenne es nicht? Auch berücksichtigen muss man, dass Kirby nicht kostenfrei ist. Man kann es allerdings ohne zeitliche oder funktionelle Beschränkung testen.
Im Detail
- Ich hab zunächst das blanke Starterkit von Kirby auf einer neuen Subdomain hochgeladen (wichtig: inklusive hidden files). Man kann das auch auf einem lokalen Webserver vorbereiten und so ist es wohl auch gedacht. Ich sehe aber immer gern direkt ob Dinge in der Umgebung laufen, wo es später auch hin soll.
- Danach .htaccess angepasst (
RewriteBase /) - Config anpassen, und Install ermöglichen sonst wirft dass Panel Fehler.
- Nicht wundern, im Plainkit wird im Template nur der Titel ausgegeben. Ich hab mich zunächst gewundert, warum kein Inhalt erscheint.
- erste Templates und Snippets für header und footer erstellt
- Bootstrap 5 und jQuery in /assets/ abgelegt, weil ich mich damit am besten auskenne
- Dann die einfachen textbasierten Standardseiten (Kontakt, Impressum,...) angelegt und erstmal das bisherige Look and Feel versucht nachzubauen (CSS konnte in großen Teilen übernommen werden, muss ich aber noch aufräumen)
- Überlegt, was ich für Felder für einen Artikel brauche und dementsprechend das article.yaml-Blueprint aufgebaut. Parallel in die oben genannte Anleitung geschaut: "Creating a Kirby-powered blog".
- Dann nach und nach Inhalte umkopiert und mein Setup erweitert
Herausforderungen
Datum des folgenden Sonntags im Introtext
Easy:
$date = new DateTime();
$date->modify('next sunday');
$nextSunday = $date->format('d.m.');Letzter Beitrag von Mastodon auf der Startseite
Das kommt über das Feedreader-Plugin. Quelle: RSS-Feed meines Mastodon-Accounts. Sehr geil übrigens, dass Mastodon sowas bereitstellt. Ist ja heute nicht mehr gang und gäbe.
Mastodon-Bildergalerie auf der Startseite
Quelle hierfür ist der RSS-Media-Feed meines Mastodon-Accounts, den gibt's extra, neben dem normalen für alle Posts. Das hab ich mit dem Feedreader Plugin nicht ganz hinbekommen, weil darüber die Bilder nicht "greifbar" waren. Hab die Bilder per Regex aus dem Quellcode gezogen.
$pattern = '#<media\:content url\="([^"]*)"#i';
preg_match_all($pattern, $data, $matches);Link und Beschreibung für den Alt-Text ging easy über XML.
$data = file_get_contents( $feedURL );
$pics = new SimpleXMLElement($data);
...
<a href="<?= $pics->channel->item[$i]->link ?>" ...
<?= strip_tags($pics->channel->item[$i]->description) ?>Hier kommen auch meine Audio-Uploads mit, die muss ich noch besser abfangen, aktuell wird nur ein Dummy-Bild angezeigt mit Link die MP3-Datei. Done, Code-Update folgt demnächst.
Anzahl der Likes pro Artikel aus dem alten System übernehmen
Ich wollte gern die Anzahl der Likes pro Artikel mit übernehmen. Das Plugin für Grav hatte ich ja selbst gebaut, es ähnelt zwar dem von Medienbaecker für Kirby aber, dieses speichert die Summe der Likes nicht, sondern zählt die einzelnen Hashes, die in der Seite gespeichert werden. Da es zu umständlich war an die einzelnen Hashes meiner Variante pro Seite ranzukommen, hab ich versucht zufällige Hashes einzusetzen, was auch funtioniert hat. Das ist zwar im Grunde Fake, aber an die tatsächlichen Daten hinter dem Hash komme ich eh nicht mehr und will ich auch gar nicht.
for ($i=0; $i < $count; $i++) {
echo bin2hex(random_bytes(32)) . ";";
}Neue Likes laufen natürlich ganz normal über das Plugin ein. Ich überlege noch, ob ich dieses abwandle, so dass nicht nur die IP-Nummer gehashed wird, sondern, wie bei meinem Grav-Plugin zusätzlich der Browser. Dann können mehrere Nutzer in einem Haushalt liken.
Done (06.11.2023) in /site/plugins/kirby-likes/index.php (besser wäre wohl in nem Fork bei github):
//Zeile 9:
//$visitor = md5('v-' . kirby()->visitor()->ip());
$visitor = md5('v-' . kirby()->visitor()->ip() . kirby()->visitor()->userAgent() );
//Zeile 93:
//return in_array(md5('v-' . kirby()->visitor()->ip()), $likes);
return in_array(md5('v-' . kirby()->visitor()->ip() . kirby()->visitor()->userAgent() ), $likes);Siehe auch getkirby.com/docs/reference/objects/http/visitor/user-agent.
Bildergalerie in den Artikeln
Hier werden alle Bilder im Ordner der Seite dargestellt außer dem oben gezeigten hero.jpg. Code:
$pageGallery = $page->images()->filterBy('filename', '!=', 'hero.jpg');Wenn ein Bild keinen Alt-Text zugewiesen bekommen hat (übers Panel, wenn ein image-Blueprint vorliegt), wird versucht ein Text aus dem Dateinamen zu nehmen (Beispiel "img_20230930_130839___ausgebrannter-bus.jpg"). Das hatte ich bei Grav schon so umgesetzt, weil es Zeit spart. Kirby setzt die Dateinamen beim Upload übers Panel auf lowercase, das ist hierbei nicht ganz so schön.
if( $image->alt() == "" ) {
$altFromFileName = preg_split("/\\_\\_\\_/u", $image->filename());
$alt = Str::ucfirst(pathinfo($altFromFileName[1], PATHINFO_FILENAME));
} else {
$alt = $image->alt();
}Kirby hält ein paar schöne Funktionen bereit für Bilder. Man kann sie mit crop (siehe) z.B. auf ein gewünschtes Maß beschneiden, hier 480x480 also quadratisch als Thumbnail für das Raster, bei Klick erscheinen die Fullsize-Bilder im Chocolat-Lightbox-Layer.
<img src="<?= $image->crop(480, 480, "center")->url() ?>" alt="<?= $alt ?>" title="<?= $alt ?>" class="img-fluid">RSS-Feed mit neuer Adresse
Ich hab mit dem Kirby3-feed-Plugin einen RSS-Feed unter https://assbach.de/feed/ realisiert. Musste für meine Zwecke den Code etwas erweitern, so, dass z.B. auch die Bilder im Feed erscheinen. Die Adressen der alten Feeds habe ich in der .htaccess weitergeleitet
redirect 301 /blog.rss http://assbach.de/feed/Bei der Gelegenheit hab ich auch gleich zwei weitere Feeds erstellt, über Routes in der config. Auszug:
$feed = page('blog')->children()->listed()->filterBy('tags', 'Wochenrückblick', ',')->sortBy(function ($page) {
return $page->published()->toDate();
}, 'desc')->limit(10)->feed($options);https://assbach.de/feed/wochenrueckblick (wenn man nur an den Rückblicken interessiert ist)
https://assbach.de/feed/wmdedgt (oder nur an den #WMDEDGT Beiträgen)
Suche
Hierfür gibt es eine Anleitung. Hab lediglich im Crontroller die Felder angepasst, die durchsucht werden sollen (alle) und den Output zumindest mal rudimentär angepasst, so dass die Anzahl der Treffer gezeigt wird, oder wenn es eben keine gibt.
$results = $site->search($query, '');Beispiel-Ergebnis für die Suche nach "foc".
assbachSingt Liste von Audiofiles
Die Seite hat natürlich ein eigenes Template. Hier werden MP3s im Ordner aufgelistet und zwar sortiert nach Veröffentlichungsdatum (eigenes Feld, nicht Datum der Datei). Audio-Dateien haben eine eigene Blueprint-Datei mit diversen Feldern. Bei Aufruf der Seite mit Geheimcode werden ein paar mehr Details angezeigt.
<?php foreach($page->audio()->sortBy('published', 'desc') as $audio): ?>Wichtig: Der Blueprint und das Template im Panel für die Files muss VOR Upload der Dateien gesetzt werden. Sonst erhalten die Datei nicht das richtige Template.
Im Blueprint fürs Panel (inklusive Sortierung nach Feld published):
files:
type: files
template: audio
search: true
sortBy: published
flip: true
text: '{{ file.published.toDate("ymd") }} - <b>{{ file.songtitle }}</b>' Search übrigens auch mega an der Stelle!
Passwortgeschützte Seiten
Mit dem Plugin "locked pages" gelöst.
Layout-Anpassungen
Hero-Bereich
Der Content-Bereich ist jetzt etwas breiter. Um Platz zu sparen, hab ich die Head- und Subline sowie ein paar Metadaten wie Veröffentlichungsdatum, Likes und Tags über das Hero-Image (Beitragsbild oben) gesetzt. Mit dem Design bin ich noch nicht wirklich zufrieden. Je nach Bildmotiv ist der Text nicht gut zu lesen, daher hab ich plakativ weiße bzw schwarze Blöcke hinter den Text gelegt, je nach Theme. Das macht das ganze aber sehr "schwer" und vom Bild ist auch kaum noch was zu sehen. Mal gucken ob mir etwas besseres einfällt.
Also Bild wird "hero.jpg" im Content-Folder des Artikels genutzt, falls vorhanden. $page->image('hero.jpg')
Lightbox
Ich mag einfach Chocolat, nutze es in fast allen Projekten und habe das nun auch hier implementiert. Die Bilder werden bei Klick in einem Fullscreenlayer mit gut lesbarem Alt-Text/Bildunterschrift dargestellt. Neu: Auch das Hero-Bild kann so angezeigt werden. Es gibt im Hero-Bereich oben ein Icon um es direkt ohne Textoverlay anzusehen.
Theme-Switch (Wechsel zwischen light- und darkmode)
Im Prinzip das gleiche Script verwendet wie schon vorher, hier klappt es aber nun auch so, wie es soll. Es wird zunächst die Systemeinstellung des Nutzer geprüft und direkt auf Darkmode gestellt, wenn das die Präferenz ist. Den "Schalter" (Sonne-Mond-Icon) zum Wechseln hab ich in den Footer der Seite gesetzt, weil ich denke, dass man das nicht ständig benutzt.
Zusatzinhalte für Vertraute mit Geheimcode
Eine der eben erwähnten Sonderlocken, ist, dass ich weiterhin Infos, die ich nicht öffentlich jeder Person anvertrauen will, über einen Geheimcode für einen auserwählten Kreis sichtbar machen will. Bei Grav hab ich das mittem an unterschiedlichen Stellen im Fließtext über Twig gelöst, abgefragt ob der Code existiert und richtig ist und dann die Textpassagen angezeigt. Hier in Kirby zeige ich diese nun gebündelt am Schluss der Artikel an und verweise mit Fussnoten darauf. Fand ich sauberer in der Umsetzung und Trennung von Code und Inhalt.
Mastodon Kommentare
Carl Schwan hat sein Script nochmal überarbeitet und ich hab die neue Version eingebaut, dann für Kirby und meine Zwecke angepasst, bin aber mit dem Styling noch nicht fertig.
Vorherige und nächste Artikel
Ganz unten rechts unter den Artikeln gibt es jetzt zwei Buttons um durch die vorherigen und nächsten Artikel zu navigieren. Denke Titel würden hier Sinn machen.
Sortierung der Artikelfolder
In site/blueprints/pages/article.yml
title: Blogartikel
num: '{{ page.published.toDate("Ymd") }}'Außerdem gelernt
- Man kann ja die Preview-Links (mit Token) für noch nicht veröffentlichte Seiten weitergeben und ohne Login aufrufen. Me likey.
- template-spezifische Scripts oder CSS können per
<?= js('@auto') ?>und<?= css('@auto') ?>bei Bedarf geladen werden. Müssen dann als einzelne Dateien in/assets/css/templates/templatename.cssoder/assets/js/templates/templatename.jsabgelegt werden.
Offen & geplant
Minimize Code (ggf. mit diesem Plugin)done, mastodon comments javascript inline code musste angepasst werden- Autopublish (ggf. mit diesem Plugin) edit: erst nach Providerwechsel, wegen Cron.
Feed auch als JSON, verworfen, wüsste nicht wofür sinnvoll.Sitemapdone, siehe Feed-PluginSortieren von File-Listen im Panel möglich?done, siehe oben bei assbachSingt.- lowercase beim Upload von Dateien verhindern möglich? edit: v4 abwarten
Ist die Sortierungszahl bei Unterseiten/Ordnern Pflicht?done, kann man anpassen, siehe oben24h Anzeige bei Zeitfeldern (mit Datum) möglich?Ja, einfach nurHHstatthhundnotation: 24Alternative zum Hamburger-Menü(bootstrap), done, per Modal.