Um zu zeigen, wie eine auf Scrivito basierende Anwendung funktioniert, werfen wir hier einen genaueren Blick auf die Scrivito Example Application, eine einfache, doch funktionsreiche JavaScript-Web-Anwendung, auf deren Grundlage man zügig eine professionelle Website erstellen kann.
In dem Artikel Erste Schritte mit Scrivito oder im Readme auf GitHub erfahren Sie, wie sich die Example App installieren und lokal ausführen lässt.
Das Scrivito CMS besteht aus zwei Hauptkomponenten, die miteinander interagieren, einem Backend zur transparenten Verwaltung Ihrer Inhalte sowie einer JavaScript-Bibliothek (dem SDK), das in einer React-basierten Web-Anwendung als Content-Management-Schicht fungiert.
React ist Facebooks Lösung für die Erstellung interaktiver Web-Benutzerschnittstellen mittels in sich geschlossener JavaScript-Komponenten. Das Scrivito-SDK verwendet React, um die Inhalte Ihres Scrivito-CMS anzuzeigen sowie die Benutzerschnittstelle zur Verfügung zu stellen, mit der diese Inhalte gepflegt und direkt auf den Webseiten bearbeitet werden können.
Nachdem die JS-Example-App aufgesetzt und gestartet wurde, wird sie aus dem „src“-Verzeichnis im lokalen Repository ausgeliefert, initial über die Datei „catch_all_index.html“. Dieser Datei widmen wir uns zuerst:
Das <head>-Element enthält nichts Besonderes, abgesehen von der eingebundenen Datei „js_snippets_head.js“. Wenn Ihre Website Drittanbieterdienste nutzt, können Sie den dazu gehörenden Code in dieser Datei ablegen. Analog hierzu wird am Ende des <body>-Elements „js_snippets_before_body_end.js“ eingebunden, um solchen Diensten die Möglichkeit zu geben, zusätzliches HTML-Markup zu rendern, falls erforderlich.
Wie oben zu sehen, ist der einzige sichtbare Teil im <body> von “catch_all_index.html” ein <div>-Element, dessen ID „application“ lautet. In dieses Element rendert das „index.js“-Skript aus dem „src“-Verzeichnis alle Inhalte auf der Seite:
Der Aufruf von „ReactDOM.render“ fügt die Komponente App in das erwähnte DOM-Element „application” ein.
Wenn Sie jetzt vermuten, dass App eine Funktion in „App.js“ ist, dann stimmt das ganz genau: sie stellt eine Seite dar, indem sie eine Navigation generiert und die Inhalte der aktuellen Seite rendert. Falls letztere nicht ermittelt werden kann, wird eine entsprechende Fehlermeldung angezeigt.
Wir sollten uns die Funktion App genauer anschauen!
Die Funktion App rendert die aktuelle Seite, indem sie die in Scrivito enthaltene React-Komponente Scrivito.CurrentPage aufruft.
Initial entspricht die Homepage Ihres CMS der aktuellen Seite. Navigiert der Besucher auf der Website, ändert sich die aktuelle Seite natürlich.
Woher weiß Scrivito.CurrentPage beim Start der Applikation, welches Objekt in Ihrem CMS die Homepage ist?
Um die Homepage beim Start zu ermitteln und anzuzeigen, sucht <Scrivito.CurrentPage /> das CMS-Object mit dem Pfad (path) „/“. Wird anschließend auf der Website navigiert, wird die dann anzuzeigende aktuelle Seite anhand der ID (id) des betreffenden CMS-Objekts identifiziert, die ein Teil der verlinkten URL ist.
Bei Scrivito sind sämtliche CMS-Inhalte in den Attributen 🇺🇸 der CMS-Objekte gespeichert. Um unterschiedliche Arten von Objekten zur Verfügung zu haben, etwa Homepages, Landing-Pages oder Blogposts, können Sie Objektklassen definieren 🇺🇸 und diese mit Attributen Ihrer Wahl ausstatten.
Um einen Überblick der Objektklassen in der Scrivito-Beispielanwendung zu erhalten, lassen Sie uns einen weiteren Blick in das Projektverzeichnis werfen, dieses Mal in das Unterverzeichnis „src/Objs“.
Die einzelnen Seitentypen, die es in einer Scrivito-Anwendung gibt, werden durch Verzeichnisse strukturiert, die den Namen des jeweiligen Typs haben. Jedes dieser Verzeichnisse enthält bis zu drei JavaScript-Dateien, eine für die Modellklasse, (beispielsweise „HomepageObjClass.js“), eine für die Komponente, die deren Instanzen rendert, sowie eine für die Konfiguration der Darstellung der Attribute, die Redakteure über die Eigenschaften eines CMS-Objekts bearbeiten können. Bei den Widget-Typen im „Widgets“-Verzeichnis verhält es sich analog.
Als Ergänzung zu den verschiedenen Seitentypen gibt es auch eine Objektklasse für Bilder. In der Datei „ImageObjClass.js” im ImageWidget-Verzeichnis ist zu erkennen, dass Bild-Objekte ganz gewöhnliche CMS-Objekte sind, man ihnen also ebenfalls Attribute geben kann.
Kehren wir nun zu der Frage zurück, wie Seiten angezeigt werden. Wir halten erstens fest, dass sämtliche Inhalte einer Seite von der React-Komponente gerendert werden, die für die Instanzen der betreffenden Objektklasse, also des Seitentyps zur Verfügung gestellt wurde. Zweitens haben alle Seiten, deren Inhalte bearbeitbar sein sollen, ein Attribut vom Typ widgetlist. In der Scrivito Example App heißt dieses Attribut body, aber der Name ist natürlich frei wählbar. In diesem widgetlist-Attribut wird der gesamte Hauptinhalt der Seite abgelegt, in der Form von Widgets, die ein Redakteur auf der Seite platziert.
Die Darstellung einer Seite lässt sich also herunterbrechen auf die Bestandteile, die alle Seiten dieses Typs haben (einen Header, eine Navigation, einen Footer, usw.), sowie die im body-Attribut enthaltenen Widgets. Hierfür muss die zum Seitentyp gehörende React-Komponente lediglich dieses Attribut rendern:
Obiges bewirkt, dass der Inhalt der body-widgetlist von den Komponenten der darin enthaltenen Widgets gerendert wird. Werfen wir nun einen Blick in das „src/Widgets“-Unterverzeichnis im Scrivito-Example-App-Projekt.
Die Scrivito Example App enthält zahlreiche Widget-Typen, die Sie jederzeit anpassen und erweitern können. Analog zu Objektklassen definieren Widget-Klassen die Attribute ihrer Instanzen, und um diese zu rendern, wird eine React-Komponente benötigt.
Viele oder sogar die meisten Widgets haben Eigenschaften, die nicht direkt auf der Webseite bearbeitet werden können. So kann man beim Image-Widget dessen Ausrichtung über das Attribut alignment steuern. Um dieses Attribut in den Widget-Eigenschaften bearbeiten zu können, kann die Widget-Modellklasse mittels Scrivito.provideEditingConfig mit einer entsprechenden Konfiguration versehen werden:
Einige Komponenten der Example App befinden sich in Unterverzeichnissen von „src“, entweder der Übersichtlichkeit halber oder weil sie an mehreren Stellen verwendet werden. Das Verzeichnis „Components“ zum Beispiel enthält die React-Komponenten für die Navigation, den Footer, Blogpost-Bestandteile und andere Fragmente, die auf den Seiten zum Einsatz kommen. Im „utils“-Verzeichnis befinden sich Hilfsfunktionen, und in den Verzeichnissen „assets“ und „config“ liegen Zusätze bzw. Konfigurationsdateien.
Finden Sie die Example App nützlich? Sprechen Sie uns an, wenn Sie Unterstützung benötigen oder uns Feedback geben möchten!