T3 Campus T3 Campus

Basiskonfiguration einer TYPO3 Seite

Jede TYPO3 Webseite benötigt eine Basiskonfiguration die die Domain, das gewünschte Protokoll und die benötigten Sprachen definieren. Für die Ausgabe im Frontend ist es notwendig das PAGE Objekt zu nutzen.

Deine Aufgabe als TYPO3 Integrator ist es TYPO3 zu konfigurieren und das ohne PHP Kenntnisse. In TYPO3 gibt es sehr viel zu konfigurieren, deshalb ist es bei großen TYPO3 Projekten sinnvoll dieses Teil einer Person / Team zuzuweisen.

Jede Webseite benötigt in TYPO3 eine Startkonfiguration. Denn ohne jegliche Konfiguration bekommt man in TYPO3 eine Fehlermeldung:

No TypoScript Template Found Fehlermeldung

Und da wird auch die Sprache benannt mit der du dich haupsächlich beschäftigen wirst: TypoScript.

TypoScript ist eine TYPO3 eigene Sprache zur Konfiguration von TYPO3 ohne dass man PHP Code schreiben muss. Diese Sprache wurde eigens für TYPO3 entwickelt. Das TypoScript wird in das "Website Template" angegeben. Damit sind keine HTML Dateien gemeint, sondern ein spezieller Bereich im TYPO3. 

Jede TYPO3 Seite braucht ein Website Template

Das Website Template wird einem Seiten - Root zugewiesen. Der Seiten - Root definiert den obersten Knoten einer TYPO3 Webseite. Hier ist es schon mal wichtig zu wissen, dass innerhalb einer TYPO3 Installation es mehrere Webseiten geben kann.

Multidomain Umgebungen sind mit TYPO3 einfach zu erstellen und zu pflegen.

Der Root sollte gleichzeitig auch die Startseite sein. So, jetzt aber ganz konkret.

In einer frischen TYPO3 Installation gibt es keine Seite, der Seitenbaum ist leer. Wir erstellen nun unsere erste Seite und geben ihm als Namen am besten den Titel den wir auf der Startseite sehen wollen.

Die erste TYPO3 Seite erstellen

Dann klicken wir auf speichern und sehen die neue Seite im Seitenbaum. Die Seite ist jetzt noch eine normale TYPO3 Seite und noch kein Root. Um aus einer normalen Seite einen Root zu machen, müssen wir in der Bearbeitungsmaske auf den Reiter: Verhalten gehen und dort die Checkbox: Als Anfang der Webseite benutzen bzw. in Englisch Use as Root Page aktivieren:

Eine TYPO3 Seite als Root definieren

Damit ist unsere Seite ein Root also der Anfang einer TYPO3 Webseite. Alle darunterliegenden Seiten gehören zu dieser Webseite. Alles was außerhalb liegt, ist nicht mehr Teil dieser Webseite. Die Seite bekommt nun im Seitenbaum ein neues Icon:

Icon einer TYPO3 Rootseite

Jetzt fehlen noch 2 wichtige Dinge die eine jede TYPO3 Webseite noch benötigt:

  1. Eintrag in der Seitenverwaltung / Site Management
  2. Website Template mit einem gültigen PAGE Objekt

Die Seitenverwaltung

Die Seitenverwaltung wurde mit TYPO3 V9 eingeführt und vereinfacht die Konfiguration der Domain, des Protokolles und das Sprachhandling enorm.

Endlose TypoScript Konfigurationen sind nun überflüssig.

Sobald du die Seitenverwaltung -> Seiten aufrufst, siehst du alle TYPO3 Rootseiten. Seiten ohne einen Eintrag in der Seitenverwaltung sehen so aus:

Ein leerer Eintrag in der Seitenverwaltung von TYPO3

Um eine neue für den Root anzulegen, drückt man einfach auf den blauen Button.

Im ersten Reiter muss man folgende 2 Felder ausfüllen:

  1. Einstiegspunkt
    1. Entspricht der gewünschten Domain im Format: Protokoll + Domain mit / am Ende. Bsp.: t3-campus.slavlee.de
  2. Seitenbezeichner
    1. Ein eindeutiger Name der genutzt wird um diesen Eintrag zu speichern.

Im zweiten Reiter konfiguriert man dann die Sprache. Es muss mindestens eine Defaultsprache geben. Da muss man sich entscheiden, welche das ist und alle angezeigten Felder ausfüllen. Man kann pro Sprache einen Einstiegspunkt angeben. Das kann entweder nur ein Sprachkey als Zusatz sein, aber auch eigene Domains.

