Templates als Distribution

Wie man eine HTML-Vorlage auf Basis einer eigenen Extension in TYPO3 integrieren kann.

Einleitung

In dieser Video-Serie zeigen wir, wie Sie ein eigenes Template als Extension in TYPO3 integrieren können. Dabei kommt eine spezielle Form von Extension zum Einsatz - die Distribution.
Zur Integration der HTML-Vorlage in TYPO3 wird Fluidtemplate verwendet.

Hinweis: die in diesen Videos gezeigten Methoden sind nur eine von vielen Möglichkeiten, Templates in TYPO3 zu integrieren. In TYPO3 führen oft viele Wege zum Ziel, wobei nicht unbedingt ein Weg besser als ein anderer ist.

Teil 1: Einführung

In diesem Video erfahren Sie, um was es in der Serie geht, was eigentlich eine Distribution ist sowie für welche Zielgruppe die Videos geeignet sind.

Teil 2: TYPO3 7 installieren

Für die Videos benötigen Sie eine frische, leere TYPO3-Installation. In diesem Video installieren wir TYPO3 Version 7.

Teil 3: Extension Builder installieren

Das Erstellen einer Distribution gelingt am einfachsten mit Hilfe der Erweiterung “Extension Builder”. In diesem Video sehen Sie, wie Sie den Extension Builder in TYPO3 7 installieren können.

(Extension Builder auf Github)

Teil 4: Distribution erzeugen

Eine Distribution ist eine spezielle Art von Extension. Mit dem “Extension Builder” erzeugen wir das Grundgerüst unserer Distribution.

Teil 5: Distribution vorbereiten und aktivieren

In diesem Video nehmen wir einige Anpassungen in der zuvor erzeugten Distribution vor und aktivieren diese schließlich.

Teil 6: Ordnerstruktur der Distribution anpassen

Vor der Integration der HTML-Vorlage nehmen wir noch Anpassungen in der Ordnerstruktur der Distribution vor. Außerdem bereiten wir eine möglichst effektive TypoScript-Struktur vor.

Teil 7: HTML-Vorlage vorbereiten

Als Beispiel verwenden wir in den Videos eine HTML-Vorlage der Website initializr.com. In diesem Video bereiten wir die Verwendung der Vorlage in der Distribution vor. Natürlich können Sie hier auch eine eigene Vorlage verwenden.

Teil 8: HTML-Vorlage für Fluidtemplate aufbereiten

Eine HTML-Vorlage sollte man für die Verwendung in Fluidtemplate noch sinnvoll strukturieren. In diesem Video teilen wir die Vorlage in Layouts, Templates und Partials auf.

Teil 9: Layouts, Templates und Partials in TYPO3 ansprechen

Nachdem die Vorlage in Layout, Template und Partials aufgeteilt wurde, müssen wir diese Dateien in TYPO3 einbinden. Dazu verwenden wir das FLUIDTEMMPLATE-Objekt.

Teil 10: CSS und JavaScript einbinden

In diesem Video sehen Sie, wie Sie CSS- und JavaScript-Dateien per TypoScript einbinden können.

Teil 11: Meta-Tags einbinden

Im -Bereich der Vorlage befinden sich verschiedene meta-Tags. Auch diese lassen sich recht einfach per Typoscript einbinden.

Teil 12: Conditional Comments für ältere Internet Explorer

Um auch ältere Internet Explorer zu unterstützen, können bestimmte Conditional Comments verwendet werden. In diesem Video sehen Sie einen möglichen Weg, diese Conditional Comments in das Template zu integrieren.

Falls Sie die Internet Explorer 8 oder älter nicht mehr unterstützen möchten, können Sie dieses Video einfach überspringen.

Teil 13: Inhaltselemente im Frontend ausgeben

In diesem Video passen wir das TypoScript und die Template-Datei an, damit Inhaltselemente auch im Frontend ausgegeben werden.

Teil 14: Backend-Layout erzeugen und auswerten

Damit die Darstellung der Spalten im Backend der Ausgabe im Frontend entspricht, nutzen wir ein Backend-Layout. Zusätzlich passen wir das TypoScript an, um später auch mit mehreren Backend-Layouts arbeiten zu können.

