Praktisches Beispiel

Folgende Anforderung: es soll zur Anzeige der Webseite keine externe CSS-Datei eingebunden werden. Der CSS-Code soll komplett über ein VIO.Matrix-Layout erzeugt werden. Definieren Sie eine Pipeline über die eine CSS-Datei korrekt ausgegeben wird!

Vorüberlegungen

Eine CSS-Datei wird über 2 Angaben klassifiert: ihre Dateiendung .css und den Content-type "text/css". Sie sollte außerdem nicht in dem von VIO.Matrix erzeugten GoogleSitemap aufgelistet werden.

Vorbereitung

Ändern Sie im Kopfbereich der Webseite die Einbindung der CSS-Datei. Beispiel:

Schritt 1

Erzeugen Sie innerhalb des Hauptlayouts, welches dem Startordner (ID 1, der oberste in der Hierarchie im Content-Manager) zugeordnet ist, ein neues Unterlayout "css". Kopieren Sie den Inhalt Ihrer externen CSS-Datei in dieses Unterlayout.

Hinweis: spätere Änderungen am CSS-Code sind natürlich jederzeit möglich.

Schritt 2

Öffnen Sie in diesem gerade erstellten Unterlayout "css" das Menü "Bearbeiten" > "Pipeline-Definition". Ändern Sie die folgende Zeile (steht 2 Mal im Code!) entsprechend ab:

Speichern Sie das Unterlayout und schließen Sie es.

Schritt 3

Öffnen Sie im Hauptfenster des Administrators das Menü "Hauptlayout" > "Komponentendefinition" um den Serialisierer zu Definieren. Erzeugen Sie oberhalb der Zeile

eine neue Zeile. Kopieren Sie die folgende Vorlage in diese Leerzeile:

Schritt 4

Entfernen Sie die doctype-public- und doctype-system-Angaben aus dem eben eingefügten Code.
Ändern Sie die Angaben der Attribute "label" und "name" in der Zeile "map:serializer" jeweils beide zu "css". Dadurch wird dem Serialisierer der Name "css" gegeben, welcher im Schritt 3 im Unterlayout referenziert wurde.

Schritt 5

Ändern Sie doctype-file-extension auf css.
Ändern Sie die Content-Type-Angabe von text/html auf text/css.
Ergänzen Sie in einer neuen Zeile vor </map:serializer> die folgende Zeile um die erzeugte Datei von der GoogleSitemap auszuschließen:

Schritt 6

Speichern Sie die Komponentendefinition durch Klick auf "X" am Fenster oben rechts. Speichern Sie die LYK-Datei und binden diese in den Content-Manager ein. Erzeugen Sie das Web neu und prüfen, ob die CSS-Datei korrekt eingebunden und erzeugt wird.

Weitere CSS-Dateien lassen sich danach einfach erzeugen: man muss nur noch das entsprechende Unterlayout anlegen und Schritt 2 wiederholen.

weiter