Falls im TYPO3 System weitere Sprachen angelegt sind, dann kann man zu diesen Sprachen weitere Einträge erstellen, falls die aktuelle Webseite diese Sprache im Frontend nutzt.

Das reicht schon damit dein Rootknoten unter der angegeben Domain in den angegeben Sprachen im Frontend aufgerufen werden kann. Vorrausgesetzt die Domains hast du bereits bei einem Hoster registriert und eingerichtet. 

Man muss keine schöne/lesbare URL Konfigurationen vornehmen, die sind in TYPO3 inklusive.

Als letztes brauchen wir nun ein Website Template mit gültigen PAGE Objekt.

Website Template

Ein Website Template erstellt man mit dem TypoScript Modul:

Das TypoScript Modul im TYPO3 Backend

Das Template Modul ist einer der Hauptmodule eines TYPO3 Integrators.

Dieses Modul arbeitet ebenfalls mit dem Seitenbaum, denn auch ein Website Template ist immer an einer Seite gebunden. Wir wählen dann unseren Rootknoten aus, dann können wir dort eine neues Website Template erstellen:

Wir klicken auf den markierten Button und erstellen ein neues Template. Im Anschluss können wir unserem Template einen Titel, Beschreibung und auch bereits den Titel der Webseite definieren.

Die wichtigste Bereiche sind die 2 Bereiche:

  1. Konstanten
  2. Setup

In diesen 2 Bereiche schreibt man TypoScript. Bei der Erstellung eines neuen Website - Templates hat TYPO3 auch ein Beispielskript in Setup eingetragen:

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

Dieses Beispiel illustriert wie TypoScript aussieht und prinzipiell funktioniert.

Es wird hier in Zeile 2 ein neues PAGE Objekt erstellt und in die Variable: page gespeichert. Diesem PAGE - Objekt wird dann in Zeile 3 für die Eigenschaft: 10 ein weiteres TypoScript Objekt: TEXT erstellt. Das TEXT Objekt hat dann eine Eigenschaft: value die den Wert als String in Zeile 4 zugewiesen werden kann.

Die Eigenschaft: 10 ist eine besondere Eigenschaft. Diese Eigenschaft steht für Eigenschaften die TypoScript Objekte enthält die Ausgaben in das Frontend verursachen. Ich nenne diese Eigenschaften: Ausgabenummern.

Denn die Zahl 10 kann jede beliebige Zahl sein. TypoScript erkennt das autom. und versucht dann für jeder dieser Objekte im Frontend anzuzeigen. Dabei werden diese Ausgabenummern von der kleinsten bis zu höchsten sortiert und ausgegeben. Vorraussetzung ist, dass jeder dieser Objekte am Ende einen Stringwert zurückliefert.

Hierbei ist HTML Code auch als Stringwert zu verstehen.

Eine TYPO3 Seite besteht selbstverständlich aus mehr als nur Textausgaben und TEXT - Objekte. Am Ende des Tages möchte man ein komplettes Seitentemplate ausgeben und alle Inhaltselemente die man im Backend erstellt hat. Deshalb ändern wir die PAGE Konfiguration ab.

Das zentrale Objekt um ein komplettes Seitentemplate auszugeben ist FLUIDTEMPLATE.

Fluidtemplate

Es hat sich in TYPO3 eingebürgert, dass man das FLUIDTEMPLATE der Ausgabenummer 10 zuweist:

page = PAGE
page {
    10 = FLUIDTEMPLATE
}

Das FLUIDTEMPLATE Objekt ist sehr umfangreich. Was du in jedem Fall mindestens brauchst um zu starten sind folgende Eigenschaften:

  • templateName
  • templateRootPaths
  • partialRootPaths
  • layoutRootPaths

Diese kannst du wie folgt angeben:

page = PAGE
page {
    10 = FLUIDTEMPLATE
    10 {
        templateName =
 
        templateRootPaths {
            0 =
        }
        partialRootPaths {
            0 =
        }
        layoutRootPaths {
            0 =
        }
    }
}

Die Eigenschaften: template-/partial-/layoutRootPaths sind dahingegehend besonders, dass man dort mehrere Pfade angeben kann. TYPO3 geht dann alle Verzeichnisse von unten nach oben durch und sucht die angefragte Datei. TYPO3 nimmt dann den ersten Ordner die die gewünschte Datei enthält.

