Seiten mit Attributen für zusätzliche Inhalte ausstatten

Seiten mit Attributen für zusätzliche Inhalte ausstatten

Welche Arten von Inhalten sich auch immer auf einer Website befinden – Nachrichten, ein Blog, Bildergalerien, Dialogangebote –, früher oder später werden diese Inhalte umstrukturiert, anders dargestellt oder um weitere Fragmente ergänzt, etwa Zwischenüberschriften, Quellenangaben, Zusammenfassungen, Übersichten und dergleichen mehr. Damit nun Redakteure die gegebenen technischen Möglichkeiten nicht ausreizen müssen, indem sie beispielsweise Markup manuell anpassen, können Sie ihnen genau die Optionen anbieten, die sie benötigen, um das „Look-and-Feel“ der Inhalte sowie die Funktionalität entsprechend den Corporate-Website-Design-Vorgaben umzusetzen.

Zu diesem Zweck können Sie Seitentypen anpassen, indem Sie sie um Attribute erweitern. Jedes Attribut stellt eine Eingabe- oder Auswahlmöglichkeit in Bezug auf Inhalte oder deren Präsentation dar. Möchte man beispielsweise, dass auf Seiten vom Typ ArticlePage der Autor angezeigt wird, ist es naheliegend, zu diesem Seitentyp (zu der Objektklasse) ein author-Attribut hinzuzufügen und dessen jeweiligen Inhalt an der gewünschten Stelle so zu rendern, wie er aussehen soll.

Lassen Sie uns einen Blick auf eine einfache imaginäre ArticlePage-Klasse und die dazugehörende Komponente werfen:

Alle Seitentyp-Definitionen sind nach diesem Muster aufgebaut. Sie bestehen aus einer CMS-Objektklasse sowie einer React-Komponente, die die Instanzen der Klasse rendert. (Dasselbe gilt analog auch für Widget-Typen.)

Eine Zusammenfassung und den Namen des Autors hinzufügen

Die obige ArticlePage-Klasse ist mit nur zwei Attributen ausgestattet, title und body. Da das body-Attribut eine widgetlist ist, kann der Redakteur aus den verfügbaren Widgets die geeigneten auswählen, während er den Artikel schreibt: Headline-, Column-, Text-, Image-Widget, usw. Obwohl ein Redakteur den Titel auch als Widget zum body hinzufügen könnte, hat die Objektklasse ein eigenes title-Attribut dafür, damit wir den Titel nicht nur auf der Seite anzeigen, sondern in der Applikation auch anderweitig nutzen können. Er könnte zum Beispiel auch in Übersichten, Suchergebnissen, Metatags und dergleichen herangezogen werden. Würden wir es dem Redakteur überlassen, wie und wo der Titel als Widget erscheint, müssten wir ihn in jedem dieser Fälle aufwendig aus dem body heraussuchen.

Um solche Artikel ein wenig aufzuwerten, fügen wir Attribute für eine Zusammenfassung und den Namen des Autors hinzu, summary bzw. author.

Damit die neuen Attribute einen sichtbaren Effekt haben, erweitern wir die Komponente, die die Artikel rendert, entsprechend:

Oben ist zu sehen, dass jedes Attribut eines Artikels mit Scrivito.ContentTag gerendert wird, einer im Scrivito-JS-SDK enthaltenen React-Komponente 🇺🇸.

Als Nächstes bietet es sich an, das Styling der Artikel ein wenig auszuarbeiten, was mit Inline-Styles und CSS-Klassen oder beidem bewerkstelligt werden kann. Sofern Sie mit der Scrivito Example App arbeiten, können Sie auf die CSS-Klassen von Bootstrap zurückgreifen, dem in der Example App genutzten CSS-Framework.