Eigenes Frontend Design im TYPO3 CMS 6.2.x und 7.x

Das HTML Template

Im Gegensatz zu mach anderen Content Management Systemen »CMS« bringt das TYPO3 CMS, in der normalen Installation, keine Themes oder Designerweiterungen mit. Nicht einmal eine minimale Frontend-Ausgabe kommt im ersten Moment zu Stande. Das schreckt erst einmal viele ab. In Wahrheit aber ist es gar nicht so schwer sein TYPO3 CMS so zu konfigurieren, dass man damit schnell eine eigene Webseite bekommt.

Um unsere eigene Internetpräsenz zu erstellen, benötigen wir als aller erstes ein HTML- oder Designtemplate. Man kann es sich entweder selbst erstellen oder sich an einer reichen Auswahl im Internet bedienen. Wenn man ein Designtemplate aus dem Internet nutzt, muss einem aber klar sein, dass dieses Template eventuell auch andere benutzen. Die Voraussetzung hierfür ist, dass das Template frei zum privaten oder kommerziellen Gebrauch zur Verfügung steht.

Für meine Zwecke reicht ein sehr einfaches HTML- Template. Darum bediene ich mich einfach bei dem Bootstrap Starter Template.
Das Starter Template bringt uns zunächst zwei Dateien mit. Eine HTML-Datei und eine CSS-Datei. Dazu benötigen wir noch das Bootstrap Framework, welches man ebenfalls einfach herunterladen kann.
Als nächstes benötigen wir eine Ordnerstruktur, die zum einen Sinn ergibt und zum anderen für das TYPO3 CMS zu verstehen ist.
Hier bedienen wir uns an der Extbase Struktur. Diese bietet den Vorteil, dass einige Bereiche gleich zugriffsgeschützt sind.

Zuerst legen wir also einen Ordner an, der den Inhalt unseres Templates enthält. Darin legen wir anschließend folgende Ordnerstrukturen an:

Configuration/TypoScript
Hier liegen unsere TypoScript Dateien. Zwei Dateien (setup.txt, constants.txt) werden nach dem Konfigurieren automatisch geladen.
Resources/Private/Templates
Enthält unsere Templates
Resources/Private/Layouts
Enthält unser Layout
Resources/Private/Partials
Enthält Elemente, die wir auslagern möchten, wie z.b. die Navigation
Resources/Public/JavaScripts
Enthält das JavaScript
Resources/Public/StyleSheets
Enthält die CSS Dateien
Resources/Public/Images
Enthält alle Bilder, die wir für unser Design benötigen

Einbindung in das TYPO3 CMS

Jetzt kann es fast schon los gehen. Wir brauchen lediglich noch zwei Dateien. Die ext_emconf.php, damit TYPO3 unsere Designextension erkennt, und die ext_tables.php, in welcher wir ein paar Einstellungen definieren, damit wir uns später beim Integrieren leichter tun.

ext_emconf.php

$EM_CONF[$_EXTKEY] = array(
 'title' => 'Creativeworkspace Design',
 'description' => 'Design Templates',
 'category' => 'misc',
 'version' => '0.0.1',
 'dependencies' => 'cms,extbase,fluid',
 'state' => 'beta',
 'author' => 'Markus Sommer',
);

Configuration/TCA/Overrides/sys_template.php

TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticFile(
  $_EXTKEY,
  'Configuration/TypoScript',
  'Creativeworkspace Templates'
);

Hier definieren wir in welchem Verzeichnis unser TypoScript liegt, das zum Konfigurieren von TYPO3 benötigt wird. Dazu kommen wir aber später noch.

Wenn das jetzt alles gemacht ist, sollte, bis auf die zwei TypoScript-Dateien setup.txt und constants.txt, die Ordnerstruktur so aussehen.

Jetzt kopieren wir unsere Designextension in unser TYPO3, und zwar in den Ordner „typo3conf/ext“.
Nachdem dies geschehen ist, sollte es jetzt so aussehen:

Nun können wir in unserem TYPO3 CMS die Extension aktivieren und somit darauf zugreifen. Dies geschieht im Extensionmanager von TYPO3.

Als nächstes binden wir unser TypoScript, das zur Konfiguration unserer Seite dient, in TYPO3 ein. Hierfür benötigen wir ein sogenanntes „Template“. Dazu erstellen wir uns eine Seite und gehen danach auf den Punkt "Template" und klicken auf "New Template" bzw. "Template für neue Webseite anlegen".

