Vorlagen
webEdition verwendet eine eigene Template-Sprache (we-Tags), die in XML-Syntax geschrieben wird und sich nahtlos in HTML-Code einfügt.
Wer HTML kann, lernt auch we-Tags schnell, und es ist somit nicht nötig, PHP zu beherrschen. Durch die konsequente Verwendung dieser eigenen Sprache bleibt der Code stets updatefähig. Doch ist es für den versierten PHP-Schreiber auch möglich, direkt in die Templates eigenen PHP-Code einzufügen.
Es gibt ein Nachschlagewerk für die Tags, die Tag-Referenz.
Zur Unterstützung lässt sich ab Version 9.1.4 nun der PHP-Strict Modus einstellen.
Beim Speichern der Vorlagen bzw. dynamischen Dokumenten wird dieser dann aktiv. Somit wird in php die Typkonvertierung verboten. Das bedeutet, wenn eine Funktion add(int $a,int $b):int definiert ist, kann man ihr weder einen String "1", noch 1.0 übergeben - weil eben Integer gefordert ist.
Wir unterscheiden grundsätzlich in:
Content-Elemente
Wichtigster Bestandteil eines CMS sind Content-Elemente: Entwickler:innen legen fest, wo die Redaktion Inhalte einfügt und wie diese ausgegeben werden.
Es gibt u.a. einzeilige Eingabefelder (Überschriften, Beschriftungen), mehrzeilige Eingabefelder (formatiert oder unformatiert), Datumsfelder, Bilder und vieles mehr.
<p><we:input type="date" name="datum" currentdate="true" /></p>
<h1><we:input type="text" name="ueberschrift" /></h1>
<we:img name="bild" />
<we:textarea wysiwyg="true" name="content" inlineedit="true" />
Dadurch entsteht für die Redaktion diese Ansicht:
Werden die Felder alle befüllt und die Seite veröffentlicht, erhalten Besucher diese Ansicht:
Bedingungen
Bei einer Bedingung wird geprüft, ob etwas wahr oder falsch ist, und der Inhalt nur angezeigt oder ausgeführt, wenn die Bedingung erfüllt ist.
Bedingungen beginnen mit <we:if... oder mit <we:ifNot...
Beispiel:
<we:ifEditmode>
<b>Geben Sie hier Ihren Text ein:</b><br>
<we:textarea wysiwyg="true" name="content" inlineedit="true" />
</we:ifEditmode>
<we:ifNotEditmode>
<we:textarea wysiwyg="true" name="content" inlineedit="true" />
</we:ifNotEditmode>Der Code prüft, ob die Seite in der Redaktionsansicht innerhalb von webEdition geöffnet ist und zeigt diese Ansichten:
Mehr Bedingungen in der webEdition Tag-Referenz
Schleifen
webEdition kennt zwei Arten von Schleifen, d.h. es wird eine Reihe von Elementen ausgegeben: we:block und we:listview
we:block
In der Bearbeiten-Ansicht kann die Redaktion Block-Elemente einfügen, die dann auf der Live-Website ausgegeben werden. Ein Block kann beliebige Vorlagen-Elemente enthalten.
Beispiel: Eine Linkliste mit Name, Link Beschreibung und Bild:
<we:ifEditmode>
<we:block name="links">
<b>Name:</b><br>
<we:input type="text" name="name" size="50"/><br>
<b>Foto:</b><br>
<we:img name="portrait" /><br>
<b>E-Mail:</b><br>
<we:input type="text" name="email" size="50"/><br>
<b>Jobbeschreibung:</b><br>
<we:textarea wysiwyg="false" name="jobdescription" width="500" height="100" />
</we:block>
</we:ifEditmode>
<we:ifNotEditmode>
<div class="row">
<we:block name="links">
<div class="card col-md-6">
<h5 class="card-title">
<we:input type="text" name="name"/>
</h5>
<we:ifNotEmpty name="portrait" type="img">
<we:img name="portrait" />
</we:ifNotEmpty>
<we:ifNotEmpty name="email">
<we:input type="text" name="email"/>
</we:ifNotEmpty>
<we:ifNotEmpty name="jobdescription">
<div class="card-body">
<we:textarea name="jobdescription" />
</div>
</we:ifNotEmpty>
</div>
</we:block>
</div>
</we:ifNotEditmode>we:listview
Listviews lesen Dokumente, Medien oder Objekte nach vordefinierten Suchkriterien aus und stellen sie in einer Liste dar. Nehmen wir das Beispiel einer Personenliste von oben, dann sähe das in einer Dokumenten-Listview so aus:
Dokumententyp "Person":
<we:ifEditmode>
<b>Name:</b><br>
<we:input type="text" name="name" size="50"/><br>
<b>Foto:</b><br>
<we:img name="portrait" /><br>
<b>E-Mail:</b><br>
<we:input type="text" name="email" size="50"/><br>
<b>Jobbeschreibung:</b><br>
<we:textarea wysiwyg="false" name="jobdescription" width="500" height="100" />
</we:ifEditmode>
<we:ifNotEditmode>
<h1>
<we:input type="text" name="name"/>
</h1>
<we:ifNotEmpty name="portrait" type="img">
<we:img name="portrait" />
</we:ifNotEmpty>
<we:ifNotEmpty name="email">
<we:input type="text" name="email"/>
</we:ifNotEmpty>
<we:ifNotEmpty name="jobdescription">
<we:textarea name="jobdescription" />
</we:ifNotEmpty>
</we:ifNotEditmode>Wir können so also eine Reihe von Dokumenten erstellen, die jeweils eine Person darstellen, z.B. Mitarbeiter einer Firma.
Um eine alphabetisch sortierte Liste dieser Personen zu erstellen, benötigen wir folgenden Vorlagencode:
<ul>
<we:listview type="document" order="name" contenttypes="text/webedition" workspaceID="12">
<we:repeat>
<li>
<we:field name="name" alt="we_path" hyperlink="true"/>
</li>
</we:repeat>
</we:listview>
</ul>Wobei workspaceID die ID des Verzeichnisses ist, in dem die Dokumente liegen. Mit contenttypes="text/webEdition" stellen wir sicher, dass nur webEdition Seiten aus dem Verzeichnis gelistet werden, und nicht etwa auch Bilder.
Hauptvorlagen
In den meisten Seiten wird ein Basislayout verwendet. Um zu verhindern, dass man für jede Vorlage den Code für das Basislayout duplizieren muss (und diesen dann bei Änderungen in allen Vorlagen aktualisieren), gibt es Hauptvorlagen:
Hauptvorlage.tmpl
<!DOCTYPE HTML>
<html dir="ltr" lang='<we:pageLanguage type="language" />'>
<head>
<we:title></we:title>
<we:description></we:description>
<we:keywords></we:keywords>
<we:charset defined="UTF-8">UTF-8</we:charset>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<we:css id="5" />
</head>
<body>
<nav class="navbar">
<!-- Navigation -->
</nav>
<we:content />
<footer>
<!-- Footer -->
</footer>
</body>
</html>
Danach kann man Vorlagen ohne das HTML-Gerüst erstellen:
Artikel.tmpl:
<article style="width:400px">
<h1><we:input type="text" name="Headline" style="width:60em"/></h1>
<p><b><we:input type="date" name="Date" currentdate="true" format="d.m.Y"/></b></p>
<we:ifNotEmpty name="Image">
<p><we:img name="Image" showthumbcontrol="true"/></p>
</we:ifNotEmpty>
<we:textarea name="Content" width="400" height="400" wysiwyg="true" removefirstparagraph="false" inlineedit="true"/>
</article>und dieser Vorlage die Hauptvorlage zuweisen:
Daraufhin wird der Code der Standard.tmpl in den Bereich eingefügt, der in der Hauptvorlage mit <we:content /> markiert ist.
Man kann neben dem Hauptinhaltsbereich aber auch mehrere Bereiche in die Vorlage einfügen lassen:
<we:content name="preheader" /><!DOCTYPE HTML>
<html dir="ltr" lang='<we:pageLanguage type="language" />'>
<head>
<we:title></we:title>
<we:description></we:description>
<we:keywords></we:keywords>
<we:charset defined="UTF-8">UTF-8</we:charset>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<we:css id="5" />
<we:content name="html_head" />
</head>
<body>
<we:content name="body_start" />
<nav class="navbar">
<!-- Navigation -->
</nav>
<we:content />
<footer>
<!-- Footer -->
</footer>
<we:content name="body_end" />
</body>
</html>Die Bereiche preheader, html_head, body_start und body_end können dann (bei Bedarf) in die Untervorlage eingefügt werden:
<we:comment><!-- Das ist der Bereich, der in we:content geht --></we:comment>
<article>
<we:textarea name="Content" width="400" height="400" wysiwyg="true" removefirstparagraph="false" inlineedit="true"/>
</article>
<we:comment><!-- und hier folgen die benannten content-Elemente: --></we:comment>
<we:master name="preheader">
<?php
// header muss ausgeführt werden, bevor die Seite content geschickt hat
header("HTTP/1.0 404 Not Found");
?>
</style>
</we:master>
<we:master name="html_head">
<style>
p.alert {
color: red;
}
</style>
</we:master>
<we:master name="body_start">
<we:ifVarSet name="success">
<div class="alert alert-success">
<h2>Success!</h2>
</div>
</we:ifVarSet>
</we:master>
<we:master name="body_end">
<we:js id="15" /><!-- ein JavaScript am Ende -->
</we:master>
Includes
Eine weitere Möglichkeit, den Code der Vorlagen effizient zu organisieren, sind Includes. Dabei wird eine Datei oder eine Vorlage in die Vorlage eingefügt:
Dokumenten-Include
Angenommen, wir haben ein Dokument "AGB", das an mehreren Stellen der Seite verwendet wird. Wir wollen nicht mehrere Ausgaben dieses Dokuments pflegen müssen.
Also erstellen wir mit Hilfe einer einfachen Vorlage HTML.tmpl ein Dokument "AGB.html" und legen es im Dateibaum ab:
<we:textarea name="content" width="400" height="400" wysiwyg="true" removefirstparagraph="false" inlineedit="true"/>In einer Vorlage würde das Dokument dann so eingebunden (wenn des die ID 34 hat):
<we:include type="document" id="34" />
Template-Include
Sollen im Include Template-Funktionen zur Verfügung stehen, erstellen wir zunächst ein Template:
<we:ifEditmode>
<we:block name="block">
<b>Neuer Punkt:</b><br>
<we:input type="text" name="Listenelement" size="50"/><br>
</we:block>
</we:ifEditmode>
<we:ifNotEditmode>
<ul>
<we:block name="block">
<li>
<we:input type="text" name="Listenelement"/>
</li>
</we:block>
</ul>
</we:ifNotEditmode>In einer Vorlage wie z.B. unserer Standard.tmpl können wir dann dieses Template so einfügen:
<we:include type="template" id="55" />Wir können es aber auch in anderen Vorlagen wiederverwenden.