Teil 15: TypoScript für die Hauptnavigation

Mit ein paar Zeilen TypoScript lässt sich die relativ simple Navigation der HTML-Vorlage umsetzen.

Teil 16: Link zur Homepage

Im linken Bereich des Headers kann man per TypoScript einen Link zur Startseite des Webauftritts integrieren.

Teil 17: Ausgabe im Footer

Der Footer kann zur Ausgabe eines sekundären Menüs verwendet werden.

Teil 18: aside-Element nur bei vorhandenen Inhalten

Per TypoScript kann man erreichen, dass das <aside>-Element nur gerendert wird, wenn auch tatsächlich Inhalte vorhanden sind.

Teil 19: config-TypoScript verbessern

Durch ein paar Parameter im config-TypoScript kann man das HTML-Rendering von TYPO3 noch verbessern.

Teil 20: Page und UserTSconfig einbinden

Auch TSconfig-Anweisungen können in Dateien ausgelagert und durch die Distribution automatisch eingebunden werden.

Teil 21: Backend-Layouts per Page TSconfig definieren

Ab TYPO3 7.4 gibt es die Möglichkeit, Backend-Layouts über das Page TSconfig zu definieren. Damit ist auch ein auslagern in Dateien möglich geworden.

Falls Sie eine ältere Version als 7.4 verwenden, können Sie dieses Video aber überspringen.

Bitte beachten:

Seit der Erstellung dieser Videos hat sich noch einmal etwas in TYPO3 geändert. Werden Backend-Layouts in das PageTSconfig ausgelagert, muss im TypoScript bei der ID des Backend-Layout noch pagets__ vorne angestellt werden.

Im folgenden ein Codebeispiel, das ab TYPO3 7.6 funktioniert.

Bitte diesen Code nicht einfach 1:1 für die Demo-Distribution verwenden, es handelt sich um ein Beispiel, das natürlich noch angepasst werden müsste!

page.10 = FLUIDTEMPLATE
page.10 {
  partialRootPath = EXT:mydemodistribution/Resources/Private/Partials/
  layoutRootPath = EXT:mydemodistribution/Resources/Private/Layouts/

  ## Backend-Layouts auswerten
  file.stdWrap.cObject = CASE
  file.stdWrap.cObject {
    key.data = pagelayout

    # default = 2Columns
    default = TEXT
    default.value = EXT:mydemodistribution/Resources/Private/Templates/2Columns.html

    ## Wenn BE-Layouts in der DB gespeichert, sind Zugriff nur über die ID, also 1 = TEXT...
    ## Wenn BE-Layouts im PageTS gespeichert sind, Zugriff über pagets__ID, also z.B. pagets__1 = TEXT...

    # Homepage
    pagets__1 = TEXT
    pagets__1.value = EXT:mydemodistribution/Resources/Private/Templates/Homepage.html

    # 2Columns
    pagets__2 < .default

    # 1Columns
    pagets__3 = TEXT
    pagets__3.value = EXT:mydemodistribution/Resources/Private/Templates/1Column.html
  }

  ## Inhalte an die Templates übergeben
  variables {

    left < styles.content.get
    left.select.where = colPos = 1

    main < styles.content.get
    main.select.where = colPos = 0

    right < styles.content.get
    right.select.where = colPos = 2
  }
}

Teil 22: Beispiele für Fluid-Viewhelper

Mit Fluid kann man viel Logik ins Template verlagern. Dinge, die früher (teilweise umständlich) per TypoScript gelöst werden mussten, lassen sich jetzt relativ einfach direkt im Fluidtemplate erledigen. Als Beispiele schauen wir uns folgende Viewhelper an: if, format.crop und format.date

Teil 23: Distribution fertigstellen

Das besondere an den Distributions ist ja, dass sowohl Dateien mitgeliefert als auch komplette Seitenbäume samt Inhalten installiert werden können. In diesem Video legen wir ein paar Beispiel-Dateien an und erzeugen eine .t3d-Export-Datei.

Teil 24: Die Distribution testen

In einem frisch installierten und leeren TYPO3 7.4.0 testen wir, ob unsere Distribution funktioniert.

Aktualisiert: 29.06.2016