Content-Modellierung mit dem Prismic-CMS

Enzo Volkmann

von Enzo Volkmann am 12.02.2019

2 Minuten Lesezeit

In unserem letzten Artikel des vergangenen Jahres haben wir die sogenannten Headless-CMS-Systeme und speziell die Lösung Prismic als Alternative zu klassischen Systemen wie zum Beispiel Wordpress vorgestellt.

Heute möchte ich präsentieren, wie wir verschiedene Inhaltstypen in Prismic strukturieren können, um die Anforderungen des jeweiligen Projektes perfekt zu erfüllen.

Mit sogenannten Custom Types können in jedem Prismic-Projekt alle Inhalte so modelliert werden, dass sie perfekt auf das erstellte Design und die Implementierung abgestimmt sind. Somit sind der Kreativität bei der Konzeption neuer Webseiten oder auch den Möglichkeiten bei der Migration von einem anderen CMS keine Grenzen gesetzt.

Repeatable oder Single?

In Prismic unterscheiden wir zwischen sogenannten Repeatable- und Single-Typen. Der Unterschied besteht darin, dass von einem Single-Typ nur ein einziges Objekt existieren kann, während man von Repeatable-Typen beliebig viele Objekte erstellen kann. Single-Typen eignen sich daher zum Beispiel für das Modellieren der Home-Seite, während wir einen Repeatable-Typ für das Modellieren von Blog-Posts verwenden.

Erstellung eines neuen Custom-Typs

Inhalte definieren

Anschließend können die benötigten Inhalte einfach pro Inhaltstyp festgelegt werden. Dabei bietet Prismic verschiedene Arten von Feldern an, zum Beispiel Überschriften, formatierbaren Text oder Bilder. Die Felder können in Anzahl und Reihenfolge beliebig kombiniert werden, sodass auch spezielle Daten strukturiert untergebracht werden können, die man in anderen Systemen nur im Fließtext platzieren könnte.

Denkbar wäre etwa die Angabe von Kilometerstand und Erstzulassung bei einem Repeatable-Typ „Fahrzeug“ auf der Webseite eines Autohauses.

Definition des Custom-Typs "Fahrzeug"

Dynamische Inhalte unterbringen

Neben den festgelegten Strukturen bietet Prismic mit sogenannten Slices die Möglichkeit, wiederverwendbare Bereiche innerhalb eines Custom Types zu definieren.

Slices lassen sich genauso wie Custom Types beliebig mit Feldern füllen und können dann bei der Erstellung von Inhalten an beliebiger Stelle genutzt werden, um so beispielsweise ein Bild zwischen zwei Text-Abschnitten eines Blog-Posts einzufügen.

Einfügen von Slices in einem Blog-Post

Mit Slices können den Autoren festgelegte Komponenten zur Verfügung gestellt werden, aus denen die Seiten aufgebaut werden. Neben „Text“, „Bild“ und „Code“ sind zum Beispiel auch Slices für Zitatboxen, vorgestellte Artikel oder Produkte denkbar.

Prismic Schritt für Schritt nutzen

Da ein Headless-CMS weitgehend unabhängig von der eingesetzten Frontend-Implementierung ist, ist man nicht gezwungen, auf einen Schlag alle Inhalte im CMS zu modellieren und zu erstellen. 

Dies ist von besonderem Vorteil bei einer schrittweisen Migration oder bei der Erweiterung einer statischen Seite um CMS-basierte Inhalte. 

Fazit

Klassische Content-Management-Systeme bieten häufig die Möglichkeit, neben einfachen „Seiten“ die speziellen Inhaltstypen „Blog-Post“ und „Portfolio“ zu nutzen, um die verschiedenartigen Inhalte einer Webseite voneinander zu unterscheiden und diese zu strukturieren. Letztendlich greift man als Autor aber immer wieder auf einen Text-Editor oder Tools wie Elementor zurück, um der Seite Struktur und Inhalt zu geben.

Bei einfachen Blogs und Projekt-Webseiten mit einem oder wenigen Autoren reichen diese Möglichkeiten meist aus, jedoch können erweiterte Ansprüche fast immer nur mithilfe externer Plugins realisiert werden, die das CMS schnell unübersichtlich und langsam werden lassen.

Headless-Systeme wie Prismic bieten die Möglichkeit, den eigenen Content ganz frei zu strukturieren, ohne dabei Kompromisse eingehen zu müssen. Für das Design-Konzept als auch für die technische Umsetzung einer Webseite bietet dies erhöhte Flexibilität. So können beispielsweise auch Meta-Daten zu den modellierten Objekten explizit im CMS gepflegt und im Frontend gezielt angezeigt oder aufbereitet werden.


Enzo Volkmann
Enzo Volkmann

Backend Hacker

Veröffentlicht am 12.02.2019 um 12:00 Uhr