Vorlagendateien müssen als *.php gekennzeichnet werden, da zu Begin und zu Ende der Parser-Pfad eingegeben werden muss. Ein Vorlage sieht wie folgt aus:
Werden über php direkt und einmalig in das Vorlagedokument eingebunden, der Pfad muss entsprechend der Dateipostion angepaßt werden. Sofern die Vorlagen im Ordner /templates liegen ist folgende Code korrekt:
<?php
include("../tycon/prepend.php");
?>
beziehungsweise am Dokumentende:
<?php
include("../tycon/append.php");
?>
<?php include("../tycon/prepend.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
<html xmlns="http://www.w3.org/1999/xhtml" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><?php echo $tyConfig[project][title];?> | <ty:topicinformation key="caption" topic="<?php echo $tyState['topic'];?>" /></title>
<link rel="stylesheet" type="text/css" media="screen" href="/templates/styles/styles.css" />
</head>
<body>
... HTML-Quellcode mit myty Tags und ggf. php
</body>
<?php include("../tycon/append.php"); ?>
Alternativ kann der aktuelle Seitenname im Titel auch mit einer XML-Tag-Kombinationausgelesen werden:
<ty:nav> <ty-nav:isTopic> <ty-nav:caption/> </ty-nav:isTopic> <ty-nav:iterate/> </ty:nav>
Es ist aus Gründen der Wartbarkeit und Übersichtlichkeit zu empfehlen, Cascading Style Sheet Definitionen in externen Dateien vorzunehmen und diese dann in die Vorlagedatei(en) einzubinden. Man trennt somit das (X)HTML Grundegrüst einer Vorlagendatei von gestalterischen Aspekten. Das (X)HTML Dokument selbst wird dadurch schlanker und gewinnt an Übersichtlichkeit.
Externe CSS-Dateien werden im head-Bereich des (X)HTML-Dokumentes unter Nutzung des <link>-Elementes eingebunden werden. Beispiel:
<head> <title>Einbinden externer CSS Dateien</title> <link href="/templates/styles/screen.css" rel="stylesheet" media="screen" type="text/css" /> <link href="/templates/styles/print.css" rel="stylesheet" media="print" type="text/css" /> </head>
Im Beispiel werden zwei CSS Dateien für jeweils unterschiedliche Ausgabemedien (Bildschirm und Druck) eingebunden. Im Attribut „href“ erfolgt die Pfadangabe relativ zur Domain.
In den myty Projekteinstellungen können zusätzliche CSS-Styles festgelegt werden, welche den Redakeuren beim bearbeiten von Texten in der Werkzeugleiste hilfreich bei der Gestaltung sein können. Dieses generische CSS wird vollautomatisch in die Vorlage eingebunden.
Das Einbinden von JavaScript Codes und Dokumenten kann im head- und body-Bereich des (X)HTML Dokumentes unter Nutzung des <script> Elementes erfolgen. Es gibt keine genaue Definition, an welcher Stelle die Codes eingebunden werden. Eingebürgert hat sich die Definition von Funktionen im head-Bereich der Vorlage, da damit sicher gestellt ist, das sie dann, wenn sie genutzt werden sollen Bereits geladen sind.
Beispiel:
<head>
<title>JavaScript im head-Bereich</title>
<script type="text/javascript">
<!--
function hallowelt() {
alert("Hallo Welt");
}
//-->
</script>
</head>
Damit ältere Browser, welche das Element <script> nicht unterstützen, den Inhalt des JavaScript Blocks ignorieren, werden die Anweisungen in HTML Kommentare gesetzt.
JavaScripts können auch in separaten Dateien definiert werden und dann in (X)HTML Dokumente eingebunden werden. Vorteil ist, dass die in der Datei definierten Funktionen in mehreren Vorlagen verwendet werden und Änderungswünsche an zentraler Stelle erfolgen können.
Beispiel:
<script src="/templates/scripts/jsdatei.js" type="text/javascript"></script>
Im Attribut „src“ des <script> Elementes wird die Pfadangabe zur externen Datei definiert. Dies erfolgt absolut zur Domain. Das Element muss geschlossen werden, Code zwischen öffnenden und schließenden Tag wird jdoch zugunsten der eingebundenen Datei ignoriert.
Als Sonder-Tags bezeichnen wir jene myty-XML-Tags die ausschließlich für die Implementierung und Verwendung in echten Vorlagedokumenten (Dateien) vorgesehen sind, als nicht in Code-Schnipseln, die über die dynamischen Areas <ty:area> eingebunden werden.
Hierzu gehören:
Eingeschlossen im <ty:optional> Element können optionale Bereiche innerhalb einer Vorlage definiert werden. In der Seitennavigation können die optionalen Bereiche dann seiten(topic)abhängig ein- bzw. ausgeblendet werden. Standardmäßig sind optionale Bereiche ausgeblendet.
Mit dem Attribut „id“ wird der Optionale Bereich eindeutig bezeichnet. Die Bezeichnung darf maximal 50 Zeichen unter Ausschluß von Sonderzeichen und Umlauten enthalten.
Beispiel:
<ty:optional id="Suchformular">
<form action="/templates/search.php" id="serach-form" method="post">
<label for="search-term">Suchbegriff eingeben</label>
<input type="text" id="search-term" name="search-term" />
<button type="submit">Suchanfrage senden</button>
</form>
</ty:optional>
Mit Hilfe der Subelemente des Elements <ty:pageFeatures> können Informationen zur aktuell gewählten Seite der Website ausgegeben und der Druck-Dialog des Betriebssystems aufgerufen werden. Folgende Subelemente sind definiert:
<ty:pageFeatures> Autor: <a href="mailto:<ty-pageFeatures:editorMail/>"><ty-pageFeatures:editorName/></a> | Zuletzt überarbeitet: <ty-pageFeatures:lastModified format="%d.%m.%Y"/> | <ty-pageFeatures:printSite>Seite Drucken</ty-pageFeatures:printSite> </ty:pageFeatures>
format(erforderlich) Gibt das Format der Datumausgabe an. Mögliche Wertzuweisungen sind:
Bei der Umsetzung von myty Projekten haben sich folgende Ordnerstrukturen etabliert. Ausgehend vom Wurzelement der Domain wird für die Erstellung von Vorlageseiten der Ordner „templates“ angelegt (vorinstalliert). Dieser enthält alle Vorlagedateien und zugehörige Ordner:
Selbstverständlich können alle definierten Ordner weitere Unterordner enthalten.
Diese Vorlagen folgen einer eigenen Syntax die hier separat beschrieben wird: Flashbook-XML-Tag-Doc