webEdition: Vorlagen

Im vorigen Schritt haben wir die Hauptvorlage definiert und diese einfache Vorlage erzeugt:

<we:input type="text" name="h1" size="50"/>
<we:textarea wysiwyg="true" name="content" inlineedit="true"/>

Dieser Template-Code erzeugt im Editiermodus diese beiden Eingabefelder für eine Überschrift und ein Textfeld:


Das ist die einfachste Form einer Vorlage. Doch nun sollen, abhängig von der Aufgabe der Seite, noch andere Bereiche neben dem Content-Bereich verändert werden. So benötigen wir für einen jQuery-Effekt ein CSS-Stylesheet im <head> und ein JavaScript am Ende der Seite. Dazu fügen wir benannte <we:content />-Elemente in die Hauptvorlage ein (unser erstes Element hatte keinen Namen!), und die korrespondierenden <we:master />-Elemente in unsere Untervorlage:

Hauptvorlage.tmpl

<!doctype html>
<html lang="de">
<head>
<we:title></we:title>
<we:content name="head"/>
</head>
<body>

<we:content />

<we:content name="footer"/>
</body>
</html>

Standard.tmpl

<we:input type="text" name="h1" size="50"/>
<we:textarea wysiwyg="true" name="content" inlineedit="true"/>

<we:master name="head">

<we:css id="100" comment="das ist unser Extra-Stylesheet" />
</we:master>

<we:master name="footer">
<we:js id="101" comment="das ist unser Extra-JavaScript" />
</we:master>

Die beiden Master-Bereiche im Unter-Template werden an Stelle der entsprechenden Content-Elemente in der Hauptvorlage eingefügt.

Struktur

Es empfiehlt sich, die Content-Elemente in der Hauptvorlage gleich von Anfang an mit einzuplanen und sie stets gleich zu benennen. Dieses System hat sich bewährt (Darstellung in Reihenfolge des Vorkommens in der Template-Struktur):

  • preheader: Wird ausgeführt, bevor der Server einen Response zurückliefert. So kann man z.B. Statuscodes senden, Umleitungen vornehmen oder Session-Daten schreiben
  • head: wird im HTML-Seitenkopf ausgegeben und dient dazu, z.B. extra CSS-Stylesheets auszugeben
  • footer: kommt vor dem schließenden </body> und enthält zusätzliche JavaScripts

Zurück: Die Hauptvorlage