Schwerelos

Das Content-Management-System Grav kommt beim Erstellen und Verwalten von Webseiten ohne Datenbankserver aus, was den Administrator entlastet und die Sicherheit steigert.

Dateibasierte Content-Management-Systeme (CMS) sind eine verhältnismäßig neue Erfindung und erfreuen sich immer größerer Beliebtheit. Sie stehen technisch zwischen den sogenannten Static-Site-Generatoren, die Webseiten für Internet-Auftritte ohne dynamische Elemente wie etwa Kommentare oder Bewertungen erzeugen, und komplexen datenbankbasierten CMS wie zum Beispiel WordPress. Ausgereifte Flat-File-CMS punkten mit einem verhältnismäßig großen Funktionsumfang und einer einfachen Bedienung und Wartung. Zudem erfordern sie keinen Datenbankserver. Stattdessen speichern sie den Inhalt der Webseiten in Form von Textdateien (“flat files”) direkt auf dem Webserver.

Durch den weniger komplexen technischen Aufbau erfolgt das Ausliefern der Seiten zumeist deutlich schneller als bei datenbankbasierten CMS, insbesondere bei nicht allzu komplexen Webauftritten. Das wiederum bringt unter anderem beim Erfassen der Webseite durch Suchmaschinen Vorteile. Daneben punkten Flat-File-CMS auch in Sachen Sicherheit, denn die Datenbanken sind oft das primäre Angriffsziel für Hacker. Letztendlich benötigen nur wenige Internet-Präsenzen den riesigen Funktionsumfang eines traditionellen CMS, weshalb eine einfachere Software häufig die bessere Wahl wäre.

Flat-File-CMS bieten in den meisten Fällen einen geeigneten Kompromiss, da sie keine hohen Ansprüche stellen, aber dennoch inhaltlich relativ komplexe und optisch ansprechende Online-Projekte ermöglichen. Unter den als Open-Source-Software entwickelten dateibasierten Content-Management-Systemen zählt Grav [1] sicherlich zu den beliebtesten. Seit der 2014 erschienenen ersten Version ist es zu einem mächtigen CMS herangewachsen, dessen Funktionen Sie mithilfe zahlreicher Plugins sogar noch erweitern können.

Erweiterbar

Dank des Admin-Plugins, das eine WordPress-artige grafische Bedienoberfläche liefert, bietet die Software eine intuitive Bedienung und eignet sich daher auch für Einsteiger. Außerdem stehen Dutzende vorgefertigte Themes bereit, mit denen Sie das Aussehen der Webseite beziehungsweise eines Blogs auf einfache Weise an die eigenen Vorstellungen anpassen.

Grav ist aber nicht zuletzt auch für fortgeschrittene Anwender und Webentwickler interessant – unter anderem, da es für Designvorlagen Twig [2] verwendet, derzeit als eine der mächtigsten und modernsten Template-Engines. Auf den folgenden Seiten erfahren Sie, wie Sie mit Grav eine einfache Webpräsenz einrichten. Dabei erklären wir auch, wie Sie Grav-Skeletons zum Beispiel zum Erstellen einer Fotogalerie nutzen und kleinere Anpassungen an den Themes vornehmen.

Installation

Die technischen Hürden zum Betreiben einer Website mit Grav liegen relativ niedrig: Auf dem Webserver muss lediglich die Skriptsprache PHP in Version 7.3.6 oder neuer installiert sein. Mit dem Admin-Plugin belegt eine Grav-Installation nicht einmal 50 MByte. Je nachdem, wie umfangreich Ihre Webseite ausfallen soll, benötigen Sie darüber hinaus zusätzlichen Speicherplatz. Sofern Sie keinen eigenen Server betreiben, ist es außerdem vorteilhaft, wenn Sie auf Ihren Webspace über FTP beziehungsweise SSH zugreifen können.

