Erste Schritte mit TYPO3 Neos

Bevor der Spaß losgehen kann, müsst ihr TYPO3 Neos naturgemäß zunächst einmal installieren. Die Neos-Installation geht am einfachsten mit dem Dependency Management-Werkzeug Composer, welches sich in der PHP-Welt mittlerweile als Quasi-Standard etabliert hat. Falls ihr Composer noch nicht installiert habt, solltet ihr das nun als erstes tun:

Anschließend könnt ihr die heruntergeladene PHAR-Datei nutzen, um TYPO3 Neos zu installieren:

Achtung: Mit diesem Befehl wird stets die neueste Entwicklungsversion von TYPO3 Neos installiert. Möchtet ihr stattdessen die letzte stabile Version von Neos installieren (zum Zeitpunkt des Verfassens gab es allerdings noch keine), geht das wie folgt (beachte: „-s stable“ statt „-s alpha“):

Anschließend könnt ihr erst einmal eine Tasse Kaffee trinken (je nach Bandbreite eventuell auch mehr als eine), denn Composer lädt nun alle von TYPO3 Neos benötigten PHP-Bibliotheken herunter (aktuell sind das 23 verschiedene).

Nach der Installation von Neos muss nun nur noch der Document Root eures Webservers auf das Verzeichnis Web/ innerhalb der Neos-Installation umgeleitet werden (verwendet ihr einen anderen Webserver als den Apache HTTPD, muss zudem noch das URL-Rewriting auf die index.php konfiguriert werden) und ihr könnt eure Neos-Installation bereits über den Browser aufrufen.

Der erste Aufruf der Seite mag zunächst erschrecken, da Neos euch nun wahrscheinlich einen „Database Error“ um die Ohren wirft. Das macht jedoch nichts, heißt es doch nur, dass Neos bisher noch nicht vollständig konfiguriert wurde (im Unterschied zu TYPO3 CMS werdet ihr nicht automatisch ins Install-Tool weitergeleitet).

Um TYPO3 Neos zu konfigurieren, bietet Neos ein Setup-Werkzeug an, das in etwa mit dem aus TYPO3 CMS bekannten 1,2,3-Installer vergleichbar ist. Um dieses Installations-Werkzeug aufzurufen, müsst ihr an die URL einfach noch den Pfad /setup/ anhängen. Im ersten Schritt überprüft der Installer, ob euer Server für die Installation von TYPO3 Neos geeignet ist und leitet euch anschließend weiter. Der Sicherheit halber werdet ihr dann nach einem Passwort gefragt, welches Neos in einer Datei im Data/-Verzeichnis hinterlegt (ansonsten könnte sich ja jeder durch euer Installtool klicken). Achtung: Das Passwort ist nur einmal gültig, danach wird die Datei mit dem Passwort gelöscht.

In den nächsten Schritten könnt ihr nun zunächst die Verbindungsdaten zur MySQL-Datenbank aufbauen (im Unterschied zu TYPO3 CMS muss es derzeit scheinbar tatsächlich eine MySQL-Datenbank sein; durch Bearbeiten der entsprechenden Settings.yaml-Datei im Configuration/-Verzeichnis solltet ihr jedoch auch ebenso gut andere Datenbank-Systeme einsetzen können) und anschließend die Daten für den ersten Admin-Benutzer angeben.

Im letzten Schritt bietet euch das Install-Tool an, eine bereits existierende Seite zu importieren (beim Installieren hat Composer bereits automatisch das Paket TYPO3.NeosDemoTypo3Org mit heruntergeladen). Möchtet ihr in Neos jedoch eigene Seiten erstellen, macht es hier Sinn, ein eigenes Paket zu erstellen.

Interessanter Fakt am Rande: Jede TYPO3 Neos-Seite ist wiederum ein Paket, welches über die Composer-Paketverwaltung auch verteilt und auf anderen Seiten installiert werden kann. Über entsprechende Kommandozeilenbefehle könnt ihr auch alle Inhalte einer Seite in ein XML-Format exportieren und diese Daten auf einer anderen Neos-Instanz wieder einspielen.

In meinem Beispiel wähle ich als Paketname zunächst MH.DemoSite (beachtet die Konvention, einen Paketnamen aus einem Vendor Name und dem eigentlichen Paketnamen zusammenzusetzen).

Falls ihr bei der Installation noch kein Paket für eure Seite erstellen möchtet, ist dies auch kein Problem: Dieser Schritt im Installer ruft lediglich Funktionen des Pakets TYPO3.SiteKickstarter auf, welches ihr auch jederzeit nachträglich über die Kommandozeile aufrufen könnt:

