Kirby erweitern mit Plug-Ins

Auch wenn man vermeintlich nur eine “einfache” Webseite braucht, kommt doch schnell der Wunsch nach der einen oder anderen zusätzlichen Funktion auf, z.B. eine Bildergalerie oder einen RSS-Feed. Zum Glück muss man nicht das Rad neu erfinden, auf der Kirby-Seite gibt es eine kleine Auswahl an sogenannten Plug-Ins - Module, die jeweils eine bestimmte Funktion zur Verfügung stellen und komplett mit allem benötigten geliefert werden: Template, Blueprint, Assets und was sonst noch benötigt wird. Die Installation solcher Plugins ist recht einfach. Man kopiert sie in den Ordner site/plugins/ und trägt ggf. noch einige Konfigurationsoptionen in der Datei site/config/config.php ein. Die Plugins sind in der Regel gut dokumentiert und lassen sich leicht benutzen.

Assets - Alles was man sonst noch braucht

Eben war die Rede von Assets. Was ist das nun schon wieder? Assets sind zusätzliche Ressourcen, die zu einer Seite hinzu geladen werden können. Beispielsweis Javascript-Libraries wie jquery oder auch zusätzliche eigene CSS-Dateien. Aber auch Zeichensätze werden hier abgelegt oder Bilder, die zum Seitenlayout gehören (Header-Bilder,  Hintergrundbilder oder Icons). Dinge, die man in der Regel für jede Webseite benötigt, egal ob sie mit Kirby, Drupal, Wordpress oder womit auch immer gemacht wird.

Panel: Kirbys Backend

Das Kirby-Panel hatten wir oben schon kurz erwähnt. Es handelt sich um das Backend einer Kirby-Seite und kann optional für die Bearbeitung von Inhalten verwendet werden. Warum eigentlich “optional”? Nun, da Kirby keine Datenbank benutzt und seine Inhalte ausschließlich in Textdateien ablegt, die man mit jedem geeigneten Texteditor bearbeiten kann, kann man auf ein solches Backend durchaus verzichten. Das Bearbeiten und Erstellen von Inhalten ist dann allerdings weniger komfortabel. Dafür erhöht es die Sicherheit der Seite, da nun keine Eingriffe mehr über die Webseite selber mehr möglich sind, sondern nur noch per FTP.

Hinweis: Geeignet sind Texteditoren, die wirklich nur den eingegebenen Text abspeichern, wie z.B. Wordpad, PSPad oder Atom, nicht jedoch Textverarbeitungsprogramme wie Word, die zusätzlich umfangreiche Formatierungsanweisungen speichern.

Direkt nach dem Einloggen auf http://example.edu/panel sehen wir zunächst das Dashboard als Einstiegsseite.

Im linken Block “Seiten” sehen wir die Inhalte (Projects, Blog, About usw.), wobei sich unter jedem dieser Punkte weitere Unterseiten verstecken können. Sichtbare Seiten haben in der rechten Spalte eine Nummer. Diese gibt an, in welcher Reihenfolge die Seiten im Menü erscheinen. Seiten ohne Nummer (hier: Error und Home) haben lediglich einen Strich anstelle einer Nummer. Sie erscheinen nicht im Menü, können jedoch auf andere Weise aufgerufen werden. So wird die Error-Seite immer dann aufgerufen, wenn man eine ungültige URL aufruft, z.B. http://example.edu/diese-url-gibt-es-nicht/

Unter dem Seiten-Block wird die URL unserer Kirby-Seite anzeigt. In der mittleren Spalte erscheint der Account, mit dem wir angemeldet sind. Darunter die zuletzt bearbeiteten Seiten. In der rechten Spalte steht ein Hinweis auf die Kirby-Lizenz. Da Kirby für Testzwecke kostenlos ist, haben wir hier keine Lizenz eingetragen.

Schauen wir uns nun den Bereich “Blog” näher an. Dazu klicken wir auf den Link “Blog” im Seiten-Block. Jetzt sehen wir die übergeordnete Blog-Seite.

