Das TYPO3 Template

Inline Template, fileadmin Dateien oder EXT Verzeichnis für das Template nutzen?

Es gibt eigentlich kein Grund das Template nicht in Form einer Extension zu schreiben. Was früher qualvoll in ewig langen Stetup Dateien direkt im Backend Extension Datensatz stand, oder in undurchschaubaren Varianten inkludiert wurde, kann eigentlich recht übersichtlich als eigenständige Extension geschrieben werden.

Die wichtigsten Vorteile:

  • Das Template ist transportabel, einfach EXT downloaden und in einer anderen Installation über den EXT-Manager einspielen.
  • Wenn Ihr ein GIT, svn oder sonst was nutzt, euer Template ist versionierbar.
  • Eigene ViewHelper, Hooks etc. können direkt im Template integriert werden
  • sämmtliche EXT Templates können dort ebenfalls untergebracht werden
  • Euer Template ist automatisch gegen unbefugten Zugriff geschützt, der typo3conf Ordner ist von außen nicht sichtbar. (googelt mal nach "fileadmin setup.txt" ;) ne echte Fundgrube)
  • Eigene Contentelemente etc. können direkt angelegt werden, da ihr in einer Extension eine ext_tables Datei und local_conf Datei laden könnt.

Der einzige "Nachteil", ihr braucht mindestens einen FTP Zugang und einen Editor (besser IDE) umd die Dateien bearbeiten zu können. Ihr werden euch aber schnell daran gewöhnt haben und das alte System nicht vermissen ...

 

Das einzige was ihr zunächst braucht ist im typo3conf/ext Ordner ein Ordner für eure Extension mit folgendem Verzeichnis / Dateibaum:

- myextension_template
---- Classes
---- Configuration
-------- PageTS
-------- TypoScript
------------ constant.txt
------------ setup.txt
---- Resources
-------- Private
------------ Templates
---------------- Default.html
-------- Public
---- ext_emconf.php
---- ext_icon.gif
---- ext_localconf.php
---- ext_tables.php

Das sieht kompliziert aus, ist es aber gar nicht. Schauen wir uns die Ordner / Dateien der Wichtigkeit nach an:


Die ext_emconf.php und ext_icon.gif Dateien

Die ext_emconf.php ist die Konfigurationsdatei die der Extensionmanager braucht um den Ordner überhaupt als TYPO3 Extension zu erkennen. Da können Abhängigkeiten zu anderen Extensions, Versionsnummer und Bezeichnungen vergeben werden. Für ein einfaches Template reichen folgende Datei:

<?php
$EM_CONF[$_EXTKEY] = array (
	'title' => 'Mein Template',
	'description' => 'Kurze Beschreibung',
	'category' => 'templates',
	'version' => '6.2.1',
	'state' => 'stable',
	'uploadfolder' => 0,
	'createDirs' => '',
	'clearcacheonload' => 1,
	'author' => 'mein Name',
	'author_email' => 'meine Email',
	'author_company' => 'optionaler Firmenname',
	'constraints' => 
	array (
		'depends' => 
		array (
		),
		'conflicts' => 
		array (
		),
		'suggests' => 
		array (
		),
	),
);

Das war es auch schon. Nachdem Ihr diese Datei angelegt habt, sollte euer Template im Extensionmanager sichtbar und aktivierbar sein.

Das ext_icon.gif ist nichts anderes als eine GIF Datei im Format 16 x 16 Pixel die in der Extensionliste als Symbol angezeigt wird.


Die ext_tables.php

Für ein einfaches Template ist auch diese Datei schnell angelegt. Die folgende Zeile besagt einfach, das im Backend Templatedatensatz (ja, den brauchen wir immer noch) bei der Includierung der Extension das Setup geladen wird:

<?php

/***************
 * Default TypoScript
 */
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticFile($_EXTKEY, 'Configuration/TypoScript', 'Mein Template');

