Die Scrivito Example App wird bei der Umsetzung verschiedenster Websites gern als Ausgangspunkt genutzt. Hierbei ist es naheliegend, dass sämtliche oder die meisten ihrer vorgegebenen Inhalte nicht mehr benötigt werden. In dieser Anleitung zeigen wir Ihnen, wie sich diese Inhalte entfernen lassen, um mit nur einigen wenigen Seiten ganz von vorn zu beginnen. Bei dieser Gelegenheit erläutern wir auch, wie man die Hauptnavigation nutzen kann und wie die in der App enthaltenen Übersichtsseiten strukturiert sind.

Sie können diese Anleitung durchgehen, ohne die Example App zu klonen oder herunterzuladen und lokal auszuführen, weil Sie keinen Code in den Dateien zu ändern brauchen. Öffnen Sie einfach Ihre Example App im Browser, und los geht’s!

Nachdem Sie Ihre Example App im Browser geöffnet haben, stellen Sie zunächst bitte sicher, dass sich „scrivito/“ als erstes Element nach dem Hostnamen in der URL befindet, um die Bearbeitungsschnittstelle zur Verfügung zu haben. Natürlich können Sie auch die Bedienoberfläche von edit.scrivito.com nutzen.

Legen Sie dann eine Arbeitskopie an, in der sämtliche im Verlauf dieser Anleitung durchgeführten Änderungen vorgenommen werden können. Stellen Sie mit Hilfe des Schalters oben in der Mitte den Anzeigemodus auf „Bearbeiten“.

Öffnen Sie dann die JavaScript-Konsole Ihres Browsers und ändern Sie den Kontext von top zu scrivito_application.

Wir werden sämtliche Inhalte, also alle CMS-Objekte aus der Arbeitskopie löschen und anschließend die unbedingt erforderlichen Seiten wie die Homepage neu anlegen, um dann neue eigene Inhalte erstellen zu können. Führen Sie das folgende Skript in der Konsole aus und verfolgen Sie, wie die bestehenden Inhalte verschwinden. (Dieses Skript sowie viele andere Anwendungsbeispiele finden Sie auch in unserem SDK Cheat Sheet.)

Nachdem dieses Skript ausgeführt wurde, ist Ihr CMS in der verwendeten Arbeitskopie leer, und ein 404-Fehler wird ausgegeben, weil es die zuvor angezeigte Seite nicht mehr gibt. Veröffentlichen Sie diese Arbeitskopie nicht, wenn dieses Scrivito CMS wertvolle oder öffentlich zugängliche Inhalte umfasst. Falls Sie doch veröffentlichen, sind diese Inhalte verloren, zumindest bis zu ihrer Wiederherstellung über den Veröffentlichungsverlauf.

In der Example App ist das Homepage-Objekt mit etlichen Attributen ausgestattet, denen die Anwendung verschiedenste Einstellungen wie seitenspezifische Styling-Optionen oder Zugangsschlüssel für Dienste von Drittanbietern wie Google Analytics entnimmt. Lassen Sie uns also eine Homepage anlegen!

Beachten Sie, dass wir hierfür nicht den Befehl „Neue Seite” aus dem Hauptmenü verwenden können, weil der Homepage-Typ aus dem Auswahldialog ausgeschlossen wurde, um zu verhindern, dass Redakteure zusätzliche Homepages zu der bereits vorhandenen anlegen. Daher nutzen wir wieder die Browser-Konsole, und erstellen mit ihr eine Instanz der mitgelieferten Modellklasse Homepage:

Wie Sie sehen, haben wir der Homepage einen Pfad zugewiesen, indem wir ihr Attribut _path auf “/” gesetzt haben. Voreingestellt ist die Seite mit diesem Pfad der Ursprung der Seitenhierarchie. Die Example App speichert in dieser Seite die Website-Einstellungen, und sie dient auch als Ausgangspunkt der Hauptnavigation. Darauf gehen wir gleich noch näher ein.

Nachdem die obige Code-Zeile in der Konsole ausgeführt wurde, müsste die Homepage angezeigt werden. Jedoch dürfte es einen kurzen Moment dauern, bis ihre initialen Inhalte sichtbar werden: ein „Section“-Widget mit einer „Headline” und ihrem vorgegebenen Text. Fügen Sie einfach weitere Widgets hinzu, verschieben Sie sie, usw., so, wie Sie es wahrscheinlich bereits getan haben, bevor Sie die ursprünglichen Inhalte Ihrer Example App gelöscht haben.

Haben Sie den grauen Kasten unten auf der Seite bemerkt? Dies ist der Fußbereich, der Footer. Er wird durch eine Widget-Liste realisiert, kann also genauso bearbeitet werden wie andere Seiteninhalte. Nur die Homepage hat eine solche Footer-Widget-Liste, jedoch wird diese auf allen Seiten im CMS dargestellt. Deshalb kann der Footer auf jeder Seite bearbeitet werden.

Wenn Sie die Eigenschaften der Homepage über das Menü rechts oben öffnen, können Sie sehen, welche weiteren Optionen die Homepage bereithält. Hier können Sie beispielsweise das Logo oder das Header-Bild ändern, indem Sie es mit dem Content Browser auswählen oder hochladen. Die verschiedenen Reiter des Eigenschaften-Dialogs geben Ihnen Zugriff auf die Website-Einstellungen, die „Social cards“ (für Facebook und Twitter), usw. Siehe auch Das Erscheinungsbild der Example App anpassen.

Klicken Sie nun auf die rote Lupe rechts oben auf der Seite, und suchen Sie nach etwas, etwa „lorem“. Der 404-Fehler, der dann auftritt, ist darin begründet, dass wir keine Suchergebnisseite mehr haben.

