15. Mai 2015 von & gespeichert unter Coding, Programmierung, Webdesign.

In unserem neuen Gastbeitrag nimmt Heiko Gabler das neue CMS TYPO3 Neos unter die Lupe und zeigt, wie damit neue Inhaltselemente angelegt und konfiguriert werden können:

 

Pluspol Interactive LogoÜberarbeitetes Backend und ein Content Repository zur Inhaltsverwaltung

Mit TYPO3 Neos bietet die TYPO3 Association neben dem etablierten TYPO3 CMS ein neues Content Management System an, welches mit dem eigens dafür geschriebenen PHP-Framework TYPO3 Flow entwickelt wurde. Dabei stellt Neos einen eigenen Entwicklungszweig dar und wird losgelöst von TYPO3 CMS weiterentwickelt.

TYPO3 Neos unterscheidet sich in vielerlei Hinsicht von TYPO3 CMS. Das Backend wurde zum Beispiel völlig überarbeitet. So können Redakteure Inhalte über das Inline Editing in eine Webseite einbinden. Dabei sieht der Redakteur über den integrierten Aloha HTML5 WYSIWYG-Editor die Inhalte so, wie sie nach dem Publizieren tatsächlich auf der Webseite erscheinen.

Auch die systeminterne Content-Verwaltung hat sich im Vergleich zu TYPO3 CMS um einiges verändert. Während unter CMS Inhalte und Seiten strikt voneinander getrennt in der Datenbank gespeichert werden, übernimmt unter Neos das TYPO3 Content Repository (TYPO3CR) die komplette Verwaltung der Inhalte. Das TYPO3CR bildet eine Abstrahierungsschicht bei der Verwaltung von Inhalten innerhalb von Neos. Es übernimmt Aufgaben wie die Persistierung und das Auffinden von Daten, wodurch Entwickler keinen direkten Kontakt mit der Datenbank haben müssen. Alle Inhalte werden dabei in baumartiger Struktur innerhalb der TYPO3 Content Repository Nodes (TYPO3CR Nodes) in serialisierter Form in der Datenbank abgelegt. Dabei ist es völlig egal, ob es sich um eine Seite, ein Content- oder Strukturelement handelt. Jeder dieser Inhalte wird in Neos durch einen TYPO3CR Node repräsentiert.

Neue Content-Elemente mit Hilfe der TYPO3 Content Repository Nodes

Um Inhalte im Backend anlegen zu können, werden unter Neos – genau wie unter TYPO3 CMS – Content-Elemente verwendet. Ist es unter TYPO3 CMS notwendig, das Table Configuration Array (TCA) zu erweitern, um neue Content-Elemente anzulegen, muss dafür in Neos ein neuer TYPO3CR Nodetype angelegt werden. Für die Erzeugung eines neuen NodeTypes kommt hierbei eine YAML-Datei zum Einsatz. Innerhalb der NodeType-Definition werden die jeweiligen Properties des neuen Content-Elements definiert. Im folgenden Beispiel sind das eine „Headline“ und ein „Text“. Zudem werden an dieser Stelle bereits alle Formatierungsoptionen, die im ALOHA-Editor zur Verfügung stehen sollen, definiert. Im Bereich „superTypes“ wird angegeben, dass der neue NodeType „HG.DemoSite:Textbox“ vom NodeType „TYPO3.Neos:Content“ abgeleitet werden soll. Auf diese Weise ist es möglich Eigenschaften und Konfigurationen auf neue NodeTypes zu vererben. Im Bereich „UI“ können ein Label und ein Icon für das neue Content-Element definiert werden. Aktuell steht nur eine vordefinierte Auswahl von Icons zur Verfügung, die unter http://docs.pagelines.com/tutorials/font-awesome eingesehen werden kann.

Beispiel-Definition eines neuen NodeTypes

Überschrift eingeben