Wenn Ihr die Datei angelegt habt, geht in den Extension Manager und aktiviert eure Extension. Ihr könnt dann auf der Rootseite einen Templatedatensatz anlegen und braucht nur noch in der Rubrik "include static from Extension" eine css styled content und eure Extension zu inkludieren.


Die setup.txt Datei

Hinweis: ab TYPO3 7.4 ist auch die Endung .ts möglich.

In der setup.txt kommt alles das rein, was früher direkt in den Backend Template Datensatz geschrieben wurde. Hier muss also zumindestens ein page Objekt aufgebaut werden um eine Frontendausgabe zu erzielen.

Im einfachsten Fall sieht die Datei so aus:

//Spaltenzuordnung für das Fuid Template
lib.content < styles.content.get
lib.contentLeft < styles.content.getLeft
lib.contentRight < styles.content.getRight 

page = PAGE
page {
    typeNum = 0
    10 = FLUIDTEMPLATE
    10 {
        file.stdWrap.cObject = CASE
        file.stdWrap.cObject {

            key.data = levelfield:-1, backend_layout_next_level, slide
            key.override.field = backend_layout

            default = TEXT
            default.value = EXT:my_extension/Resources/Private/Templates/Default.html
            default.insertData = 1
        }
	layoutRootPaths {
	    10 =  EXT:my_extension/Resources/Private//Layouts/
        }
	partialRootPaths {
	    10 = EXT:my_extension/Resources/Private/Partials/
        }
    }
}

config {

}

Mit den 3 Zeilen lib.content sagen wir nichts anderes, als das tt_content unsere Backeninhalte rendern soll und die Spalteninahlte in die jeweiligen libs schreibt. Diese können wir dann gleich im Fluid Template ausgeben.

Im page Objekt definieren wir das wir ein Fluidtemplate benutzen wollen. Mit der Zeile key.data ... legen wir fest, das wir das Template in den Seiteneigenschaften auswählen können. Aktuell haben wir nur ein "default" Template, an der Stelle können wir aber verschiedene Backendtemplates auf Frontend Fluidtemplates mappen.

Wir definieren noch den Layout-  und Partial Pfad sowie einen Platzhalter für den config Part.

Das sollte uns für ein einfaches Template reichen.


Das Fluid Default Template

Ein einfaches Default Template könne dann so aussehen:

<div class="content-left">
    <f:cObject typoscriptObjectPath="lib.contentLeft" />
</div>
<div class="content">
    <f:cObject typoscriptObjectPath="lib.content" />
</div>
<div class="content-right">
    <f:cObject typoscriptObjectPath="lib.contentRight" />
</div>

Das Snippet unter Resources/Private/Templates/Default.html speichern, alle Caches leeren und ihr solltet nun euren Inhalt aus den Backenspalten im Frontend sehen.


Damit habt ihr die Anbindung des Datenbankinhaltes an eure Seitenausgabe geschafft.

In den nachfolgenden Abschnitten wird immer wieder auf dieses Grundgerüst zurückgegriffen - egal ob ihr Menüs einbauen wollt, CSS und Javascript Dateien ergänzt oder weitere Backend / Frontendtemplates anlegt.

Zu allen Einzelpunkten findet ihr hier auf der Seite weiterführende Informationen. Bei Fragen nutzt einfach die Kommentarfunktion, weiterhin viel Spaß bei eurer Seite.

Weitere Artikel zu diesem Thema:

Empfehlenswerte Lektüre:

HTML5 Handbuch

Stefan Münz (Gründer von SELFHTML) geht in der 10. Auflage seines Bestsellers auf die Besonderheiten von HTML5 und CSS3 ein. Dabei wird ebenso die Ausgabe auf Smaptphones und Handys berücksichtigt, wie auch jQuery als Scriptsprache. Damit ist das Buch ein wertvoller Ratgeber für alle die Webseiten entwickeln unabhängig vom eingesetztem CMS System.

Kommentare

keine Kommentare vorhanden


Kommentar verfassen

Die Email Adresse wird nicht veröffentlicht.