Code-Elemente
Wir unterscheiden grundsätzlich in:
Wir unterscheiden grundsätzlich in:
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" />
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...
<we:ifEditmode> <strong>Geben Sie hier Ihren Text ein:</strong><br> <we:textarea wysiwyg="true" name="content" inlineedit="true" /></we:ifEditmode>
<we:ifNotEditmode> <we:textarea wysiwyg="true" name="content" inlineedit="true" /></we:ifNotEditmode>
webEdition kennt zwei Arten von Schleifen, d.h. es wird eine Reihe von Elementen ausgegeben: we:block und we:listview
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>
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" doctype="Person"> <we:repeat> <li> <we:field name="name" alt="we_path" hyperlink="true"/> </li> </we:repeat> </we:listview></ul>
oder:
<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.
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:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<we:title suffix="WE-DEMO" delimiter=" - " />
<we:description xml="true"></we:description>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes,maximum-scale=2" />
<link rel="stylesheet" type="text/css" href="/_css/style.css">
<we:ifEditmode>
<link rel="stylesheet" type="text/css" href="/_css/admin.css">
<?php
// Klassen die im we:textarea verwendet werden können
$textKlassen = 'btn,center,lead,weiter,pdf';
?>
</we:ifEditmode>
<we:ifNotEditmode>
<?php
// String in Unicode umwandeln (für E-Mail Adressen)
function toUnicode($aStr) {
$retVal = '';
for ($i = 0; $i < strlen ($aStr); $i++) {
$retVal .= '&#'.ord($aStr[$i]).';';
}
return $retVal;
}
?>
</we:ifNotEditmode>
</head>
<body>
<we:ifNotEditmode>
<nav id="nav">
<div class="contentNav">
<we:include type="template" id="4" comment="/include/navigation.tmpl" />
</div>
</nav>
</we:ifNotEditmode>
<we:content />
<we:ifNotEditmode>
<we:include type="document" id="7" comment="/include/footer.php" />
<script src="/_js/jquery-3.6.3.min.js"></script>
</we:ifNotEditmode>
</body>
</html>
Danach kann man Vorlagen ohne das HTML-Gerüst erstellen:
<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>
Im Reiter Eigenschaften von diesem Artikel-Template kann man nun das Template mastertemplate.tmpl als Hauptvorlage auswählen.
Das artikel.tmpl wird dann anstelle des Tags <we:content /> im mastertemplate.tmpl eingefügt.
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.
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 agb.tmpl ein Dokument "agb.php" und legen es im Dateibaum ab im Ordner include:
<we:textarea name="text01" size="big" wysiwyg="true" inlineedit="false" />
In einer Vorlage wird das Dokument dann so eingebunden (wenn des die ID 34 hat):
<we:include type="document" id="34" />
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.