Laden Sie als Erstes ein Installationspaket von der Grav-Webseite herunter. Wir empfehlen das Paket Grav Core + Admin plugin – es bringt bereits das Admin-Plugin mit, wodurch Sie Grav im Browser über eine grafische Oberfläche bedienen [3]. Entpacken Sie dann das heruntergeladene Archiv und kopieren Sie dessen Inhalt in das Root-Verzeichnis des Webservers. Falls Sie Ihre Webseite nicht selbst hosten, laden Sie stattdessen die entpackten Dateien mit einem FTP-Client wie Filezilla auf Ihren Webspace hoch – die FTP-Zugangsdaten stellt Ihnen Ihr Webhoster zur Verfügung.

Navigieren Sie danach auf Ihren Webspace, indem Sie den Namen Ihrer Domain in die Adresszeile eines Webbrowsers eingeben. Bei installiertem Admin-Plugin zeigt Grav zunächst ein Webformular zum Erstellen eines Administratorkontos an. Füllen Sie die Eingabefelder aus und klicken unten auf die Schaltfläche Create User. Name und Passwort dürfen Sie frei wählen. Allerdings akzeptiert Grav nur komplexe Kennwörter, die mindestens acht Zeichen lang sind und einen Großbuchstaben, einen Kleinbuchstaben sowie eine Zahl enthalten. Grav erstellt dann das Administratorkonto und meldet Sie direkt an.

Konfiguration

Im nächsten Schritt landen Sie auf dem Dashboard des Administrations-Panels von Grav (Abbildung 1). Hier erhalten Sie Zugriff auf die wichtigsten Funktionen. Außerdem zeigt Grav rechts oben im blauen Feld Page View Statistics eine einfache Besucherstatistik an. Später erreichen Sie die Administrationsoberfläche, indem Sie an die URL der Webseite /admin anhängen, also zum Beispiel über http://_MeineDomain_.org/admin. Daraufhin sehen Sie die Grav-Anmeldeseite, wo Sie sich mit Ihrem Benutzernamen und Passwort einloggen (sofern Sie nicht schon angemeldet sind).

Abbildung 1: Nach dem Anmelden landen Sie auf dem Dashboard von Grav, das eine WordPress-artige Übersicht über die Webseite und die wichtigsten Funktionen bietet.

Im grünen Feld links oben sehen Sie, wann Sie zuletzt eine Sicherungskopie der Webseite angelegt haben und ob eine neuere Version von Grav zur Verfügung steht. Bei Bedarf bringen Sie hier Grav mit einem Klick auf den aktuellen Stand oder erstellen ein Backup der Installation. Darunter sehen Sie verschiedene Benachrichtigungen und den Grav-Newsfeed. Ganz unten zeigt das Feld Latest Page Updates eine Liste der Seiten, die Sie zuletzt bearbeitet beziehungsweise erstellt haben. Anfangs listet das System hier lediglich die Beispielseiten auf.

Das Administrations-Panel von Grav verfügt auch über eine deutschsprachige Lokalisierung. Um die Sprache der Benutzeroberfläche zu ändern, klicken Sie links oben in der dunkelgrauen Seitenleiste unmittelbar unter GRAV auf Ihren Benutzernamen. Sie sehen nun verschiedene Informationen über den Benutzer, unter dem Sie gerade in Grav angemeldet sind. In der ersten Gruppe User finden Sie die Option für Language. Klicken Sie daneben auf die Ausklappliste, wählen Sie dort Deutsch aus und tippen dann rechts oben auf Save. Melden Sie sich nun von Grav ab. Sobald Sie sich neu einloggen, sehen Sie eine deutschsprachige Benutzeroberfläche.

Verwaltung

Direkt nach dem Einspielen und dem Erstellen des Administratorkontos lässt sich die Webseite bereits aufrufen. Allerdings besteht sie zunächst nur aus den bereits erwähnten Beispielseiten (Abbildung 2). Um sie mit eigenen Inhalten zu füllen, bearbeiten Sie die vorhandenen Seiten oder löschen diese und erstellen neue. Über die dunkel hinterlegte Seitenleiste links rufen Sie die dazu nötigen Funktionen auf. Klicken Sie dort auf den Eintrag Seiten, um zur Seitenverwaltung zu gelangen. Daraufhin sehen Sie eine Liste der Seiten, aus denen die Website besteht.

