ModX Tutorial

Changing the net, one site at a time…

Entschlacken des Templates durch einen Header-Chunk

Das Kernstück von ModX stellten die Templates dar. Diese gestalten den gesamten Webauftritt und enthalten den gesamten Quellcode. Oft wandelt sich ein Template und es muss den neuen Anforderungen angepasst werden, die sich im Laufe des Betriebs ergeben.

Um den Überblick über das Template und dessen Content zu behalten, ist es sinnvoll, dieses möglichst schlank zu halten und alle Code-Bereiche, die reiterieren, in Chunks auszulagern. Im Folgenden soll gezeigt werden, wie man den Header eines Templates durch einen Header-Chunk "verschlankt"

 

Im Head-Bereich des Templates finden wir alle Meta-Tags und  Verweise auf die Stylesheets und Javascript Dateien, die für das Styling unseres Templates verantwortlich sind.

Hier links zu sehen ist ein Ausschnitt aus dem Header unseres Templates, das diese Seite gestaltet.

Im Folgenden werden wwir nun alle Informationen, die zwischen den head-Tags stehen (< head> ... < /head>) durch einen Chunk ersetzen.

-> Chunks

header-chunk-01
   
1. Header-Chunk erzeugen
   
Wir navigieren zu Elemente > Elemente Verwaltung und wählne dort die Option "Neues Chunk" header-chunk-02
   
Dieses Chunk benennt man nun sinnvoll (hier: headerscripte_02) und fügt ihm eine Beschreibung hinzu, die dann später im Manager-Fenster der Ressource, die man bearbeitet, gezeigt wird.
header-chunk-03
   
2. Code zwischen den Head-Tags des Templates kopieren
   
Als nächstes navigiert man zu Elemente > Elemente Verwaltung und klickt dort auf den Tab Template Verwaltung. Nun klickt man auf den Namen des Templates, das man bearbeiten möchte und kopiert den geamten Code zwischen den Head-Tags in die Zwischenablage.
   
3. Header-Code in den neuen Chunk kopieren
   

Man schließt  nun das Fenster und navigiert unter Elemente zurück zum Unterpunkt Elemente Verwaltung und wählt den Tab Chunks.

Dort klicken wir auf unseren Header-Chunk mit dem namen headerscripte_02 und fügen den Code, den wir aus dem Header-Bereich des Templates kopiert haben, in das Eingabefeld ein und speichern den Vorgang.

   
4. Head-Bereich des Templates entkernen und Call einfügen
   

Wir gehen nun zurück zu unserem Template (Elemente > Elemente Verwaltung > Template Verwaltung) und löschen den geasamten Code zwischen den Head-Tags. Dorthin setzen wir nun den Call für unseren Header-Chunk ein: { {headerscripte_02}}.

Man sieht, dass das gesamte Template durch diesen Eingriff viel schlanker und übersichtlicher geworden ist.

header-chunk-04