Grundlagen und Best Practices Grundlagen und Best Practices
Templating-System erklärt

Mittwoch, 02. September 2015

In Zikula wird eine „Templating-Engine“ verwendet, um Inhalt und Form voneinander getrennt zu halten. Dies bedeutet, dass der programmierte Quelltext, der eine bestimmte Funktion bereitstellt, woanders liegt als das Aussehen der entsprechenden Seite.

Dies ermöglicht es, dass sich Backend-Entwickler um die Implementierung kümmern, während Frontend-Entwickler die Oberfläche aufbauen und anpassen. Zum Frontend zählen im Wesentlichen das Markup (HTML), Client-seitige Skripte (JavaScript) sowie Stile (CSS).

Um eine Zikula-Seite zu gestalten oder zu verändern, muss kein Programmiercode angefasst werden. Jegliches Customising lässt sich in Templates durchführen. Ein Modul stellt Templates für jede Funktion bereit, die es zur Verfügung stellt. Ein Modul für Newsbeiträge verfügt beispielsweise über Templates für die Liste der Beiträge, die Detailansicht eines Beitrags, die Änderungsformulare, usw. Ferner stellt ein Modul allgemeine JavaScript- und CSS-Dateien bereit, die unabhängig von der Gestaltung einer konkreten Website für das Modul notwendig sind.

Ein Theme wiederum beinhaltet vor allem Templates für den HTML-Rahmen und die JS- und CSS-Dateien, die für eben diese Website relevant sind. Ein Theme realisiert also die Gestaltung einer konkreten Website, in welche die unterschiedlichen Module eingebunden werden. Neben dem Hauptinhalt des aufgerufenen Moduls kann ein Theme auch mehrere Blockpositionen definieren, in welche zusätzliche Inhalte einge­bunden werden (z. B. linke Spalte, Fußleiste, Hauptmenü, usw.).

Eine einzelne Template-Datei ist jedoch nicht auf statisches HTML beschränkt. Die Templating-Engine stellt eine entsprechende Template-Sprache bereit, die es erlaubt, mittels unterschiedlichen logischen Aus­drücken mit den Daten zu arbeiten. Dazu zählen etwa Bedingungen, Variablen oder auch Schleifen.

Außerdem bietet die Templating-Engine „Plugins“, um funktionale Erweiterungen für diese Sprachen ein­fach umzusetzen. So gibt es beispielsweise „Funktionen“, die einfach aus dem Template heraus aufgerufen werden können. Weiterhin gibt es Filter, mit denen eine Variable verändert werden kann: als einfaches Bei­spiel sei hier ein Filter zur automatischen Großschreibung eines Textes genannt. Daneben gibt es weitere Zusatzmechanismen, deren Erklärung hier zu weit ins Detail führen würde. Sowohl Module als auch Themes können Plugins beinhalten und so wiederkehrende Funktionen in einer zentralen Datei kapseln.

Smarty

Gegenwärtig (in Zikula 1.x) wird vornehmlich die Templating-Engine „Smarty“ eingesetzt. Grundlegende Informationen dazu können unter http://www.smarty.net/ eingesehen werden. Unter http://www.smarty.net/docsv2/de/ findet sich ferner eine ausführliche deutschsprachige Dokumentation.

Twig

Ab Zikula 2.0.0 wird Smarty komplett durch die neuere und modernere Templating-Engine „Twig“ abgelöst. Diese wird als Teil von Symfony nicht nur aktiver als Smarty weiterentwickelt, sondern besticht insbeson­dere durch eine wesentlich schnellere und performantere Funktionsweise. Die Zikula Core-Entwickler haben bereits prototypisch festgestellt, dass die Ladezeit und auch die Serverlast durch die konsequente Nutzung von Twig rapide gesenkt werden. Nähere Informationen zu Twig gibt es unter http://twig.sensiolabs.org/.

Zikula-Spezifika

Die Templating-Engine wird von Zikula um zusätzliche Funktionen und Möglichkeiten angereichert, die das Arbeiten weiter vereinfachen. Im Folgenden werden vier Aspekte vorgestellt, die für die Entwicklung von Themes von zentraler Bedeutung sind:

Zusätzliche Core-Plugins