Nach der Installation leitet euch Neos auf die Startseite weiter. Wie ihr seht, wurde bei der Installation bereits eine Minimal-Seite mit einem einfachen Menü und einem einfachen „Hallo Welt“-Inhalt erstellt. Bevor ihr euch nun daran macht, ein eigenes Template zu entwerfen, werft zunächst einen Blick in das Neos-Backend. Analog zum TYPO3 CMS gelangt ihr in das Backend, indem ihr – nicht /typo3/, sondern – den Pfad /neos/ an die URL anhängt. Meldet euch anschließend mit den Benutzerdaten an, die ihr während der Installation angegeben habt.

Das Backend sieht standardmäßig so ähnlich aus wie in der Abbildung unten. Über die „Wireframe“-Schaltfläche könnt ihr in einen Modus schalten, in dem Neos die Inhalte der Seite unabhängig vom aktuellen Template ausgibt – ihr den Inhalt also auch völlig losgelöst vom Design bearbeiten könnt.

Im linken Bereich findet ihr zunächst etwas, was verdächtig an den althergebrachten Seitenbaum aus TYPO3 CMS erinnert. Tatsächlich enthält dieser Baum auch die Seiten eurer Website, ist jedoch viel mehr als „nur“ der alte Seitenbaum. Zur Erinnerung: Struktur und Inhalte einer Website werden in TYPO3 über Seiten und Inhaltselemente abgebildet. Dabei kann jede Seite beliebige Unterseiten haben und Inhaltselemente beinhalten. Eine Verschachtelung von Inhaltselementen ist standardmäßig jedoch nicht vorgesehen, bzw. nur über Umwege wie Grid Elements oder Templavoilà möglich.

In Neos sind Inhalte einer Website anders modelliert: Die aus TYPO3 bekannte strikte Trennung von Seiten und Inhaltselementen wurde aufgehoben. Eine Neos-Seite besteht nun nur noch aus Knoten (engl. nodes), die in nahezu beliebigen Hierarchien angeordnet werden können. Ein solcher Knoten kann beispielsweise eine Seite sein, aber auch ein klassisches Text-Inhaltselement oder ein Strukturelement wie beispielsweise ein zweispaltiger Container. Somit unterstützt Neos von Haus aus ein beliebig tief verschachtelbares Content-Modell.

Über den Plus-Button oben im linken Bereich könnt ihr nun (unter anderem) neue Seiten unterhalb der aktuell ausgewählten Seite anlegen. Legt also ein paar zusätzliche Seiten an, damit das Menü ein paar mehr Einträge enthält.

Wenn ihr eine der so erstellten Seiten anklickt, seht ihr im Wireframe-Modus den Abschnitt Main, unter dem ihr nun neue Inhalte hinzufügen könnt. Dies geht über den Plus-Button, der erscheint, sobald ihr den leeren Abschnitt anklickt. Wie ihr seht, unterscheidet Neos nun zwischen Inhaltselementen (Texte, Bilder, Überschriften und so weiter) und Strukturelementen (also etwa zwei- oder dreispaltige Layouts). Diese werden jedoch alle innerhalb desselben Content-Trees gespeichert; eigene (auch hierarchische) Inhaltselemente können problemlos hinzugefügt werden.

Nachdem ihr nun ein paar Inhalte angelegt habt, könnt ihr euch daran machen, das Layout eurer neu erstellten Seite euren Wünschen anzupassen. Wie bereits erwähnt, ist jede TYPO3 Neos-Seite gleichzeitig auch ein Flow-Paket. Im Unterschied zu herkömmlichen Applikations-Paketen finden sich Seiten jedoch nicht im Verzeichnis Packages/Application, sondern unter Packages/Sites (das ist jedoch lediglich eine Konvention; genau genommen ist es Flow recht egal, welchen Namen die Unterverzeichnisse im Packages-Verzeichnis tragen).

Genau wie ein ganz normales über das Flow-Paket TYPO3.Kickstart erstelltes Package enthält auch ein Site-Package die Verzeichnisse Classes, Configuration, Documentation und Resources (und noch ein paar weitere, aber machen wir es zunächst einmal nicht zu kompliziert). Das Classes-Verzeichnis werdet ihr wahrscheinlich nur dann brauchen, wenn euer Site-Package auch eigene Neos-Plugins enthalten soll. Andernfalls sind die wichtigsten Verzeichnisse zunächst die Verzeichnisse Configuration und Resources.

Das Verzeichnis Configuration enthält die Konfigurationsdateien eures Pakets (TYPO3 CMS-Umsteiger aufgepasst: Damit ist nicht das TypoScript-Setup gemeint, das liegt nämlich noch woanders). Nach dem Erstellen des Pakets findet ihr hier zunächst eine (bis auf einige Kommentare leere) Datei NodeTypes.yaml. In dieser könnt ihr später bei Bedarf eigene Inhaltselemente definieren. Möchtet ihr Konfigurationsdaten der unterliegenden TYPO3 Flow-Installation überschreiben, könnt ihr hier auch eine Datei Configuration.yaml erstellen.