Nach dem Erstellen wählen wir im Dropdown „Info und Bearbeiten“ aus .

Im Reiter „Enthält“ werden nun diese beiden statischen Templates ausgewählt. Das erste ist das Standarttemplate, welches für die Erzeugung der Inhaltselemente benötigt wird, und das zweite ist unsere Erweiterung, die wir bereits in der ext_tables.php konfiguriert haben.

Im Bereich "Allgemein" entfernen wir noch diese standardmäßig generierten Zeilen

# Default PAGE object:
page = PAGE
page.10 = TEXT
page.10.value = HELLO WORLD!

TypoScript Konfiguration

Nachdem wir das Template eingebunden haben, wird die Konfiguration aus der Datei Configuration/TypoScript/setup.txt und Configuration/TypoScript/constants.txt automatisch geladen.
Zunächst benötigen wir nur die „setup.txt“. Hierin konfigurieren wir unsere Webseite.
Als erstes registrieren wir unsere Seite mit folgenden Zeilen:

page = PAGE
page {
  typeNum = 0
}

Danach weiß TYPO3, dass wir eine Seite beabsichtigen.
Jetzt binden wir unser Template ein.

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:design/Resources/Private/Templates/Startseite.html
      default.insertData = 1
    }

  layoutRootPaths.100 = EXT:design/Resources/Private/Layouts/
  partialRootPaths.100 = EXT:design/Resources/Private/Partials/
  }
}

Jetzt wird das Template, welches wir vorher in dem Pfad „Resources/Private/Templates“ angelegt haben, für unsere Seite benutzt. Eine genaue Anleitung dazu hat Oli bereits geschrieben. Diese findet ihr hier: http://www.creativeworkspace.de/blog/artikel/backend-layout-und-frontend-layout-verknuepfen/

Was wir jetzt noch benötigen, ist die Ausgabe des Inhalts bzw. der Content-Elemente. Diese können mittels TypoScript eingebunden werden. Dazu brauchen wir folgende Zeilen in unserer setup.txt :

lib.content < styles.content.get
lib.content.select.where.current = 1
lib.content.select.where.wrap = colPos =

Damit holen wir uns die Konfiguration, die schon im CSC (css_styled_content) vorhanden ist, und erweitern sie um die „colPos“. Die „colPos“ bestimmt die Position im Backend-Layout. Eine genaue Anleitung dazu findet ihr hier:
http://typo3blogger.de/typo3-templates-mit-backend-layouts-und-fluidtemplate-turchen-19/.
Diese Anleitung ist zwar schon älter, aber es hat sich lediglich etwas am Aussehen geändert, nicht an der Funktion.
Nun binden wir unsere CSS- und Javascriptdateien ein.
Hier wird genau beschrieben, wie man die einzelnen Dateien einbindet: https://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Page/Index.html#includecss-array

Inhaltselemente Darstellen

Zum Abschluss meines Artikels binden wir über einen Fluid Viewhelper unsere Contentelemente, die wir im Backend erstellen können, in unserem Template ein. In meinem Fall ist das der DIV Container mit der Klasse „starter-template“. Das Ganze sieht dann in etwa so aus :

<nav class="navbar navbar-inverse navbar-fixed-top">
    <a class="navbar-brand" href="#">Project name</a>
    <ul class="nav nav-pills">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
        </li>
    </ul>
</nav>
<div class="container">
    <div class="starter-template">
        Hier ist der Inhalt der Hauptspalte
    </div>
</div>

Ab jetzt wird jedes Inhaltselement, das wir in der Spalte 0 im Backend anlegen, hier ausgegeben.
Und hier jetzt das Ergebnis im Frontend

So, ab nun kann man ganz einfach weitere Templates anlegen und diese mit einem Backendlayout verknüpfen.

Nachwort:
Wenn jemand Fragen oder Anregungen hat, einfach an [email protected] schreiben. Ich bin auch jederzeit via Twitter unter @delaramas erreichbar.
Wer sich die komplette Extension ansehen oder herunterladen möchte, findet sie bei mir auf Github unter github.com/beardcoder/typo3-design
Viel Spaß beim Ausprobieren und Herumexperimentieren!

Vielen Dank an: http://typo3.org/ für die Bereitstellung des Wikis