Das Standard-Template liegt in skin/DEMODESIGN/index.tpl oder pub/theme/DEMOTHEME/skin/index.tpl und ist das zentrale Grundgerüst der Webseite. Hier bestimmt der Designer, wie die Webseite aussieht und aufgebaut ist, welche Spalten verfügbar sind und wo welcher Inhalt angezeigt werden sollen. Das Haupttemplate wird bei jedem Seitenaufruf geladen.
Ein grundlegendes Standard-Template kann wie folgt aussehen:
<!DOCTYPE html>
<html lang="{$site->language}">
<head>
{include_head_tags}
{include_module_files}
</head>
<body class="main">
<div data-edit-template="layout">
{include file=$typeTemplate}
</div>
</body>
</html>
Head-Funktionen
Die Smarty-Funktionen {include_head_tags} und {include_module_files} werden unbedingt benötigt. Diese Funktionen fügen alle benötigten Dateien, Skripte, Styles und Tags ein, damit das Design korrekt verwendet werden kann.
{include file=$typeTemplate}
Mit Hilfe dieser Funktion werden die Layout-Dateien des Seitentypen eingefügt. Wenn Sie verschiedene Layouts bzw. Seitentypen haben wollen, ist diese Funktion, sowie das Attribut data-edit-template="layout" dringend notwendig.
Wenn Sie Designs oder Skripte hinzufügen wollen, können Sie das zum Beispiel durch <link> bzw. <style> und <script> -Tags tun. Wenn Sie bestimme Styles oder Skripte auslagern wollen, dann können Sie das, indem Sie folgende Dateien unter dem Site-Verzeichnis anlegen: style.css (für Styles) und script.js (für Javascript-Dateien). Diese Dateien werden immer und automatisch geladen. Diese Funktionalität wird auch bei den Seitentypen angewandt.
Beispiel für ein Design:
- Der gelbe Bereich ist das komplette Design mit allen Inhalten.
- Der graue Bereich (oben und links) sind Haupt- und Nebennavigation, die zum navigieren durch die Webseite verwendet werden. Dieser Bereich wird in der index.tpl bearbeitet und erstellt.
- Alles Innerhalb des roten Bereichs sind komplett dynamisch und können mit Hilfe von Seitentypen, Layouts und Blöcken nach freiem Ermessen gestaltet werden.