Die Suchergebnisseite über die Konsole anzulegen, ist genauso einfach, wie bei Seiten eines beliebigen anderen Typs. An dieser Stelle empfehlen wir, einen Blick auf die Modellklassen und React-Komponenten der Example App zu werfen oder sich bei Gelegenheit auch mit der Diversifizierung von Website-Inhalten mittels Objektklassen 🇺🇸 zu befassen. Jetzt legen wir erst einmal die Suchergebnisseite an:

Wie auch die Homepage, ist die Suchergebnisseite nicht im Seitentyp-Auswahldialog aufgeführt, wodurch eine solche nicht mit Scrivitos Bedienschnittstelle angelegt werden kann – aus demselben Grund: In den Standardinhalten der Example App ist bereits eine Suchergebnisseite enthalten, und mehrere davon zu haben, ergibt keinen Sinn.

Wenn Sie jetzt die Suche nach „lorem“ wiederholen, müsste es einen Treffer geben, es sei denn, Sie haben die Überschrift der Homepage geändert. Wie alle Seiten, die Sie noch anlegen werden, kann die Suchergebnisseite über ihre Eigenschaften wunschgemäß angepasst werden.

Lassen Sie uns als Nächstes eine Seite zur Navigation hinzufügen.

Haben Sie den blauen Griff links neben der Lupe gesehen? Er steht für eine automatisch generierte Navigation, die zum Layout gehört und auf allen Seiten außer Landing-Pages vorhanden ist.

Technisch betrachtet, erzeugt diese Navigation Links für die Seiten, die sich aufgrund ihres Pfades unterhalb der Homepage befinden. In unserem Fall hat die Homepage noch keine Unterseiten, und daher ist hier nichts zu sehen, bis Sie aus dem Menü hinter dem blauen Griff „Seite hinzufügen“ wählen und einen Seitentyp wählen, etwa Page. Danach erscheint ein mit <UNTITLED> betitelter Navigationspunkt für die neue Seite. Sobald Sie der Seite über ihre Eigenschaften einen richtigen Titel geben, wird der Text des Navigationspunkts nachgezogen. Probieren Sie es aus!

Lassen Sie uns noch eine Landing-Page hinzufügen! Normalerweise tauchen Landing-Pages in keiner Navigation auf (und haben selbst auch keine solche). Aus diesem Grund haben sie keinen Pfad. Genau so eine Seite ohne Pfad erhalten Sie, wenn Sie „Neue Seite“ aus dem Hauptmenü wählen.

Landing-Pages werden üblicherweise auch aus der Website-Suche ausgenommen, weil sie nur über ihre jeweilige URL erreichbar sein sollen, die beispielsweise bei Google Ads oder Facebook hinterlegt wurde.

Wie soll man als Scrivito-Anwender nun aber eine bestimmte Landing-Page finden? Dafür gibt es zwei einfache Methoden: Zum einen können Sie unmittelbar, nachdem Sie die Seite angelegt haben, ihr über die Eigenschaften einen Permalink zuweisen. – Man möchte ja ohnehin keine URLs wie „besuchen-sie-uns-auf-der-acme-messe-bbadaad6a47887cd” haben.

Insbesondere, wenn Sie viele Landing-Pages haben, können Sie zum anderen den Content Browser öffnen und dessen Suche oder den „Pages“- bzw. „Seiten“-Filter nutzen, um eine bestimmte Seite zu finden und dann wieder ihren Permalink (oder ihre Objekt-ID aus dem „System“-Tab) kopieren und in die Browser-Adresszeile einfügen.

Übersichten sind das einzige Mittel, mit dem Website-Besuchern Inhalte jedweder Art zusammengefasst präsentiert werden können: Anleitungen, News, Produkte, usw. In der Scrivito Example App gibt es mehrere Implementationen von Übersichten:

• Der SearchResults-Seitentyp verfügt über seine eigene Logik für die Anzeige der Suchergebnisse.
• Ein Blog besteht aus mehreren zusammenwirkenden Komponenten, einer Blog-Seite mit einem BlogOverviewWidget darauf sowie einer beliebigen Anzahl von Blogpost-Seiten, die nicht Teil der Seitenhierarchie sind.
• Das JobOverviewWidget und das EventOverviewWidget erfordern keine eigene Seitenlogik. Sie können auf Seiten eines jeden Typs platziert werden.

Was oben zum SearchResults-Seitentyp angemerkt wurde, trifft auch auf den Blog-Typ zu: Beide wurden vom Auswahldialog für den Seitentyp ausgeschlossen, um zu verhindern, dass von ihnen zusätzliche Seiten (neben denen bereits in den Standardinhalten vorhandenen) angelegt werden. – Normalerweise benötigt man ja nicht zwei oder mehr Blogs.

Wenn Sie also das Blog der Example App nutzen und diesem auch gleich einen Permalink zuweisen möchten, können Sie es als eine Unterseite der Homepage anlegen, indem Sie Folgendes in der Konsole ausführen:

Der Pfad „/blog“ macht diese Seite zu einer Unterseite von „/“, der Homepage. Nachdem das Blog angelegt wurde, sollten Sie die Seite mit einem HeadlineWidget sowie einem BlogOverviewWidget ausstatten. Nun können Sie damit beginnen, Blogposts mittels „Neue Seite“ aus dem Hauptmenü anzulegen. Um den Tag-Filter der Blog-Seite zu nutzen, weisen Sie den Posts ein paar passende Tags zu.

Das war’s! Wenn Sie möchten, fügen Sie weitere Seiten zur Navigation hinzu, oder auch unabhängige Seiten (ohne Pfad)…