In der linken Spalte finden wir die Seiteneinstellungen. Wichtig ist hier der Punkt “URL ändern”. Damit können wir die URL der Seite anpassen, was die Suchmaschinenoptimierung (SEO) hilfreich sein kann. Ein Klick auf “Seite löschen” löscht die Seite. Aber Achtung: im Gegensatz zu manchen anderen CMSen gibt es bei Kirby keinen Papierkorb. Gelöschte Inhalte sind unwiederbringlich weg. In dem Block darunter werden alle Unterseiten aufgelistet. Dabei entspricht jede Unterseite einem Blogbeitrag. Im rechten Seitenbereich sehen wir die verschiedenen Felder der Blog-Hauptseite mit den Feldern “Title”, “Posts per Page”, “Text” und “Hint” - so wie sie im Blueprint “Blog” im Abschnitt “Fields” definiert wurden. Als nächstes klicken wir auf den obersten Blogbeitrag “Content in Kirby” und schauen uns an, wie der eigentliche Blogbeitrag aussieht.

Auch hier haben wir links wieder Seiteneinstellungen. Darunter gibt es jetzt aber etwas Neues: Einen Block mit der Überschrift “Dateien” mit einem Eintrag, der Bilddatei “content.png”. Im rechten Bereich finden wir wieder die Felder “Title” und “Text”. Zusätzlich aber “Cover Image” und “Date”. Diese Felder sind jedoch nicht im Blueprint “Blog” definiert. Wo kommen sie also her? Des Rätsels Lösung: im Blueprint “Blog” werden die Unterseiten (ab “pages:”) mit dem Blueprint “article” verknüpft. Damit erhalten die eigentlichen Blogbeiträge eine eigene Definition. Wenn wir uns diesen Blueprint anschauen, finden wir dort auch die Felder “coverimage” und “date”.

Auszug aus dem Blueprint “Blog”:
<code>
title: Blog

pages:
  template: article

files: false

fields:
   title:
      label: Title
      type:  text
</code>

Content bitte! Der erste eigene Inhalt

Als nächstes wollen wir einen neuen Blogbeitrag anlegen. Dazu gehen wir zurück auf die Blog-Übersicht und klicken im Block “Seiten” auf das “+”-Zeichen rechts. Jetzt erscheint ein Popup und fordert uns auf einen neuen Titel für unseren Blogbeitrag einzugeben.

Wir geben also unter “Eine neue Seite hinzufügen” “Mein erster Blogbeitrag” ein. Während wir tippen, wird das Feld “URL-Anhang” automatisch gefüllt und am Ende steht dort “mein-erster-blogbeitrag”. Wenn uns diese URL nicht gefällt, können wir sie jetzt überschreiben (aber auch später jederzeit noch ändern). Das Feld “Vorlage” ist vorbelegt mit “Article”. Dieser Wert wurde von dem übergeordneten Blueprint “Blog” im Abschnitt “pages:” vorgegeben und kann daher hier nicht geändert werden. Nun klicken wir noch auf “Hinzufügen” und der neue Blogbeitrag ist vorbereitet. Wir müssen ihn jetzt nur noch schreiben. Das Feld “Date” wird übrigens mit dem aktuellen Datum vorbelegt, was man natürlich auch überschreiben kann. Um ein Cover Image zu dem Beitrag hinzu zu fügen, müssen wir zunächst eine entsprechende Bilddatei hochladen. Dazu klicken wir auf das “+”-Zeichen rechts  rechts neben “Dateien”, suchen das gewünschte Bild auf unserer Festplatte und laden es durch Doppelklick hoch. Als nächstes klicken wir in das Feld “Cover Image”. Jetzt können wir das soeben hochgeladene Bild auswählen. Wenn unser Blogbeitrag fertig ist, speichern wir ihn noch mit einem Klick auf “Speichern” ab.