Abbildung 2: Nach der Installation besteht eine Grav-Website nur aus wenigen Beispielseiten, die einen ersten Eindruck über die Fähigkeiten des CMS liefern.

Erstellen Sie einen neuen Eintrag, indem Sie rechts oben auf die blaue Schaltfläche Hinzufügen klicken. Es erscheint ein Dialogfeld mit dem Titel Seite hinzufügen. Tragen Sie dort in das erste Feld Seitentitel den Namen der Seite ein, zum Beispiel “Über mich”. Das Feld Ordnername darunter füllt Grav daraufhin automatisch aus. Ebenso automatisch erstellt das CMS für die neue Seite einen Ordner mit demselben Namen. In der dritten Zeile geben Sie an, ob die Seite einer bereits vorhandenen Seite beziehungsweise einem Verzeichnis untergeordnet werden soll.

Belassen Sie die Übergeordnete Seite bei root, damit die Seite einen eigenen Link in der Navigationsleiste der Webseite bekommt. Auch die Vorlage für die Seite (Seiten-Template) sollten Sie bei Default belassen. Klicken Sie dann rechts unten auf die Schaltfläche Weiter, um in den Seiteneditor zu gelangen. Ganz oben sehen Sie den Titel der Seite und darunter die vier Registerkarten Inhalt, Optionen, Erweitert und Sicherheit.

Unter Inhalt schreiben Sie Ihren Text in das große leere Eingabefeld und klicken danach rechts oben auf die violette Schaltfläche Speichern. Grav sichert die Seite daraufhin und veröffentlicht sie automatisch. Sobald Sie nun Ihre Webseite aufrufen, erscheint in der Kopfzeile ein zusätzlicher Link mit dem Namen Über mich. Klicken Sie darauf, um den Inhalt der neuen Seite zu sehen.

Sie können auch Bilder und Links in die Seiten einfügen und den Text formatieren. Grav nutzt dafür die Auszeichnungssprache Markdown, hat aber auch kein Problem mit dem Mischen von Markdown und HTML (Abbildung 3). Auf diesem Weg können Sie etwa größere Zeilenabstände mit <br> einfügen. Im Seiteneditor des Administrations-Panels sehen Sie den Inhalt einer Webseite standardmäßig als Markdown- beziehungsweise HTML-Code. Sollten Sie mit Markdown noch nicht vertraut sein, stellt das kein Problem dar: Grundlegenden Markdown-Code für Formatierungen, Links und Bilder fügen Sie bei Bedarf mithilfe der Werkzeugleiste ein, die sich gleich unter dem Eingabefeld für den Titel der Seite befindet.

Abbildung 3: Für die Formatierung von Seiteninhalten nutzt Grav die Auszeichnungssprache Markdown. Das CMS versteht allerdings auch in den Text eingebaute HTML-Tags.