Der Zikula Core bietet eine Reihe von Plugins, die häufig benötigte Funktionen direkt in Templates zur Verfügung stellen. So kann man beispielsweise – an beliebiger Stelle – prüfen, ob ein bestimmtes Modul verfügbar ist und in diesem Fall eine Funktion dieses Moduls aufrufen, um zusätzliche Daten zu erhalten:

  1.  
  2. {modavailable modname='News' assign='hasNews'}
  3. {if $hasNews}
  4. <h3>News-Artikel:</h3>
  5. {modapifunc modname='News' type='user' func='getall' assign='articles'}
  6. <ul>
  7. {foreach item='article' from=$articles}
  8. <li>{$article.title|safetext}</li>
  9. {foreachelse}
  10. <li>{gt text='No news articles found.'}</li>
  11. {/foreach}
  12. </ul>
  13. {/if}
  14.  

 

Es existieren noch zahlreiche weitere Funktionen, um beispielsweise einzelne Blöcke aufzurufen, Seiten­variablen aufzurufen und vieles mehr.

Eigene Theme-Plugins

Ein Theme kann eigene Template-Plugins bereitstellen, um individuelle Logiken aus dem Template auszu­lagern und dieses so zu vereinfachen. Das folgende Beispiel zeigt per Zufall eines von 10 Bildern an:

  1.  
  2. {getRandomImage assign='myImage'}
  3. <img src="{$myImage}" alt="{gt text='My image'}" ... />
  4.  

 

Konfigurationsdateien

Ein Theme bietet eine Reihe von Konfigurationsmöglichkeiten in einem „config“-Ordner. In gegenwärtigen Zikula-Versionen sind dies ini-Dateien, ab Zikula 2.0.0 wird statt dessen das YAML-Format (https://de.wikipedia.org/wiki/YAML) benutzt.

Mit diesen Konfigurationsdateien können beispielsweise mehrere Templates für den Seitenrahmen und für Blöcke definiert und den unterschiedlichen Seitenbereichen zugeordnet werden. Auch ist es möglich, Theme-Variablen zu definieren, die dann in der Theme-Verwaltung im Administrationsbereich verändert werden können.

Das folgende Beispiel zeigt eine ini-Datei, die festlegt, welche Blockpositionen und Blocktypen welche Templates für den home-Bereich (die Startseite) benutzen sollen:

  1.  
  2. page = home.tpl
  3. palette = palette1
  4.  
  5. [blocktypes]
  6. html = blocks/htmlblock.tpl
  7.  
  8. [blockpositions]
  9. footer = blocks/blank.tpl
  10. header = blocks/blank.tpl
  11. right = blocks/blank.tpl
  12. topnav = blocks/blank.tpl
  13.  
  14. [blockinstances]
  15.  

 

Overriding

Die mächtigste Funktion sei abschließend vorgestellt: Sämtliche Templates im System können mit Hilfe eines Overriding-Mechanismus innerhalb des Layouts angepasst und erweitert werden. Konkret bedeutet dies, dass man ein beliebiges Modul-Template in das Theme kopieren und dort verändern kann. So bleibt die Anpassung an diesem Template auch bei Updates an diesem Modul bewahrt und wird nicht versehentlich überschrieben.

Aus Performancegründen werden die Overrides in einem Theme in einer YAML-Datei beschrieben. Das folgende Beispiel zeigt zwei Overrides aus einem Theme, mit denen die Templates für das Haupt­menü überschrieben werden:

  1.  
  2. modules/Content/templates/block/menu.tpl: themes/MeinTheme/templates/modules/Content/block/menu.tpl
  3. modules/Content/templates/block/menuitem.tpl: themes/MeinTheme/templates/modules/Content/block/menuitem.tpl
  4.  

Auch Bilder, CSS-Stylesheets und JS-Skripte von Modulen können via Overriding überschrieben werden. Dies ist allerdings eher selten notwendig.

Abschließend sei ein typisches Theme-Template (body.tpl) für den Rahmen einer Website vorgestellt, in das sowohl der Hauptinhalt als auch unterschiedliche Blockpositionen eingebunden werden.

 

  1.  
  2. {assign var='sitename' value=$modvars.ZConfig.sitename}
  3. <div class="wrapper">
  4.     <header class="container" id="header">
  5.         <h1>{strip}
  6.             <a href="/" title="{$sitename}">
  7.             {img src='logo.png' alt=$sitename title=$sitename class='pull-right'}
  8.             {$sitename}
  9.             </a>
  10.         {/strip}</h1>
  11.         <p class="z-sub">{$modvars.ZConfig.slogan}</p>
  12.         {blockposition name='header'}
  13.         {blockposition name='topnav'}
  14.     </header>
  15.     <div id="main" class="container">
  16.         {$maincontent}
  17.     </div>
  18.     <div class="push"></div>
  19. </div>
  20.  

 

 

Weitere Beiträge in Kategorie Grundlagen und Best Practices

^