Wrap me if you can ...

12. November 2017

Die Arbeiten an womodo 7.5 sind im vollen Gange ...

Um unser bestes CMS weiter zu verbessern, haben wir die Projekte der letzten 12 Monate analysiert und nach Möglichkeiten durchforstet, die Templateentwicklung weiter zu vereinfachen. Ein erstes Resultat dieser Analyse haben wir bereits im letzten Beitrag zum neuen @{Pre-Prozessor} vorgestellt.

In diesem Beitrag geht es darum, Seitenelemente intelligent mit HTML-Tags anzureichern (zu "wrappen") und so mit weniger Template-Code besseres und fehlerfreies HTML zu erzeugen.

Umschließende HTML-Tags

In womodo 7.5 haben wir ein neues TML Attribut "wrap" implementiert, das in allen TML-Tags zur Verfügung steht. Damit ist es möglich, das Ergebnis eines <TML-tag>s mit einem HTML-Tag zu umschließen, falls das Ergebnis nicht leer ist.

Beispiele

Zunächst der Klassiker: 

<tml:children wrap="ul">
<li><tml:link/></li>
</tml:children>

Dieser Code erzeugt einen Child-Navigator mit <li>-tags, der - nur falls es auch wirklich Child-Dokumente gibt - mit einem HTML <ul>...</ul> Tag umschlossen wird. Ein (in HTML nicht erlaubtes) leeres <ul></ul> wird so automatisch verhindert und ein <tml:case haschildren="true">...</tml:case> eingespart.

Auch sonst können leicht leere HTML Tags entstehen, die es zu vermeiden gilt:

<p><tml:item name="something"/></p>

... erzeugt ein leeres <p></p>, wenn das item leer ist. Besser ist da:

<tml:item name="something" wrap="p"/>

Dieses Beispiel umschließt die Ausgabe des Item-Werts ebenfalls mit <p>...</p>. Aber nur dann, wenn das item auch einen Wert hat. Ein leeres <p></p> wird so vermieden.

Beispiel Mini-Formular:

<tml:input name="query" wrap="form"/>

Hierdurch wird ein einfaches Suchformular mit einer einzigen Zeile Template Code ermöglicht. Es erzeugt ein HTML <form> Tag, das genau ein <input> enthält. Per ENTER wird die Seite neu geladen und der URL-Parameter "query" mit der Suchanfrage angehängt.

Beispiel HTML <head>:

<tml:meta name="title" wrap="title"/>

Dieser Code erzeugt einen HTML <title>...</title> Bock, wie er im HTML <head> Bereich üblich ist.


HTML-Attribute für den umschließenden HTML-Tag

Mit Hilfe der ebenfalls neuen wrap_... und wrap-... Attribute, können dem umschließenden HTML-Tag Attribute übergeben werden:

<tml:meta name="description" wrap="h2" wrap_class="header"/>

Dies erzeugt ein <h2 class="header">...</h2> Block mit der Seitenbeschreibung als Inhalt - aber nur dann, wenn das meta "description" auch gepflegt ist.

Wie auch bei anderen Attributen in womodo wird bei wrap_... (Unterstrich) das Attribut als Text erwartet während bei wrap-... (Minus) das Attribut als "Item-Expression" ausgewertet wird.

Beispiel für die Verwendung einer "Item-Expression" als Attribut:

<tml:image name="..." wrap="a" wrap-href="URL"/>

Dieser Code erzeugt ein verlinktes Bild. Das Bild wird mit <a href="...">...</a> umschlossen. Zur Berechnung der Url wird das (ebenfalls neue) Meta URL als "Item-Expression" verwendet.


Geradlinig und ausdrucksstark

Wir sind überzeugt, mit diesen und weiteren neuen Ausdrucksformen Möglichkeiten zu schaffen, Template-Code zu vereinfachen und damit die Komplexität in Projekten zu reduzieren.