Mit dieser Mechanik lässt sich einzelne Templatedateien ändern. Das ist etwas was dich aber nicht direkt betrifft, da diese Information der TYPO3 Entwickler hat. Von diesem bekommst du auch die Pfade zu diesen Dateien und Ordner.

Als letztes wird noch ein TypoScript Objekt benötigt um Inhaltselemente auslesen zu können. Du erinnerst dich vielleicht aus dem Redakteur Lernpfad, dass Inhaltselemente immer einer Seite und einer Inhaltsspalte zugewiesen sind. Dies kann man sehr schnell über ein TypoScript Objekt dem TYPO3 Entwickler bereitstellen. 

Inhaltselemente nach Seite und Spalte auslesen

Im TypoScript kann man Objekte vorkonfigurieren und diese TYPO3 Entwickler bereitstellen oder für sich selbst als Integrator bei anderen TypoScript Abschnitten wiederverwenden. Ein guter Ort solche Objekte abzulegen ist unterhalb von lib. Durch die Trennung via Punkt, lassen sich Abschnitte den sogenannten TypoScript Pfad strukturieren und vertiefen.

Dort legen wir auch das TypoScript Objekt ab, um Inhaltselemente der aktuellen Seite für eine spezielle Spalte, die der TYPO3 Entwickler im Code angeben kann, aus. Es gibt im TypoScript leider nicht das Objekt, welches das kann. Wir können jedoch mehrere Objekte miteinander kombinieren um unser Ziel zu erreichen. Im Grunde müssen wir folgendes tun:

  1. Ermittlung der aktuellen Seite
  2. Ermittlung der Inhaltsspalte die der Entwickler angeben können soll
  3. Abfrage in die Datenbank um Inhaltselemente aus Basis der oberen 2 Variablen auszulesen

Um diese 3 Schritte zu realisieren eignet sich das TypoScript Objekt COA.

COA steht für Content Object Array

Im Prinzip ist das ein Array, also eine Liste, das andere TypoScript Objekte enthält. 

Damit hast du die wichtigsten Komponenten kennengelernt und die Basiskonfiguration komplettiert. Die Sammlung der Daten:

  • Seiten - ID
  • Inhaltsspalte

müssen wir irgendwie zwischenspeichern. Dafür kann man in TypoScript das REGISTER nehmen. Um dann letztenendes die Inhaltselemente zu ermitteln, gibt es das TypoScript Objekt: CONTENT.

Jetzt bringen wir alles zusammen.

Erstellung eines Content Object Arrays

lib.dynamicContent = COA
lib.dynamicContent {

}

In der ersten Zeile erstellen wir ein neues COA - Objekt im TypoScript - Pfad: lib.dynamicContent. Der Punkt ist hier wichtig, denn der bringt uns eine Etage tiefer im TypoScript Hochhaus. Das heisst, wir können dort beliebig weitere Etagen hinzufügen und auch noch beliebig tiefer gehen, indem wir mit dem Punk separieren.

Die nachfolgenden Zeilen dienen dazu, die Eigenschaften eines COA - Objektes einfaches anzugeben ohne das wir immer lib.dynamicContent davor schreiben müssen. Wichtig hier sind die geshweiften Klammern.

Ein COA - Objekt ist eine Liste in TypoScript. Wir erstellen Einträge in diese Liste, wie beim PAGE Objekt, über Ausgabenummern. Eine Ausgabenummer ist eine Ziffer von 1 bis unendlich. Jeder dieser Ziffer muss ein weiteres TypoScript Objekt zugewiesen sein. 

Wir brauchen wie oben erwähnt bzw. angedeutet die Objekte:

  • LOAD_REGISTER
  • CONTENT
  • RESTORE_REGISTER

Das REGISTER können wir in TypoScript nutzen mit den zwei Objekten: LOAD_REGISTER und RESTORE_REGISTER. Das dritte Objekt brauchen wir um Inhaltselemente aus der Datenbank zu lesen.

In unserer anfänglichen Überlegung haben wir festgestellt, dass wir zunächst Variablen sammeln und mit diesen Variablen eine Datenbankabfrage erzeugen und ausführen müssen. In PHP erzeugt man einfach Variablen für diese Speicherung, in TypoScript müssen wir Objekte erstellen. Das Arbeiten mit dem Zwischenspeicher geht wie folgt:

  1. Register laden
  2. Register benutzer
  3. Register wiederherstellen, d.h. unsere Daten dort entfernen