Wenn wir jetzt im Panel zurückgehen auf die Blog-Übersichtsseite, sehen wir, dass unser neuer Beitrag dort ohne Datum steht. Wie kommt das? Ganz einfach, in dem Screenshot oben sehen wir, dass der Beitrag den Status “unsichtbar” hat. Damit wird er auf unserer Webseite nicht ausgegeben. Um das zu ändern, wählen wir den Beitrag zum bearbeiten aus und klicken auf das Status-Feld. Das folgende Popup fragt uns, ob wir den Status auf “Sichtbar” ändern wollen. Das bejahen wir durch einen Klick auf “Ändern”. Und schon erscheint unser Beitrag mit Datum in der Übersicht und wenn wir auf die Webseite gehen und im Menü “Blog” anklicken, sehen wir, dass unser Artikel ganz oben in der Liste der Blogbeiträge erscheint.

Schönere Seite mit “Markdown”

Bisher haben wir nur simplen “Plain Text” in dem Blogbeitrag eingegeben. Oft möchte man aber seine Beiträge ein wenig gestalten, z.B. durch Zwischenüberschriften, Hervorhebungen, Aufzählungen, Bilder oder Links auf andere Seiten. Hier zeigt sich eine Schwäche von Kirby gegenüber anderen CMSen. Es gibt keinen echten WYSIWYG-Editor. Für die Auszeichnung von Texten wird Markdown verwendet. Markdown ist eine Auszeichnungssprache, die 2004 entwickelt wurde. Für die Auszeichnung von Text verwendet es vor allem Satzzeichen. Kirby wandelt das Markdown bei der Ausgabe der Seite dann in HTML um. Das macht es natürlich einfach, die Textdateien, in denen Kirby seine Inhalte verwaltet, mit einem Texteditor zu bearbeiten. Auf der anderen Seite ist diese Methode nicht gerade intuitiv. Hier ein paar Beispiele, wie Inhalte ausgezeichnet werden können. Eine vollständige Liste aller Markdown-Auszeichnungen findet sich auf der Webseite von John Gruber.

Zeilenumbrüche und Absätze: Kirbytext wandelt Zeilenschaltungen automatisch in Zeilenumbrüche oder Absätze um. Hier muss man nichts weiter tun.
Beispiel:
Meine erste Zeile (hier Zeilenumbruch <br />)
Meine zweite Zeile

Ein weiterer Absatz (wird als Paragraph <p> formatiert)
Überschriften: werden mit einem oder mehreren “#” angelegt
# Überschrift 1
## Überschrift 2
### Überschrift 3
usw.

Fettdruck (Bold Text): Der Text wird in “**” eingeschlossen
Beispiel: **The quick brown fox jumps over the lazy dog**

Kursiv (Italic Text): Der Text wird in “_” eingeschlossen
Beispiel: _The quick brown fox jumps over the lazy dog_

Unsortierte Listen (Unordered Lists): durch vorangestellte “-”
Beispiel
- Punkt a
- Punkt b
- Punkt c

Sortierte Listen (Ordered Lists): werden durch vorangestellte Zahlen ausgezeichnet
Beispiel:
1. Punkt a
2. Punkt b
3. Punkt c

