Wäre es nicht wünschenswert, die Aufmerksamkeit der Besucher Ihrer Website auf Artikel lenken zu können, die Sie erst kürzlich veröffentlicht haben, etwa den neuesten Anwenderbericht oder die aktuellen News für Investoren?

Mit Scrivito ist das leicht möglich! In dieser kurzen Anleitung zeigen wir Ihnen, wie Seiten in Navigationen sich als neu markieren lassen, basierend auf dem Datum, an dem sie erstellt wurden. Hierfür werden wir das Widget für Unterseiten-Navigationen erweitern und damit das allgemeine Prinzip hierarchiebasierter Navigationen noch etwas besser ausleuchten.

Um unsere Erläuterungen am leichtesten nachvollziehen zu können, empfehlen wir, Navigationen für Unterseiten als Widget bereitstellen durchzugehen und anschießend hierher zurückzukehren, um zu erfahren, wie neue Seiten markiert werden können. Wenn Sie allerdings nur an den Details interessiert sind, können Sie einfach weiterlesen.

Wie alle Artikel in diesem Bereich der Dokumentation basiert auch dieser auf der Scrivito Example Application.

Auf der Seitenhierarchie basierende Navigationen können mit der Komponente Scrivito.ChildListTag erzeugt werden. Voreingestellt rendert sie ein <ul>-Element, das aus <li>-Elementen besteht, die auf die Seiten direkt unterhalb der aktuellen Seite verweisen:

Diese Komponente ist recht flexibel, denn man kann ihr sowohl das übergeordnete CMS-Objekt (parent) als auch eine Funktion (renderChild) übergeben, mit denen die einzelnen Elemente für die Unterseiten gerendert werden sollen. Dies alles ist in dem oben erwähnten Artikel ausführlich beschrieben.

Wir werden die Funktion, mit der die Unterelemente gerendert werden, erweitern, möchten jedoch noch kurz auf den Ansatz eingehen, den wir hier verfolgen.

Das ist natürlich reine Definitionssache. Im folgenden Code wird eine Seite als neu betrachtet, wenn sie weniger als zwei Wochen alt ist.

Doch wie kann man das Erstellungsdatum einer Seite bestimmen, um daraus ihr Alter zu berechnen? Dazu brauchen wir lediglich das allen CMS-Objekten gemeinsame Attribut _createdAt mit der Instanzmethode createdAt abzufragen. Aus dem Wert dieses Attributs und dem aktuellen Datum können wir das Alter einer Seite als Differenz berechnen.

Da wir nun das Erstellungsdatum einer Seite ermitteln können, können wir die renderChild-Funktion erweitern. Nachdem die Funktion den Link auf eine Unterseite gerendert hat, wird jetzt noch die Funktion newFlag aufgerufen und deren Rückgabewert gerendert. Darin entscheidet sich, ob die betreffende Seite neu ist und entsprechend markiert wird.

Die Funktion newFlag hat die Aufgabe, das Markup für die „Neu“-Markierung zurückzugeben, wenn die ihr übergebene Seite child neu, d.h. in unserem Fall weniger als 14 Tage alt ist. Um dies zu erreichen, subtrahiert sie vom aktuellen Datum currentDate den createdAt-Wert des übergebenen child-Objekts (falls vorhanden), woraus sich dessen Alter ergibt, das kleiner als 1000 * 60 * 60 * 24 * 14 Millisekunden (fortnight) sein muss, dem Äquivalent von 14 Tagen. Ist dies der Fall, gibt newFlag ein <i>-Element zurück, das die Markierung darstellt.

In obigem Code ist zu sehen, dass wir das aktuelle Datum in der Konstanten currentDate auf Modulebene und nicht in der Komponente oder den von ihr aufgerufenen Funktionen speichern. Hätten wir Date.now innerhalb der Komponente verwendet, wäre sie nicht mehr „rein“.

Fertig!

Natürlich können Sie das Styling Ihrer Markierungen wunschgemäß anpassen. Sie ließen sich sogar unterschiedlich gestalten, beispielsweise in Abhängigkeit von der übergeordneten Seite. Das Icon und der Text könnten auch konfigurierbar gemacht werden.

Auch eine gute Idee wäre es, den Text der Markierungen beispielsweise „updated“ lauten zu lassen, wenn die Seite nicht neu ist, jedoch die letzte Änderung nicht länger als eine Woche her ist. Für solche Zwecke verfügen CMS-Objekte über die Methode lastChanged, die man in dem Vergleich nutzen könnte.