Die spannendsten Inhalte findet ihr jedoch im Verzeichnis Resources/Private. Hier liegt im Unterverzeichnis Templates/Page eine Datei Default.html. Hierbei handelt es sich um ein Fluid-Template, welches das Standard-Layout für eure Seite enthält. Der Name dieser Datei ist frei wählbar und kann über TypoScript konfiguriert werden (und natürlich könnt ihr auch über TypoScript wieder mehrere verschiedene Templates für unterschiedliche Seitentypen verwenden).

In einem frisch angelegten Site-Package sieht die Default.html-Template-Datei aus wie folgt:

Wie ihr seht, handelt es sich bei dieser Datei zunächst um ein handelsübliches Fluid-Template. Spannend sind hier vor allem die f:section-ViewHelper, die in der Datei verteilt sind (in diesem Fall drei Stück mit den Namen stylesheets, scripts und body). Auch wenn die <html>– und <body>-Tags im Template anderes vermuten lassen, rendert Neos zunächst nur den Inhalt dieser drei Abschnitte (sections) in die Ausgabe der Seite (aber das ist selbstverständlich auch per TypoScript konfigurierbar).

Weil das ganz einfache HTML ohne Styles nun doch ein bisschen zu 90er ist, möchte ich mich als nächstes daran machen, die ganze Seite ein wenig hübscher zu gestalten. Da ich selbst nur mit wenig gestalterischen Fähigkeiten gesegnet bin, verwende ich hier das altbekannte Twitter Bootstrap-Framework, um eine halbwegs ansehnliche Seite auf die Beine zu stellen (aber natürlich könnt ihr das folgende Tutorial mit minimalen Anpassungen auch verwenden, um euer eigenes Template einzubinden).

Alle öffentlich zugänglichen Dateien haben im Resources/Public-Verzeichnis eures Site-Packages zu liegen. Ladet also zunächst die nötigen Dateien herunter und entpackt sie dort, wo sie hingehören:

Tatsächlich ist dieses Vorgehen im konkreten Fall von Bootstrap sogar unnötig. TYPO3 Neos enthält bereits das Paket TYPO3.Twitter.Bootstrap, in dem alle Bootstrap-Versionen von 2.0 bis 3.0 bereits enthalten sind. Möchtet ihr also Twitter Bootstrap produktiv verwenden, reicht es in der Regel aus, die entsprechenden Dateien aus dem TYPO3-Paket zu laden.

Anschließend könnt ihr innerhalb eures Templates den f:uri.resource-ViewHelper verwenden, um die benötigten CSS und JavaScript-Dateien einzubinden:

Um das ganze zu vervollständigen, könnt ihr nun noch die body-Section entsprechend anpassen:

Wenn ihr euch das Ergebnis im Browser anschaut, werdet ihr feststellen, dass die Seite zwar nun bereits ganz nett, jedoch lange noch nicht perfekt ist. Um beispielsweise das Menü korrekt stylen zu können, müssten die Menü-Elemente eigentlich um weitere CSS-Klassen ergänzt werden. Unglücklicherweise ist das Menü hier jedoch bereits fertig gerendert in der Fluid-Variable parts.menu gespeichert. Werfen wir also einen Blick in die TypoScript-Konfiguration, um zu sehen, wie wir das ganze anpassen können.

Sämtliche TypoScript-Dateien findet ihr im Verzeichnis Resources/Private/TypoScripts/Library. Hier hat der Site-Kickstarter für euch bereits eine Datei Root.ts2 angelegt. Dies ist per Konvention stets das Root-Template der gesamten Seite. Die aus TYPO3 CMS gewohnten Extension Templates könnt ihr anlegen, indem ihr die TypoScript-Dateien genauso benennt, wie die entsprechenden Page Nodes im Content Tree. Doch werft zunächst einen Blick in das Root-Template der Seite. Dieses sollte in etwa so aussehen wie folgt:

Wie ihr vielleicht bereits seht, ist die Ähnlichkeit mit dem altbekannten TypoScript nur auf den zweiten Blick zu erkennen. Wichtig zu erkennen ist vor allem, dass TypoScript 2 nun vollständig objektorientiert ist, jedoch prinzipiell weiterhin dieselben Prinzipien verfolgt wie das TypoScript auf TYPO3 CMS. Doch schauen wir uns das Template nun einmal häppchenweise an:

In Zeile 1 wird zunächst ein neues Objekt vom Typ Page erstellt (und damit genau genommen vom Typ TYPO3.Neos:Page, aber die Kurzschreibweise Page reicht zunächst vollkommen). Dieses Page-Objekt hat die beiden Attribute head und body. Das Attribut head ist vom Typ TYPO3.TypoScript:Array (analog zum bekannten COA-Objekt) und kann beliebige Unterelemente mit frei wählbaren Schlüsseln enthalten – in diesem Fall die beiden Unterelemente scripts und stylesheets, beide vom Typ TYPO3.TypoScript:Template. Jedes Objekt vom Typ TYPO3.TypoScript:Template hat wiederum ein Attribut templatePath (in dem der Dateipfad zu dem zu verwendenden Fluid-Template angegeben wird) und einen sectionName (dieser enthält den Namen der von dem Template zu rendernden Section).

Das Page-Attribut body hingegen ist bereits ein Objekt vom Typ TYPO3.TypoScript:Template; hier sind templatePath und sectionName direkt angegeben. Zusätzlich kann ein Template-Objekt mit beliebigen weiteren Elementen gefüllt werden, die dann innerhalb des Templates als Variable unter diesem Namen zur Verfügung stehen (so wie hier beispielsweise die Variable parts, die mit zwei Menü-Objekten der Typen TYPO3.Neos:Menu und TYPO3.Neos:Breamcrumb gefüllt ist).

Um nun die Darstellung des Menüs zu verändern, ist es wichtig zu erkennen, dass auch das Menü über ein eigenes Fluid-Template gerendert wird. Standardmäßig liegt dieses Fluid-Template in der Datei Packages/Applications/TYPO3.Neos/Resources/Private/Templates/TypoScriptObjects/Menu.html. Ihr könnt diesen Pfad für euer Menü jedoch problemlos überschreiben:

Damit wäre der Template-Pfad des Menüs schon einmal geändert. Natürlich wäre es auch möglich, ein komplett eigenes TypoScript-Objekt zu programmieren, welches hier anstelle des Typs TYPO3.Neos:Menu genutzt werden könnte. Damit würden wir an dieser Stelle jedoch über das Ziel hinausschießen, da das Ziel, das Template des Menüs auszutauschen, auch auf viel einfachere Art und Weise erreicht werden kann (interessanterweise werden neue TypoScript-Typen selbst auch wieder in TypoScript programmiert – es ist im Normalfall keine PHP-Programmierung nötig). Jetzt müsst ihr nur noch die entsprechende Template-Datei im Verzeichnis Resources/Private/Templates/TypoScriptObjects eures Pakets anlegen:

Diese Datei entspricht in weiten Teilen dem Original-Template; es wurden lediglich ein paar Bootstrap-spezifische Klassenzuweisungen hinzugefügt. Das gleiche könnt ihr nun noch für das Breadcrumb-Menü wiederholen. Mit den Anpassungen am Breadcrumb-Menü sollte eure Seite dann später so ähnlich aussehen wie in der Abbildung unten:

Eine (leider noch nicht ganz) vollständige Referenz aller zur Verfügung stehenden TypoScript-Elemente findet ihr im Anhang der offiziellen Dokumentation. Falls ihr euch jedoch genauer für die Implementierung der eingebauten TypoScript-Objekttypen interessiert, findet ihr die Implementierungen im Paket TYPO3.Neos im Verzeichnis Resources/Private/TypoScript/Prototypes. Wie ihr hier sehen könnt, ist das neue TypoScript so mächtig, dass sogar die meisten eingebauten TypoScript-Klassen selbst auch wieder in TypoScript implementiert wurden.

Alles in allem ist dies bereits ein recht respektables Ergebnis, das mit relativ wenig Mühe erreicht werden konnte. In diesem Beitrag habe ich erläutert, wie ihr TYPO3 Neos installieren und konfigurieren könnt und mit einfachen Neos-Bordmitteln eine bereits sehr individuelle Website erstellen könnt. Noch einmal spannender wird es, wenn ihr in eurer eigenen Neos-Seite die vollen Möglichkeiten des Content-Repositories ausnutzt, und beispielsweise Content-Nodes noch komplexer verschachtelt als in diesem Beispiel gezeigt, eigene Inhaltselemente definiert oder Neos um eigene Plugins erweitert.

Falls ihr dieses Beispiel selbst noch einmal nachvollziehen oder darauf aufbauen möchtet, findet ihr den Code dazu auf Github. Wer Neos testen möchte, kann das CMS auch mit einem individuellen Mittwald TYPO3 Neos Testaccount ausprobieren. Falls es weiterhin besondere Neos-Features gibt, über die ihr gerne mehr erfahren möchtet, hinterlasst gerne einen Kommentar unter diesem Artikel; die Wünsche fließen dann in den nächsten Neos-Artikel ein. :)