‚ ui: label: ‚Headline‘ inlineEditable: TRUE aloha: ‚format‘: ‚*‘: FALSE ‚h1‘: TRUE ‚table‘: [] ‚link‘: [] ‚list‘: [] ‚alignment‘: [] ‚formatlesspaste‘: [] text: type: string defaultValue: ‚

Text eingeben

‚ ui: label: ‚Text‘ inlineEditable: TRUE aloha: ‚format‘: ‚*‘: FALSE ‚p‘: TRUE ‚b‘: TRUE ‚i‘: TRUE ‚u‘: TRUE ’sub‘: TRUE ’sup‘: TRUE ‚table‘: [] ‚link‘: [] ‚list‘: [] ‚alignment‘: [] ‚formatlesspaste‘: []

Nach dem Anlegen des neuen NodeTypes steht das neue Content-Element im Backend von Neos mit dem zuvor definierten Icon und dem zugewiesenen Label zur Auswahl.

TYPO3 Neos 2

Rendering mit TypoScript 2 und Fluid

Das neue Content-Element kann so zwar ausgewählt werden, bevor es jedoch auch genutzt werden kann, muss die Rendering-Definition für den neuen NodeType konfiguriert werden. Dafür wird mittels dem in Neos zum Einsatz kommenden TypoScript 2 der Pfad zum Fluid-Template angegeben und die Properties „Headline“ und „Text“ werden in zwei Variablen abgelegt, über welche sie im Fluid-Template wieder abgerufen werden können.

Im letzten Schritt muss das Template nun nur noch den eigenen Bedürfnissen entsprechend angepasst werden, um die im Backend eingepflegten Inhalte im Frontend wie gewünscht auszugeben.

{neos:contentElement.editable(property: ‚headline‘)} {neos:contentElement.editable(property: ‚text‘)}

 

Mit nur wenigen Zeilen Code kann das neue Content-Element jetzt verwendet werden.

Feintuning mit Constraints

Ein neues Feature unter Neos mit dem Namen Constraints ermöglicht es zudem in bestimmten Bereichen der Webseite nur bestimmte Content-Elemente (NodeTypes) zuzulassen. Auf diese Weise kann das Einhalten der im Gestaltungsprozess der Webseite getroffenen Festlegungen hinsichtlich Inhaltspositionierung und –darstellung vereinfacht werden, da Redakteure auf diese Weise nicht versehentlich falsche Content-Elemente bei der Darstellung von Inhalten verwenden.

In diesem Beispiel wurde ein Akkordeon-Element erzeugt, welches aus zwei NodeTypes besteht. Zum einen wird der NodeType „HG.DemoSite:Accordion“ als Behälter für die einzelnen Akkordeon-Elemente benötigt und zum anderen die Akkordeon-Elemente selbst – repräsentiert durch den NodeType „HG.DemoSite:AccordionItem“. Im obigen Ausschnitt der NodeType-Definition sieht man das im Bereich Constraints mit ‘*‘: FALSE alle Knotentypen als Child-Nodes ausgeschlossen wurden. In der nächsten Zeile wird dann über ‘HG.DemoSite:AccordionItem‘:TRUE explizit der NodeType für die Akkordeon-Elemente erlaubt.

Das waren nur zwei Beispiele, wie NodeType-Definitionen verwendet werden, um neue Content-Elemente unter Neos anzulegen.

Durch das Inline Editing erhalten Redakteure ein besseres Gefühl dafür, wie sich neue Inhalte in eine bestehende Webseite einfügen. Zudem bietet Neos Entwicklern mit dem Content Repository und dem knotenbasierten Content-Konzept ein durchdachtes Tool bei der Anlage neuer Content-Elemente, das bei der Umsetzung zukünftiger Projekte auch für PLUSPOL eine durchaus interessante Alternative sein könnte.




Ein Kommentar für “Neue Content-Elemente erstellen mit TYPO3 Neos”

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.