Link mit Linktext:     (link: http://wikipedia.org text: Wikipedia)

Tipp: Relative Links
Um auf eigene Seiten innerhalb der eigenen Webseite zu verlinken, kann man sogenannte relative Links setzen. Diese werden ohne den Domainteil (http://example.edu/) angegeben. Diese Methode sollte man immer wählen, wenn man innerhalb der eigenen Webseite verlinkt - auch wenn man ein anderes System als Kirby verwendet. So ist gewährleistet, dass die Links nicht kaputt gehen, wenn man die Seite umzieht, z.B. von der eigenen Entwicklungsumgebung (wo man regelmäßig eine andere Domain hat) auf den Live-Server.
Beispiele: (link: blog) oder (link: projects/project-a)

Bilder in deinem Content-Verzeichnis
Beispiel mit gesetzter Breite und Höhe, sowie mit Alternate Text
(image: mein-tolles-bild.jpg width: 120 height: 200 alt: On this picture you can see a cat)

Hinweis: Werden Bilder von anderen Webseiten eingebaut, muss man unbedingt prüfen, ob die Seite, von der man die Bilder bezieht, dies auch gestattet (Stichwort: Urheberrecht)!

Auch wenn Markdown kein WYSIWYG bietet, kann man mit etwas Übung relativ einfach seine Texte formatieren. Mit der Erweiterung Kirby Visual Markdown kriegt man immerhin ein WYSIWYG-ähnliches Erscheinungsbild.

So sieht eine Seite mit diversen Markdown-Auszeichnungen im Editor aus. Achtung: Nach den “-” bzw. “1.” der Listen muss unbedingt ein Leerzeichen stehen, sonst interpretiert Kirby das nicht als unsortierte oder sortierte Liste, sondern gibt den Text genau so aus und das kann unschön aussehen!

Und so sieht der Beitrag auf der Webseite aus:

Benutzer, Rollen und Berechtigungen

Zum Schluss wollen wir uns noch kurz anschauen, was Kirby in Sachen Benutzer, Rollen und Berechtigungen bietet.

In diesem Punkt ist Kirby sehr spartanisch. Man kann zwar verschiedene Benutzer anlegen. An Rollen stehen aber von Haus aus nur “Admin” und “Editor” zur Verfügung. Damit lassen sich zwar Benutzer anlegen, die entweder über alle Rechte Verfügen (Admin) oder nur Inhalte bearbeiten dürfen, aber keine administrativen Arbeiten ausführen können, wie z.B. neue User anlegen. Das war’s dann aber auch schon. Man kann eigene Rollen definieren, aber ein umfassendes Berechtigungssystem, wie das z.B. Drupal bietet ist das noch lange nicht. Wer auf sowas angewiesen ist, sollte ein anderes CMS wählen.

Vor- und Nachteile

Fassen wir Vor- und Nachteile, die Kirby gegenüber den bekannten Datenbank-basierten CMSen hat zusammen:

Die Installation ist sehr einfach und beschränkt sich auf das Hochladen des Kirbypaketes und der Vergabe eines Admin-Passwortes. Der Verzicht auf eine Datenbank verhindert MySQL-Sicherheitslücken und bietet auch auf schwachbrüstigen Webservern eine ordentliche Performance. Die Dokumentation ist recht gut, wirkt manchmal aber etwas unstrukturiert und macht die Einarbeitung nicht gerade einfacher. Außerdem liegt sie bisher nur in Englisch vor.

Da es keine Datenbank gibt, die man sichern muss, lässt sich nicht nur ein Backup sehr einfach realisieren. Auch eine Versionskontrolle des gesamten Programmcodes und aller Inhalte ist einfach machbar, z.B. mit git. Inhalte können auch ohne Backend eingestellt werden. Ein einfacher FTP-Zugriff und ein Textprogramm genügen schon. Auch mehrsprachige Inhalte sind leicht realisierbar. Da es jedoch keine zentrale Inhaltsverwaltung gibt, geht die Übersicht über vorhandene, fehlende oder veraltete Übersetzungen leicht verloren. Das gilt übrigens auch für die übrigen Inhalte. Ab einem gewissen Umfang an Inhalten wird man um eine externe Inhaltsverwaltung nicht herum kommen – und sei es nur eine Excel-Tabelle.

Zu Beginn ist die Lernkurve bei Kirby sehr steil. Bei Verwendung eines vorgefertigten Paketes kann man sehr schnell eine Seite aufsetzen. Will man dagegen zusätzliche Funktionen implementieren, wird der Weg schnell steinig. HTML- und PHP-Kenntnisse sind dann unverzichtbar. Auch die vergleichsweise geringe Zahl an fertigen Themes macht es schwierig, die eigene Wunschseite zu realisieren. Ein weiterer Nachteil ist die, im Vergleich zu den bekannten Systemen wie Wordpress oder Typo3, eher kleine Community. Hilfestellung bei Problemen kann dann schon mal etwas schwierig werden, auch wenn der Autor von Kirby sehr bemüht ist.
Der Verzicht auf einen WYSIWYG-Editor hat Vor- und Nachteile. Für viele Webseiten reicht Markdown eigentlich und man handelt sich nicht die immer wieder auftretenden Sicherheitslücken von z.B. CKeditor ein. Auch wird es für allzu kreative User schwerer, eine Seite zu verunstalten, weil der WYSIWYG-Editor HTML-Features ohne Ende gestattet. Andererseits ist es für WYSIWYG-erfahrene User nervig, plötzlich mit Markdown arbeiten zu müssen.

Spätestens wenn Benutzerberechtigungen ins Spiel kommen oder Funktionen, die nicht standardmäßig in Kirby enthalten sind, sollte man überlegen, ob man das wirklich selber programmieren will oder nicht lieber auf ein CMS zurückgreift, das dies bereits mitbringt.

Fazit

Mit dem Verzicht auf die bei den meisten CMS benötigten Datenbank fällt zwar ein gutes Stück Komplexität weg. Dafür muss sich der User aber mit dem strukturellen Aufbau einer Kirby-Seite befassen, sofern er nicht eines der fertigen Pakete nimmt und dieses ohne eigene Anpassungen einsetzt. Damit ist Kirby gut geeignet für kleinere Webseiten, die nicht allzu viele oder komplexe Funktionen erfordern, z.B. private Webseiten, ein OnePager für eine kleinere Firma, eine Web-Visitenkarte, eine kleine Firmenwebseite mit einigen statischen Seiten und eventuell einem Blog oder Portfolio. Die meisten Inhalte ändern sich nicht allzu häufig und ihre Zahl bleibt überschaubar. Dann profitiert man von einem einfachen und übersichtlichen Backend und kann schnell seine Inhalte einstellen, ändern oder löschen.

Kenntnisse in HTML und CSS sind in jedem Fall hilfreich, aber nicht zwingend, sofern man sich auf vorgefertigte Themes beschränkt.

Flat File CMSe sind im Kommen und Kirby ist nur eines unter vielen. Die meisten davon werden kostenlos angeboten und die Entscheidung, welches man nun verwenden möchte, ist wirklich schwer. Am besten, man hat schon eine Vorstellung, wie die neue Webseite aussehen soll und welche Funktionen sie haben soll – Kontaktformular, Terminkalender, Blog, Galerie. Richtig spannend wird es, was uns die Anbieter zum Thema Suchmaschinenoptimierung und Datenschutz zu sagen haben, denn nur eine hübsche Webseite zu haben bedeutet nicht, dass die Seite auch erfolgreich sein wird. Deswegen sollte man sich nicht nur über die Bedienung des CMS informieren, sondern auch einen Blick und die Plug-Ins werfen. Der Rolls Royce unter den Flat Files scheint momentan Grav zu sein, das mit der PHP Template Engine Twig einen für Nicht-Programmierer vielleicht einfacheren Weg beschreitet, eigene Templates zu erstellen.

Wer gar keinen Spaß am Basteln hat und einfach nur möglichst schnell bloggen oder schnell seine Webseite online sehen will, ist mit WordPress oder einem Webseiten-Baukasten möglicherweise besser bedient. Beim Betreiben einer eigenen WordPress-Seite empfiehlt es sich dann jedoch dafür zu sorgen, dass dieses regelmäßig mit Sicherheitsupdates versorgt wird. Das gilt natürlich auch bei der Verwendung jedes anderen CMS.

Weiterführende Links

Offizielle Webseite von Kirby: https://getkirby.com/
Themes für Kirby: https://www.getkirby-themes.com/
Dokumentation zu Kirby: https://getkirby.com/docs
Offizielle Webseite für Kirby-Plugins: https://github.com/getkirby-plugins
Inoffizielle Webseite für Kirby-Plugins: https://github.com/texnixe/kirby-plugins
Apache Webserver: https://httpd.apache.org/
Nginx Webserver: https://www.nginx.com/
YAML-Schema erklärt auf wikipedia:  https://de.wikipedia.org/wiki/YAML
YAML-Validator https://codebeautify.org/yaml-validator
Homepage PSPad: http://www.pspad.com/de/
Homepage Atom: https://atom.io/
Übersichtsseite für Markdown: https://daringfireball.net/projects/markdown/syntax
Grav: https://getgrav.org/
20 Flat File CMSe im Vergleich: https://cmsstash.de/empfehlungen/flat-file-cms
Twig: https://twig.symfony.com/