CSS in Neos einbinden

6. Document NodeTypes und Styling

Dass wir was zu sehen bekommen ist für den Anfang klasse, aber ohne Styling wird das ganze dann doch schnell unspannend. Gönnen wir uns etwas CSS.

Document NodeTypes

In HTML binden wir unser Stylesheet im <head>-Teil der Datei ein. Da mit Fusion im Grunde auch HTML generiert wird, ist es bei uns nicht anders.

Im Content-Ordner kommen unsere NodeType-Implementationen in Fusion hinein. Die bestehende Datei Page.fusion haben wir in den Document-Ordner geschoben. Dieser Ordner beinhaltet nämlich unsere Document NodeTypes.

Solche NodeTypes werden über den Document Tree im Backend erzeugt.

Ein eigener Document NodeType

Erstellen wir eine Seite des “Custom Page” NodeTypes, erscheint auch direkt ein Seitenmenü oben auf der Seite. Dieser NodeType wurde während der Neos-Installation durch den Site Kickstarter generiert. Der NodeType benutzt zum rendern von Inhalten noch Fluid-Templates (noch aus Typo3-Zeiten) statt Fusion. Außerdem wurde der Prototyp NeosTutorial.Site:DefaultPage in unsere Root.fusion geschrieben. Diese Datei sollte aber laut best practices nur includes beinhalten. Zeit für einen Refactor!

Wir passen die Datei NodeTypes.Document.Page.yaml an.
In der Root.fusion wird alles bis auf die includes entfernt.
Die Page.fusion wird, um es einheitlich zu halten, in Document.Page.fusion umbenannt.
Der Inhalt der Datei kann praktisch komplett neu geschrieben werden

#Schritt 1
'NeosTutorial.Site:Page':
  superTypes:
    'Neos.Neos:Document': true
  ui:
    icon: 'icon-file'
    label: 'Seite'
  childNodes:
    main:
      type: 'Neos.Neos:ContentCollection'

//Schritt 4
prototype(NeosTutorial.Site:Page) < prototype(Neos.Neos:Page) {
    body = Neos.Fusion:Tag {
        content = Neos.Fusion:Join {
            main = Neos.Neos:PrimaryContent {
                nodePath = 'main'
            }
        }
    }
}

Namen von Prototypen

Den Neos best practices nach, wird empfohlen die Namen von Prototypen mit einem der Präfixe “Content”, “Document”, “Component”, “Helper” “Presentation” oder “Integration” zu beginnen. Unser Prototyp NeosTutorial.Site:Page sollte demnach NeosTutorial.Site:Document.Page heißen. Würden wir das aber jetzt umbenennen würden gewisse Fehler auftreten, weil zuerst eine NodeType-Migration geschrieben werden müsste. Migrationen machen wir aber wann anders.

Werfen wir mal einen Blick darauf was wir nun in unserem Document-NodeType vorliegen haben. Angefangen mit der YAML-Datei. Diese Zeilen haben wir vorher nicht gesehen:

[...] 
  childNodes:
    main:
      type: 'Neos.Neos:ContentCollection'

Unter childNodes lässt sich angegeben, welche Nodes erstellt werden sollen, wenn der Node erzeugt wird. main ist hierbei der Name des Nodes und Neos.Neos:ContentCollection der Typ des Nodes. Bei der Erzeugung eines Nodes werden die Child Nodes bereits im Content Tree angezeigt. Eine "ContentCollection" ist ein Node, in welchen der Benutzer mehrere verschiedene Nodes legen kann (wie unsere Seiteninhalte).

Child Nodes, die in der NodeType definition gelistet werden, tauchen auch im Content Tree auf

Sehen wir uns als nächstes an wie sich der Fusion-Teil verändert hat (Schritt 4). Ein Document-NodeType erbt in der Regel von Neos.Neos:Page. Dieser Prototyp ist, wie der Name ahnen lässt, für das Rendern von ganzen Seiten, genauer gesagt dem <html>-Tag zuständig. Im Folgenden eine Übersicht der wichtigsten Properties des Neos.Neos:Page-Prototypes:

head - Inhalte des <head>-Tags
head.stylesheets - Zum Einbinden von Stylesheets im Header
head.javascripts - Zum Einbinden von JS im Header
body - Inhalte des <body>-Tags
body.javascripts - Zum Einbinden von JS am Ende des <body>-Tags

Unter body.content.main wurde ein Neos.Neos:ContentCollection-Objekt erstellt. Dadurch wird die ContentCollection-Node gerendert, die wir unter childNodes in der NodeType-Definition (YAML) angegeben haben. Durch nodePath = 'main' geben wir an, welche Child Node wir genau meinen, wir könnten schließlich mehrere ContentCollections im selben NodeType verwenden.

Neos Entwicklerschulung für Agenturen und Entwickler

Jetzt starten

Styling

Fügen wir an dieser Stelle doch ein Stylesheet ein. Für dieses Projekt wird das fertige Stylesheet von Bulma verwendet. Im Site Package wurde die CSS-Datei in den Ordner Public/Styles gelegt. Daneben wurde auch gleich eine eigene CSS-Datei eingefügt, in der eigene CSS-Klassen erstellt werden. Was also zu tun ist, ist zwei HTML-Zeilen in den Head-Teil unserer Seite einzufügen.

head.stylesheets {
       bulma = Neos.Fusion:Tag {
           tagName = "link"
           attributes {
               rel = "stylesheet"
               type = "text/css"
               href = Neos.Fusion:ResourceUri {
                   package = "NeosTutorial.Site"
                   path = "Styles/bulma.css"
               }
           }
       }
       site = Neos.Fusion:Tag {
           tagName = "link"
           attributes {
               rel = "stylesheet"
               type = "text/css"
               href = Neos.Fusion:ResourceUri {
                   package = "NeosTutorial.Site"
                   path = "Styles/style.css"
               }
           }
       }
   }
  
   body = Neos.Fusion:Tag {
   [...]

Das Neos.Fusion:ResourceUri-Objekt wandelt dabei den Pfad zu unseren Stylesheets in URLs um, mit denen der Browser auch etwas anfangen kann.

Nun können wir die CSS-Klassen auch für den Banner benutzen.

In diesem Kapitel haben wir einen Document-NodeType der alte Fluid-Templates verwendete modernisiert und der gesamten Seite ein Stylesheet spendiert. Neben Stylesheets können natürlich auch Webfonts oder Favicons eingebettet werden.

In den nächsten Kapiteln geht es um AFX und die Aufteilung von Fusion-Objekten in Content und Component.

6. Document NodeTypes und Styling

Document NodeTypes

Ein eigener Document NodeType

Styling

Lesen Sie weitere Kapitel

Kostenloses Impulsgespräch