Templates als Distribution

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.

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

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)

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

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

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.

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.

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.

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

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

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

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.

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

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.

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

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

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

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

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

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

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
  }
}

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

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.

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