Templating-System erklärt

in  Basics , , ,

Templating-System erklärt

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 https://www.smarty.net/ eingesehen werden. Unter https://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 https://twig.symfony.com.

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

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'}
<img src="{$myImage}" alt="{gt text='My image'}" />

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
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
page = home.tpl
palette = palette1

[blocktypes]
html = blocks/htmlblock.tpl

[blockpositions]
footer = blocks/blank.tpl
header = blocks/blank.tpl
right = blocks/blank.tpl
topnav = blocks/blank.tpl

[blockinstances]

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
modules/Content/templates/block/menuitem.tpl: themes/MeinTheme/templates/modules/Content/block/menuitem.tpl

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

Weitere Beiträge in Kategorie Basics

CSS-Konzepte spielerisch lernen
- Die Cascading Style Sheets zum Gestalten von Internetseiten und Webanwendungen gibt es schon eine ganze Ewigkeit. Elementare Dinge ändern sich hier vergleichsweise selten. Mit der Umstellung von …
Twig: kleine Syntax-Anpassung mit deutlichem Einspareffekt
- Der folgende Tipp hilft dabei, den Code-Umfang häufiger Abfragen in Twig-Templates zu reduzieren. Dies verbessert die Lesbarkeit enorm und hilft dabei, die Logik in den Templates intuitiver zu …
Funktionale Programmierung in Twig: Collections deklarativ verarbeiten
- Seit kurzem haben neue Funktionen in die Template-Engine Twig Einzug gehalten. Diese verändern die Art und Weise, wie mit mehrwertigen Daten umgegangen wird, fundamental. Aus diesem Grund soll dieser …
Prägnante und strukturierte Stylesheets mit SCSS
- Auch wenn es für einige Leser ein alter Hut ist, so gibt es dennoch sicherlich andere, die noch keine Erfahrungen mit Less oder Sass haben. Daher sei einmal das sehr leicht zu erlernende SCSS (Sassy …
Kategorien in Zikula - weit mehr als nur Themen
- Der Zikula Core enthält eine zentrale Verwaltung für Kategorien, mit denen man vielfältige Lösungen umsetzen kann. Die häufigste Verwendung von Kategorien ist sicherlich eine thematische Zuordnung von …