Register laden

lib.dynamicContent = COA
lib.dynamicContent {
    5 = LOAD_REGISTER
    5 {
        colPos = TEXT
        colPos {
            field = colPos
            ifEmpty = TEXT
            ifEmpty {
                value.current = 1
                ifEmpty = 0
            }
        }

        pageUid = TEXT
        pageUid {
            field = pageUid
            ifEmpty.data = TSFE:id
        }

        contentFromPid = TEXT
        contentFromPid {
            data = DB:pages:{register:pageUid}:content_from_pid
            data.insertData = 1
        }

        wrap = TEXT
        wrap {
             field = wrap
        }
    }
}

Das ist jetzt eine Menge TypoScript Code. Es kann einen etwas erschlagen.

Es ist nicht so schwer wie es aussieht.

Wir erstellen 4 TypoScript Objekte, wobei wir die letzten beiden erstmal ignorieren und so stehen lassen. Die ersten 2 Objekte wiederholen sich im Prinzip von der Syntax her. Was machen wir hier?

Wir erstellen jeweils ein TEXT Objekt. Wir machen das, weil wir am Ende des Tages einen Stringwert haben:

  • Seiten - ID
  • Inhaltsspalte

Das TEXT - Objekt ist das einfachste TypoScript Objekt, welches ein Stringwert halten kann. Das ist der Grund wieso wir hier das TEXT - Objekt nutzen.

Jedem Objekt geben wir einen Namen, der ist beliebig:

  • colPos
  • pageUid
  • contentFromPid
  • wrap

Es gibt nun verschiedene Arten Werte einem TEXT - Objekt zuzuweisen. Wir haben hier die Situation und Anforderung, dass dieses Objekt im Fluid Code von einem TYPO3 Entwickler nutzbar sein soll. Denn der muss es in das Template einbauen, damit die TYPO3 Inhalte an den richtigen Stellen ausgegeben werden. Deswegen können wir nicht diese Werte fest hier reinschreiben, sondern müssen sie dynamisch ermitteln bzw. über Argumente die der TYPO3 Entwickler ansprechen kann.

colPos

Die Inhaltsspalte muss der TYPO3 Entwickler angeben. Dafür müssen wir ihm einen Namen geben den er dann einen Wert übergeben muss. Diese Namen sind mit der Eigenschaft: field gesetzt.

In den Zeilen 8 - 12 sehen wir ein ifEmpty - Objekt. Das ist die IF - Bedingung in TypoScript. Sobald unsere Bedingung eintrifft, wird diese Bedinung ausgeführt. In unserem Fall geben wir einen Stringwert zurück, nämlich den Wert der übergebenen Wert unter den Namen: colPos. Lesen muss man die IF - Bedinung so:

Wenn im Feld: colPos der Wert nicht 0 ist oder fehlt/leer ist (ifEmpty = 0), dann weise dem TEXT - Objekt: colPos den aktuellen Wert zu. Der aktuelle Wert entspricht dann dem Wert unter den Namen: colPos.

pageUid

In TypoScript kann man direkt auf die ID der aktuellen Seite zugreifen. Das macht es uns und den TYPO3 Entwickler einfacher, weil er diese Information nicht mehr angeben muss. Wir wollen ihm aber dennoch die Möglichkeit dazu geben, falls es aus irgendeinem Grund doch Inhalte von anderen Seiten auslesen möchte.

Wir lesen die aktuelle Seiten - ID mit dem global erreichbaren Objekt: TSFE (TypoScript Frontend Enviroment) in der Zeile 18 aus. Dieses Objekt ist sehr umfangreich und hat unter anderem eine öffentliche Eigenschaft: id, die aktuelle Seiten - ID.

Um den TYPO3 Entwickler die Möglichkeit zu geben, auch diese Information zu übermitteln, binden wir die Zuweisung der Seiten - ID über das TSFE - Objekt an einer IF - Bedingung. Da es sich um ein dynamische Information handelt, müssen wir hier die Eigenschaft: data von dem TEXT - Objekt nutzen.

