Damit Frontend- und Backend-Entwickler beim Erstellen von Webseiten eine immer gleiche Grundlage haben, bietet sich die Vererbung von Smarty an, die seit Version 3 zur Verfügung steht.
Hierzu erstellt man als erstes ein Template, das den groben Aufbau enthält, wie die Seite später strukturiert werden soll....
als Beispiel wähle ich dafür mal ein einfaches Template, dass wir 'interface_simpel.tpl' nennen. In diesem Template hinterlegt man, welche Bereiche dem Entwickler zur Verfügung stehen:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>{block name="pageTitle"}Interface Simple{/block}</title>
<meta name="robots" content="noindex,nofollow" />
<!-- MAIN CSS INCLUDES -->
{block name="cssIncludes"}{/block}
<!-- MAIN JS INCLUDES -->
{block name="jsIncludes"}{/block}
<!-- INLINE JS -->
{block name="jsInline"}{/block}
</head>
<body>
{block name="navigationTop"}{/block}
{block name="body"}{/block}
{block name="navigationBottom"}{/block}
</body>In diesem Interface-Template sind nun alle Blöcke definiert, die einem Entwickler zur Verfügung stehen, damit er den Seiteninhalt verändern kann.
Um einzelne Bereiche des 'interface_simple' verändern zu können, muss immer zuerst das Template mittels der Smarty Anweisung 'extends' angegeben werden. Im folgenden Beispiel überschreibe ich den Block 'pageTitle', stelle den Blöcken 'cssIncludes' sowie 'jsIncludes' jeweils eine CSS- als auch eine JS-Datei voran. Dies erfolgt mittels der Angabe von 'prepend' beim jeweiligen Block. Die Blöcke 'navigationTop', 'body' und auch 'navigationBottom' überschreibe ich ebenso wie den Block 'pageTitle'.
{extends file="PATH_TO_INTERFACES/interface_simple.tpl"}
{block name="pageTitle"}Hello{/block}
{block name="cssIncludes" prepend}
<link rel="stylesheet" href="/resources/bootstrap/css/bootstrap.min.css" />
{/block}
{block name="jsIncludes" prepend}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
{/block}
<!-- Navigation am Seitenanfang -->
{block name="navigationTop"}
Seite 1 | Seite 2 | Seite 3 | Seite ... | Seite 10
{/block}
<!-- Block für den Seiteninhalt -->
{block name="body"}
Message Of The Day: Hello World
{/block}
<!-- Navigation am Seitenende -->
{block name="navigationBottom"}
Impressum | Kontakt
{/block}Mit diesem Vorgehen kann man zum Einen simple Interfaces abbilden, als auch komplexere, indem man die einzelnen Templates der Webseite untereinander voneinander erben lässt.