Überschriften kennzeichnen Sie durch eine oder mehrere Raute-Symbole (#) vor der Überschriftenzeile. Bei Links und Bildern zeigt der Editor zunächst keine Vorschau, sondern nur den Markdown-Code. Der Text des Links steht dabei in eckigen Klammern, die URL folgt danach in runden Klammern. Die ganz ähnlich gekennzeichneten Bilder unterscheidet ein Ausrufezeichen vor der eckigen Klammer von Links. Es folgen der Name des Bilds in der eckigen Klammer und danach in runden Klammern der Name der Bilddatei (sofern sie sich im selben Verzeichnis befindet wie die Seite) oder die Bild-URL.

Schreibstube

Insbesondere für Einsteiger empfiehlt es sich, die Webseite mithilfe des grafischen Administrations-Panels zu erstellen beziehungsweise zu bearbeiten. Grundsätzlich ist das Admin-Plugin zum Betreiben des Web-Auftritts jedoch nicht erforderlich. Sie können den Inhalt der Seiten auch in Form von Markdown-Dateien speichern und diese dann in die passenden Verzeichnisse kopieren. Eine neue Seite könnten Sie also auch erstellen, indem Sie einen Texteditor öffnen und dort den Inhalt aus Listing 1 einfügen.

Listing 1

Neue Seite

---
title: Neue Seite
---
Dies ist eine neue Seite

Speichern Sie die Datei unter dem Namen default.md. Zwingend erforderlich sind nur Informationen zum Titel der Seite und zur Seitenvorlage. Letztere legt der Name der Datei fest; da sie in unserem Fall default.md heißt, verwendet Grav für die neue Seite die Vorlage Default.

Wechseln Sie nun in das Unterverzeichnis user/pages/ des Grav-Installationsverzeichnisses. Dort befinden sich mehrere Ordner, deren Name mit einer Zahl beginnt. Für jede übergeordnete Seite gibt es einen Ordner. Die Zahlen im Namen der Verzeichnisse legen fest, in welcher Reihenfolge die Links zu den Seiten in der Kopfzeile erscheinen. Erstellen Sie hier für die neue Seite einen neuen Ordner und geben Sie ihm zum Beispiel den Namen 08.neueseite. Kopieren Sie dann die Markdown-Datei default.md, die Sie gerade angelegt haben, in den neuen Ordner. Sobald Sie nun die Webseite aufrufen, sehen Sie rechts oben einen Link mit dem Namen Neue Seite.

Die meisten Anwender dürften es wohl vorziehen, Seiten über die Seitenverwaltung des Administrations-Panels zu erstellen und zu bearbeiten (Abbildung 4). Dort löschen Sie eine Seite, indem Sie auf das Icon mit den drei Punkten neben Ihrem Namen klicken. Daneben erscheint dann ein kleines Menü, in dem Sie rechts oben ein rotes Abfalleimer-Symbol sehen. Klicken Sie darauf, um die Seite zu löschen.

Abbildung 4: Über die Seitenverwaltung des Administrations-Panels können Sie komfortabel Seiten löschen und neue Einträge erstellen.

Um ein neues Blog anzulegen, wählen Sie für die Seite die Vorlage Blog. Für einzelne Blog-Einträge fügen Sie ebenfalls eine neue Seite hinzu, ordnen diese jedoch der Blog-Seite unter und wählen für die Vorlage Item. Erstellen Sie also für die Blog-Seite eine neue Seite. Geben Sie der Seite im Dialog Seite hinzufügen zum Beispiel den Namen “News” und wählen Sie unten bei Seiten-Template den Eintrag Blog. Klicken Sie dann auf Weiter und anschließend im Seiteneditor rechts oben gleich auf Speichern, da die Blog-Seite keinen Inhalt braucht.

Erstellen Sie danach einen ersten Blog-Eintrag, indem Sie in der Seitenverwaltung wieder auf Hinzufügen klicken. Geben Sie dem Eintrag einen Titel, wählen Sie bei Übergeordnete Seite den Eintrag news und bei Seiten-Template die Vorlage Item. Nach einem Klick auf Weiter gelangen Sie im Seiteneditor direkt zum Reiter Inhalt, wo Sie den Inhalt des Eintrags eingeben. Zu guter Letzt klicken Sie rechts oben auf Speichern, um den Eintrag zu veröffentlichen.

Metadaten

Wichtig ist auch, dass Sie den Titel der Webseite und Ihre Beschreibung ändern. Nach der Installation trägt der Webauftritt zunächst noch den Titel “Grav”. Klicken Sie in der Seitenleiste des Administrations-Panels auf Einstellungen und wechseln Sie in die zweite Registerkarte Site. Dort sehen Sie in der ersten Zeile in der Gruppe Standards den Titel der Webseite.

Löschen Sie “Grav” und tragen Sie den Titel Ihrer Homepage ein. Weiter unten steht bei den Metadaten die Beschreibung. Ersetzen Sie auch diese Zeile durch einen Satz, der den Inhalt der Webseite beschreibt. Außerdem können Sie hier auch den Hauptautor und die Standard-E-Mail-Adresse anpassen. Ferner legen Sie im Reiter System in der Gruppe Inhalt fest, welche der bereits existierenden Seiten die Startseite der Webseite sein soll. Die Option Startseite befindet sich gleich in der ersten Zeile. Bestätigen Sie schließlich die Änderungen, indem Sie rechts oben auf Speichern klicken.

Sofern Sie das Standard-Theme Quark beibehalten wollen, ändern Sie zumindest das Logo der Webseite. Klicken Sie dazu in der Seitenleiste auf Themes. Daraufhin sehen Sie die installierten Themes. Haben Sie Grav gerade erst eingerichtet, gibt es nur das Standard-Theme Quark. Klicken Sie darauf, um zu den Theme-Optionen zu gelangen. In der zweiten Gruppe Header Defaults finden Sie dann die Möglichkeit, jeweils ein benutzerdefiniertes Logo für die Desktop- und für die mobile Ansicht hochzuladen.

Themes einspielen

Aus der Übersicht heraus spielen Sie weitere Themes ins System ein. Klicken Sie dazu rechts oben auf die blaue Schaltfläche Hinzufügen. Es erscheint eine große Anzahl von Themes. Mit einem Klick auf die Schaltfläche Installieren unterhalb des jeweiligen Eintrags spielen Sie das fragliche Theme ein. Nach erfolgreicher Installation zeigt Grav verschiedene Informationen über das neue Theme an. Klicken Sie rechts oben auf Zurück zu den Themes, gelangen Sie zurück zur Themes-Übersicht, wo auch das gerade installierte Theme erscheint. Tippen Sie dann auf Aktivieren unterhalb des neuen Themes, um das Erscheinungsbild der Webseite zu ändern.

Nach dem Einrichten und Aktivieren eines neuen Themes kann es passieren, dass Teile der Webseite nicht mehr funktionieren oder nicht wie gewünscht aussehen. Das liegt in der Regel daran, dass die Grav-Instanz Funktionen nutzt, die das neue Theme nicht bereitstellt. Nicht alle installierbaren Themes funktionieren auf Anhieb. Manchmal müssen Sie eine oder mehrere Einstellungen ändern, eventuell auch in den Grav-Konfigurationsdateien, damit das Theme korrekt aussieht. Es scheint auch etliche Grav-Themes zu geben, die einfach zu alt und mit der aktuellsten Grav-Version nicht kompatibel sind.

Es empfiehlt sich daher, neue Themes erst einmal auszuprobieren. Sehen Sie sich dazu zuerst die Grav-Themes auf der Webseite des CMS genau an *[4]. Dort finden Sie bei vielen Themes auch Links zu Demos der Designs. Grundsätzlich sollten Sie ein möglichst neues Theme wählen und Designs bevorzugen, die vom “Team Grav” erstellt wurden.

Skeleton-Packages

Sobald Sie ein Theme finden, das Ihnen gefällt, prüfen Sie zuerst, ob es als “Skeleton Package” vorliegt [5]. Bei diesen Paketen ist ein bestimmtes Theme bereits vorinstalliert. Außerdem enthalten sie auch andere Beispielseiten als das Standard-Installationspaket, die Sie dann gegebenenfalls nur geringfügig modifizieren müssen.

Mithilfe des Themes Multiverse können Sie zum Beispiel ansprechende Fotogalerien erstellen (Abbildung 5). Es liegt als Skeleton-Package vor, ist jedoch bereits einige Jahre alt. Dennoch spielt es reibungslos mit der neuesten Grav-Version zusammen. Da es aber kein Admin-Plugin mitbringt, müssen Sie es im Terminal beziehungsweise über SSH aktualisieren und die Erweiterung von Hand nachträglich installieren.

Abbildung 5: Mithilfe des Themes Multiverse richten Sie ohne großen Aufwand eine ansprechende Fotogalerie ein.

Laden Sie das Skeleton-Package grav-skeleton-multiverse-1.0.0.zip herunter [6], entpacken das Archiv und kopieren Sie den Ordner multiverse/ des Pakets in das Webroot-Verzeichnis der Grav-Installation. Verbinden Sie sich nun gegebenenfalls über SSH mit dem Webserver. Wechseln Sie danach in das Verzeichnis, in dem sich der Inhalt des Skeleton-Packages befindet.

Im ersten Schritt führen Sie mit dem Kommando bin/gpm selfupgrade -f eine Aktualisierung des Systems aus. Grav zeigt Ihnen danach das Changelog an und frag mehrmals nach, ob Sie das Update auch wirklich einspielen möchten. Bestätigen Sie die Nachfragen. Eventuell kommen am Ende nach Success! noch einige Fehlermeldungen, die Sie jedoch ignorieren können.

Themes aktualisieren

Aktualisieren Sie danach mit bin/gpm update -f alle Plugins und Themes. Der Grav-Package-Manager (dafür steht der Namen des Kommandozeilentools gpm) überprüft nun, für welche Pakete es ein Update gibt und fragt Sie anschließend, ob Sie den Vorgang fortsetzen wollen. Bestätigen Sie das durch einen Druck auf die Eingabetaste. Möglicherweise sehen Sie – nach mehrmaliger grüner Success-Meldung – zum Schluss wieder eine Fehlermeldung, die Sie in der Regel ebenfalls ignorieren dürfen.

Installieren Sie schließlich mit bin/gpm install admin das Admin-Plugin. Grav informiert Sie zuerst darüber, dass die Installation das Nachziehen weiterer Abhängigkeiten erfordert, und fragt, ob Sie die Pakete einspielen wollen. Bestätigen Sie auch hier wieder durch einen Druck auf die Eingabetaste. Anschließend erstellen Sie wie oben beschrieben ein Administratorkonto und loggen sich in Grav ein.

Melden Sie sich nun an und rufen die Seitenverwaltung auf, zeigt diese nur eine einzige Seite mit dem Namen Multiverse (Abbildung 6). Klicken Sie auf die Seite, um sie zu bearbeiten. In der Registerkarte Inhalt des Seiteneditors sehen Sie anschließend unten im Feld Seitenmedien zwölf Beispielfotos. Ersetzen Sie diese durch Ihre eigenen Fotos.

Abbildung 6: Das Skeleton-Package Multiverse besteht aus einer einzigen Seite, die Fotos präsentiert.

Bewegen Sie dazu den Mauszeiger auf ein Bild, und tippen Sie auf den Abfalleimer, der im kleinen Menü rechts vom Bild erscheint. Klicken Sie anschließend in das nun leere Feld Seitenmedien und wählen Sie im daraufhin erscheinenden Dateimanager die Fotos aus, die Sie hochladen wollen. Aktivieren Sie danach den Reiter Images. Er listet alle Beispielfotos zusammen mit einem Titel und einer Beschreibung auf. Löschen Sie diese, indem Sie rechts auf den kleinen Abfalleimer klicken.

Setzen Sie nun die Fotos auf die Liste, die Sie gerade hochgeladen haben. Dazu klicken Sie unten auf Eintrag hinzufügen. Daraufhin erscheint ein neues Feld, in dem Sie den Titel und die Beschreibung des Fotos angeben. Füllen Sie unbedingt auch das Feld Thumbnail aus. Dort tragen Sie den Dateinamen des Fotos ein. Wiederholen Sie dies für alle hochgeladenen Bilddateien. Zum Abschluss klicken Sie rechts oben auf die violette Schaltfläche Save.

Laden Sie nun die Webseite neu, sehen Sie, dass Grav die Beispielfotos durch Ihre Bilder ersetzt hat. Klicken Sie jedoch rechts unten auf About, bemerken Sie, dass Sie diesen Inhalt noch anpassen müssen, denn hier steht nur ein lateinischer Platzhalter. Öffnen Sie dazu im Administrations-Panel die Themes-Verwaltung und wechseln Sie dort auf das Theme Multiverse. Bearbeiten Sie dann den Inhalt der angezeigten Felder und speichern Sie die Änderungen, indem Sie rechts oben auf Save klicken.

Designs und Menüs

Um ein Theme zu bearbeiten, sollten Sie die Funktion Themenvererbung (im Jargon von Grav Theme Inheritance) nutzen. Dadurch erstellen Sie ein neues Design, das auf einem bereits existierenden Design basiert und zunächst damit identisch ist, jedoch einen anderen Namen trägt. Das ist notwendig, da sonst Ihre Modifikationen überschrieben würden, sobald Sie das ursprüngliche Theme aktualisieren. Der Ordner, in dem sich die Konfigurationsdateien des neuen Themes befinden, enthält dann nur diejenigen Dateien, die Sie verändert haben.

Installieren Sie dafür zuerst das Plugin DevTools. Klicken Sie in der grauen Sidebar des Administrations-Panels auf Plugins, dann sehen Sie alle eingebauten Plugins. Klicken Sie rechts oben auf Add, woraufhin eine lange Liste erscheint. Klicken Sie ins Feld Filter und tippen Sie dort devtools ein. Unterhalb des Felds sehen Sie nun das gesuchte Plugin. Klicken Sie rechts davon auf die Schaltfläche Hinzufügen. Alternativ spielen Sie das Plugin auch über die Kommandozeile mit dem Befehl bin/gpm install devtools direkt ein.

Falls noch nicht geschehen, verbinden Sie sich nun über SSH mit Ihrem Webserver und wechseln in das Grav-Installationsverzeichnis. Erstellen Sie mit bin/plugin devtools new-theme ein neues Theme. Grav stellt Ihnen nun verschiedene Fragen. Zuerst müssen Sie dem Theme einen Namen geben und dann eine Beschreibung eintippen. Anschließend fragt das CMS nach dem Namen des Entwicklers und einer E-Mail-Adresse. Die Angabe der Github-ID ist nicht zwingend erforderlich. Zu guter Letzt will Grav wissen, wie es das Theme erstellen soll, und bietet Ihnen mehrere Möglichkeiten an.

Tippen Sie inheritance ein und bestätigen Sie durch einen Druck auf die Eingabetaste. Wählen Sie anschließend aus, auf welchem Theme das neue Design basieren soll. Dazu listet Grav alle installierten Themes auf und fügt vor dem Namen jeweils eine Zahl ein. Geben Sie den Namen des Stils oder seine Nummer ein. Grav erstellt nun das neue Theme und zeigt seinen Verzeichnispfad an.

Der nächste Schritt ist nötig, um die Theme-Optionen im Administrations-Panel anzeigen zu können. Öffnen Sie die zum ursprünglichen Theme gehörige blueprints-Datei in einem Texteditor. Beim vorinstallierten Design Quark liegt diese im Verzeichnis user/themes/quark/ und heißt blueprints.yaml. Kopieren Sie dort den gesamten Abschnitt form und fügen ihn in die Blueprints-Datei des neuen Themes ein.

Neuer Reiter

Als kleine Fingerübung erstellen wir einen Link im Navigationsmenü der Seite, der den Besucher auf eine andere Webseite führt. Die soll sich jedoch in einem neuen Tab oder Fenster öffnen. Das Erstellen des Links gelingt in Grav an und für sich einfach. Allerdings öffnet sich die Seite standardmäßig im selben Fenster beziehungsweise Tab. Damit die Webseite in einem neuen Reiter erscheint, müssen Sie das Theme Quark modifizieren.

Erstellen Sie zuerst den Link im Navigationsmenü. Wechseln Sie dazu in die Seitenverwaltung und klicken Sie dort auf Hinzufügen. Geben Sie dem Link im Dialog Seite hinzufügen einen Namen und stellen Sie sicher, dass bei Übergeordnete Seite die Option root ausgewählt ist. Wählen Sie als Seiten-Template die Variante External und klicken Sie auf Weiter. Anschließend sehen Sie im Seiteneditor die Registerkarte Inhalt. Geben Sie dort ins Feld Externe URL die Adresse der Webseite ein, zu der der Link führen soll. Klicken Sie dann rechts oben auf Speichern.

Die Konfigurationsdateien der Themes befinden sich im Ordner user/themes/. Jedes Theme verfügt über ein eigenes Verzeichnis. Die einzelnen Seitenvorlagen finden Sie dort im Unterordner templates/. Beim Theme Quark sehen Sie in diesem Verzeichnis die fünf Twig-Dateien blog.html.twig, default.html.twig, error.html.twig, item.html.twig und modular.html.twig.

Öffnen Sie die Datei default.html.twig in einem Texteditor. Sie enthält sehr wenige Informationen, definiert jedoch in der ersten Zeile durch den Code {% extends 'partials/base.html.twig' %}, dass diese Seitenvorlage die Basis-Seitenvorlage base.html.twig erweitert. Öffnen Sie also die Datei base.html.twig. Sie enthält eine längere Anweisungsfolge, die unter anderem regelt, dass die Basisvorlage mehrere Teilvorlagen einbezieht.

Am Ende des Codes finden Sie die Zeile {% include 'partials/navigation.html.twig' with {tree: true} %}. Sie zeigt an, dass die Seiten eine Navigationsleiste haben sollen. Öffnen Sie daher die Datei navigation.html.twig. Darin steht nur, dass die Navigationsleiste mithilfe von Makros erstellt wird, die in macros/macros.html.twig definiert sind. Sie müssen daher diese Datei bearbeiten. Ersetzen Sie in ihr den in Listing 2 gezeigten Abschnitt durch den Code aus Listing 3.

Listing 2

macros.html.twig (alt)

[...]
<a href="{{ p.url }}" class="{{ active_page }}">
  {{ p.menu }}
</a>
[...]

Listing 3

macros.html.twig (neu)

[...]
<a href="{{ p.url }}" class="{{ active_page }}"
  {% if p.header.external_url %}
    target="blank"
  {% endif %}
  >
  {{ p.menu }}
</a>
[...]

Speichern Sie danach macros.html.twig nicht im Verzeichnis user/themes/quark/templates/macros/, sondern zum Beispiel in Ihrem lokalen Ordner Dokumente/. Wechseln Sie danach ins Konfigurationsverzeichnis des gerade erstellten, von Quark geerbten Themes. Bei unserer Beispielinstallation heißt das Verzeichnis user/themes/new-theme/. Wechseln Sie von dort in das leere Unterverzeichnis templates/ und erstellen Sie hier einen Ordner namens macros/. In ihm legen Sie die bearbeitete Datei macros.html.twig ab.

Neue Informationen

Als weitere kleine Übung löschen wir im Theme Multiverse das Kontaktformular und ersetzen es durch einen Text. Außerdem entfernen wir die Copyright-Info, weil sie nicht korrekt angezeigt wird, und schieben die (geänderte) Kontakt-Info in die linke Spalte.

Dafür müssen Sie die Datei footer.html.twig im Verzeichnis user/themes/multiverse/templates/partials/ bearbeiten. Diese Steuerdatei definiert das Aussehen der Fußzeile. Sie ersetzen hier die Stelle {% include "forms/form.html.twig" %}, die sich in einer der letzten Zeilen befindet, durch eine E-Mail-Adresse. Anschließend löschen Sie die in Listing 4 gezeigte Passage und übernehmen den Code aus Listing 5.

Listing 4

footer.html.twig (alt)

[...]
<p class="copyright">
  {{ theme_config.copyright }}
</p>
[...]

Listing 5

footer.html.twig (neu)

[...]
<div>
  <section>
    <h2>{{ theme_config.contact_header }}</h2>
    ich (at) meinedomain (dot) net
  </section>
</div>
[...]

Fazit

Mit dem modernen Flat-File-CMS Grav lassen sich ohne viel Aufwand ansprechende Internet-Präsenzen aufsetzen. Dank des grafischen Administrations-Panels erfordert das Bedienen der Software keine besonderen Vorkenntnisse. Auch das Erstellen und Anpassen von Designvorlagen fällt meist leichter als bei vielen anderen Content-Management-Systemen, da Grav die Vorlagenbeschreibungssprache Twig verwendet. (cla)

Infos

Grav: https://getgrav.org
Twig: https://twig.symfony.com
Downloads: https://getgrav.org/downloads
Themes: https://getgrav.org/downloads/themes
Skeletons: https://getgrav.org/downloads/skeletons
Skeleton-Package “Multiverse”: https://github.com/tranduyhung/grav-skeleton-multiverse/releases/tag/v1.00

Source: https://tecadmin.net/switch-between-multiple-php-version-on-ubuntu/

Manavik's Shelter