Das ist im Prinzip schon alles für den LOAD_REGISTER Teil. Die contentFromPid ist eine Ergänzung um die Funktionalität von TYPO3 Seiten zu untersützen, Inhalte von anderen Seiten anzuzueigen. Die Eigenschaft: wrap behalten wir uns die Möglichkeit vor die gesamten Inhalte die das kommende Objekt: CONTENT zurückliefert, mit HTML Code zu umrahmen. Bspw: können wir alle Inhaltselemente in ein DIV  - Element packen.

CONTENT

Nun haben wir alle Informationen gesammelt und wir können das CONTENT - Objekt erstellen, um Inhaltselemente auszulesen:

lib.dynamicContent = COA
lib.dynamicContent {
    5 = LOAD_REGISTER
    ...
    20 = CONTENT
    20 {
        table = tt_content
        select {
            includeRecordsWithoutDefaultTranslation = 1
            orderBy = sorting
            where = colPos={register:colPos}
            where.insertData = 1
            pidInList.data = register:pageUid
            pidInList.override.data = register:contentFromPid
         }
         stdWrap {
             dataWrap = {register:wrap}
             required = 1
         }
    }
}

Das CONTENT - Objekt teilen wir in Zeile 7 mit in welcher Datenbanktabelle unsere Inhaltselemente stehen. Danach folgt ein select - Block der die SQL: SELECT - Anweisung bestimmt. Wir definieren folgendes:

  • Inhaltselemente einschließen die es nur in übersetzter Sprache gibt
  • Sortieren nach dem sorting - Feld, d.h. das TYPO3 eigene Feld wo der Sortierwert gespeichert ist
  • die Inhaltsspalte ist die aus dem Register mit dem Namen: colPos
    • da es sich um ein dynamischen Wert handelt: insertData
  • die Inhaltselemente auslesen, die in der Inhaltsspalte stehen mit dem Wert aus dem Register imt dem Namen: pageUid.
    • Falls jedoch der Wert im Register mit dem Namen: contentFromPid einen Wert hat, dann nimm diesen Wert

Nach der select - Eigenschaft folgt die Eigenschaft: stdWrap, wo wir die Information aus dem Register nehmen mit dem Namen: wrap.

Das wars schon!

Zur guter letzt entfernen wir noch alle unseren erstellen Werte in dem Register:

lib.dynamicContent = COA
lib.dynamicContent {
    5 = LOAD_REGISTER
    ...
    20 = CONTENT
    ...
    90 = RESTORE_REGISTER
}

Ich weiss das war doch eine Menge TypoScript und auch viel mehr als ich gedacht habe. Aber ich denke es hat sich gelohnt.

Diesen Artikel als Video für Mitglieder

Lass mich dir persönlich das TYPO3 Backend in einem Video vorstellen. Logge dich dazu ein oder registriere dich kostenfrei für den Mitgliederbereich des T3 Campus und erhalte Zugriff zu diesem Video und noch weitere Inhalte exklusiv für die Mitglieder des T3 Campus.

Nachdem du dich eingeloggt hast, kannst du diese Seite neu laden.

Bis gleich.

Bereit mehr zu lernen?

Dann komme in meine TYPO3 Onlineschule

Als Mitglied des T3 Campus für TYPO3 Schulungen erhältst du eine einzigartige Lernplattform, um professionelle Webseiten mit TYPO3 zu erstellen. Egal, ob du ein Einsteiger, Umsteiger oder bereits erfahren bist – hier findest du die passenden Lernvideos für dich.

Kevin Chileong Lee

Gründer vom T3 Campus, TYPO3 Experte mit 10+ Jahren Erfahrung, TYPO3 Liebhaber.

Ich helfe dir dabei, deine Projekte in TYPO3 umzusetzen.

Insbesondere für TYPO3 Einsteiger biete ich zahlreiche kostenfreie Tutorials und kostenpflichtige Kurse rund um TYPO3 an.
Damit kannst du in wenigen Tagen auch ohne Vorkenntnisse deine erste TYPO3 Webseite erstellen und Erweiterungen programmieren.

Auf meinem YouTube-Kanal findest du viele praktische Beispiele und Videotutorials als auch allgemein Videos zu diversen TYPO3 Themen.

Neber den TYPO3 Tutorials und Kopiervorlagen, schreibe ich auch Artikel auf meinem Blog über diverse Themen und Fragen, die die meisten TYPO3 Einsteiger, haben.

Falls du ein TYPO3 Coaching suchst, dann stehe ich dir in einer 1:1 Trainingssession zur Verfügung.

Wenn du auf dem Laufenden sein möchtest über meine Projekte, dann abonniere den Newsletter.