Neos-Grundlagen zum Thema NodeTypes

2. NodeTypes

In diesem Kapitel geht es um die Grundlagen von Neos. Genauer gesagt schauen wir uns die Content-Repository an und definieren anschließend unseren ersten eigenen NodeType.

Das Content-Repository

Ein wenig Theorie bevor wir durchstarten. Inhalte in Neos sind werden in sogenannten Nodes gespeichert. Das können unter anderem Seiten, Medien, Text, Headlines, Formulare, Buttons, Menüs oder Links sein. The sky is the limit.

Nodes können andere Nodes in sich halten. Dadurch, dass Nodes verschachtelt sein können, werden sie in einer Art Baumstruktur gespeichert (Stichworte Document- und Content Tree). Dieser Baum aus Nodes ist die Content-Repository. Der Vorteil dieses Baumes liegt darin, dass er einfach zu durchlaufen ist, sodass die beinhalteten Nodes wo anders abgerufen und wiederverwendet werden können. Die verschiedenen Arten von Nodes (Medien, Text etc.) werden NodeTypes genannt und müssen selbst gebaut oder aus Packages installiert werden.

Einen NodeType definieren

NodeTypes, manchmal auch Inhaltselemente genannt, bestehen im Grundlegenden aus mindestens zwei Teilen:

  1. Einer Definition mittels einer YAML Datei
  2. Einer Implementierung in Fusion

Wir wollen also unsere ersten eigenen NodeType erstellen. Und zwar einen Banner. Dazu erstellen wir zuerst die YAML-Datei.

NodeTypes werden in YAML-Dateien definiert
'NeosTutorial.Site:Content.Banner':
  superTypes:
    'Neos.Neos:Content': TRUE
  ui:
    label: 'Banner'
    group: 'general'
    icon: 'icon-lightbulb'
  properties:
    text:
      type: 'string'
      defaultValue: 'Bannertext'
      ui:
        inlineEditable: TRUE

Damit haben wir ein neuen NodeType erstellt, der auch schon im Backend auswählbar ist.

Unser NodeType zeigt sich

So weit so gut. Nur was hat das zu bedeuten? Grundsätzlich lässt sich sowas in den Neos Docs nachschlagen, wir können aber trotzdem einmal über die Zeilen drüber gehen.

  1. NeosTutorial.Site:Content.Banner ist der Name des NodeTypes. Es wird als best practice angesehen, NodeTypes nach diesem Namensschema zu benennen: <PackageName>:<Prefix>.<Name>. Als <Prefix> soll aus “Document", "Content", "Mixin", "Collection" oder "Constraint" gewählt werden. In diesem Fall bauen wir ein Inhaltselement und wählen den Präfix “Content”.
  2. superTypes ist ein Array, in dem Eltern-NodeTypes angegeben werden. Dessen NodeType-Konfiguration wird auf unsere übertragen.
  3. Weil wir einen Content-NodeType erstellen, wählen wir den SuperType Neos.Neos:Content (es ist auch möglich die Vererbung einzelner NodeTypes abzuschalten, indem ein FALSE angegeben wird).
  4. Unter ui geben wir an wie der NodeType in der NodeType-Auswahl im Backend angezeigt werden soll.
  5. label ist der Anzeigename
  6. group gibt an wo der NodeType eingeordnet wird. ‘general’ ist eine vordefinierte Gruppe. Neue eigene Gruppen können in einer Settings.yaml definiert werden.
  7. icon gibt das Icon an, welches in der Auswahl verwendet wird. Der Wert beginnt immer mit ‘icon-’. Die Icons werden aus FontAwesome genommen.
  8. Unter properties werden die Eigenschaften unseres NodeTypes definiert. Diese Eigenschaften werden vom Benutzer selbst gesetzt.
  9. text ist der Name unserer ersten Property.
  10. Unter type gibt man die Art der Property an. In diesem Fall nehmen wir “string”. Je nach Typ erhält man einen passenden Editor zum setzen der Properties. Mit dem Typ “string” können wir den Inhalt direkt in der Vorschau setzen. Welche Types man angeben kann steht in der PropertyEditorReference.
  11. Der defaultValue wird gesetzt, wenn die NodeType frisch erstellt wurde. Den Wert anzugeben gehört auch zu den best practices, da jeder neu erstellte NodeType valide sein muss.
  12. Properties werden im Backend im Inspektor (rechte Seite im Backend) gesetzt. Unter ui gibt man an wie die Eingabefelder im Inspektor angezeigt werden.
  13. Da wir diese Property aber direkt im Dokument editieren wollen geben wir inlineEditable: TRUE an, wodurch im Inspektor nichts eingestellt werden muss.

Laden wir das Backend neu und klicken im “Create New”-Fenster nun auf unseren neuen NodeType, bekommen wir einen netten Fehler.

Nur die Definition des NodeTypes reicht nicht aus.

Wir müssen nämlich die eigentliche Logik des NodeTypes noch bauen. Das ist der Fusion-Teil.

Hier lohnt es sich vorher schlau zu machen was Fusion ist und wie es funktioniert. Darum wird es im nächsten Kapitel gehen.

Neos Entwicklerschulung für Agenturen und Entwickler

Bonus: NodeTypes erweitern

Um uns in Zukunft Arbeit zu ersparen, können wir Standard-NodeTypes, von denen wir immer erben erweitern bzw. überschreiben. 

Davon möchten auch wir auch gebrauch machen und eine neue Inspektor-Gruppe erstellen, wo unsere eigenen NodeType-Properties platziert werden können.

In der Regel erben wir fast immer von Neos.Neos:Content, also erweitern wir diesen NodeType. Dafür wird die Datei NodeTypes.yaml erstellt und mit dem Code gefüllt:

#Configuration/NodeTypes.yaml
"Neos.Neos:Content":
  ui:
    inspector:
      groups:
        config:
          label: "Konfiguration"
          position: 1
          tab: "default"

Hierzu wurde unter ui.inspector.groups die Gruppe namens config definiert. Unter tab wird angegeben, in welchem Inspektor-Tab die Gruppe auftaucht. Der Tab default stammt aus einem Eltern-NodeType von Neos.Neos:Content.

Die neue Gruppe "Konfiguration" im "default" Tab

Lesen Sie weitere Kapitel

Impulsgespräch

Kostenloses Impulsgespräch

Mirko Kaufmann

Ihr Ansprechpartner:
Mirko Kaufmann

info@kaufmann.digital
T: +49-5771-8438930

Nach oben