webEdition: Vorlagen
Im vorigen Schritt haben wir die Hauptvorlage definiert und diese einfache Vorlage erzeugt:
<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