TypoScript Grundlagen

    TypoScript (TS) ist ein Syntax zur Definition von Informationen in einer hierarchischen Struktur. Das CMS TYPO3 wird mit TypoScript konfiguriert. Da das Bakehouse auf TYPO3 basiert, ist es unerlässlich, als Integrator die Grundlagen von TypoScript zu verstehen.

    Anwendungsbeispiele von TypoScript sind etwa das Erstellen von Navigationen, HTML-Blöcken, Seitentiteln, Header-Tags und mehr. Im Bakehouse sind bereits viele TypoScript-Anweisungen vorbereitet. Diese können im TypoScript-Editor editiert, erweitert bzw. überschrieben werden.

    TypoScript kann im Bakehouse nur bearbeitet werden, wenn der Benutzer über Administratorenrechte verfügt.

    TypoScript im Bakehouse aufrufen

    Die TypoScript-Konfiguration einer page Seite wird über das docucontextmenu Kontextmenü in der navigation Seitenstruktur geöffnet. Der Menüpunkt typo3 „TypoScript“ öffnet die TypoScript-Konfigurationsdatei.

    Ist für eine Seite noch kein TypoScript angelegt, erfolgt dies über docupointer „Klicken Sie hier, um ein Erweiterungs-Template zu erstellen“.

    Verhalten von TypoScript

    Jede Unterseite in der navigation Seitenstruktur des Projekts kann über TypoScript verfügen. Dabei gilt: TypoScript vererbt sich auf untergeordnete Seiten weiter.

    Da für gewöhnlich große Teile der TypoScript-Konfiguration global für das gesamte Projekt gelten sollen, befindet sich ein Großteil des TypoScripts auf der page Root-Seite (zumeist „Home“). Ein gängiger Anwendungsfall wäre etwa die Einbindung eines Tracking-Code-Snippets. 

    Soll ein TypoScript-Anweisung nur für einen bestimmten Teil des Projekts gelten, wird diese direkt auf der betreffenden page Unterseite festgelegt. Auch hier gilt: Der Code vererbt sich auf etwaige untergeordnete Hierarchien weiter.

    Achtung

    TypoScript verstehen

    Untenstehend werden die wichtigsten Details erläutert, um den Aufbau und die Funktionsweise von TypoScript und die vorinstallierten TypoScript-Parameter in deinem Bakehouse-Projekt zu verstehen. Die in weiterer Folge erläuterten Beispiele ersetzen aber in keinem Fall die umfassende TypoScript-Dokumentation des TYPO3-Projects und wir empfehlen eine eingängige Auseinandersetzung mit ebendieser!

    Mehr über den TypoScript-Syntax auf docs.typo3.org

    Aufbau und Syntax von TypoScript

    TypoScript ist case-sensitive. Es muss also auf Groß- und Kleinschreibung geachtet werden. meinElement und meinelement werden vom System als unterschiedliche Strings interpretiert.

    Der Objektpfad

    Der Punkt (.) wird verwendet, um Objekte und Eigenschaften voneinander zu trennen, wodurch in weiterer Folge eine Hierarchie entsteht.

    Content-Object-Typen

    TypoScript unterscheidet eine Auswahl an vordefinierten Content-Object-Typen.
    In folgendem Beispiel wird eine Library erstellt, die HTML-Code enthält:

    Typoscript
    lib.meinText = TEXT

    Die Anweisung lib definiert eine Library. Der mit Punkt angehängte Text meinText legt den Namen der erstellten Library fest. Über diesen Namen wird der Code aufgerufen.

    Typoscript
    lib.meinText.value = <strong>Hello World!</strong>

    Wird nun in einer zweiten Zeile die Anweisung lib.meinText mit dem Attribut value erweitert, kann so der Inhalt der Library definiert werden.

    Tipp

    Autovervollständigung

    Die Autovervollständigung des TypoScript-Editors schlägt verfügbare und bereits definierte Attribute vor. Die Autovervollständigung wird durch den Shortcut Strg+Leertaste aktiviert.

    Auskommentieren

    TypoScript wird Zeile für Zeile abgearbeitet. Soll eine Zeile nicht interpretiert werden, ist es möglich, diese mit # auszukommentieren. Dies wird oft und gerne für Kommentare verwendet, um den Code lesbarer zu machen.

    Typoscript
    # *** HELLO WORLD! *** lib.meinText = TEXT lib.meinText.value = <strong>Hello World!</strong>

    Verschachtelung

    TypoScript lässt sich mit geschwungenen Klammern verschachteln, die folgenden Beispiele führen zum selben Ergebnis:

    Typoscript
    lib.meinText { wrap = <div class="helloworld">|</div> value = "Hello World!" } lib.meinText.wrap = <div class="helloworld">|</div> lib.meinText.value = "Hello World!"

    Konfiguration von Content-Elementen

    Sämtliche vorinstallierte Content-Elemente im Bakehouse sind mit TypoScript konfiguriert. Eigenschaften von Content-Elementen können projektspezifisch überschrieben werden und auf die Bedürfnisse einer einzelnen Bakehouse-Installation angepasst werden.

    Beispiel: Das Bakehouse Content-Element Trenner ist standardmäßig ausgeblendet. Folgender TypoScript-Code überschreibt die Standardkonfiguration und blendet das Content-Element in der Bakehouse-Werkzeugleiste ein:

    Typoscript
    plugin.tx_bh.settings.contentElements.bhTrenner.hidden = 0

    Erklärung: Beim Bakehouse handelt es sich um ein plugin mit dem Namen tx_bh. Mit settings werden die Einstellungen aufgerufen. Das Bakehouse verfügt über contentElements. Eines davon trägt den Namen bhTrenner. Das Attribut hidden bestimmt, ob ein Element in der Bakehouse-Werkzeugleiste dargestellt wird oder nicht.

    Löschoperator

    Mit dem Löschoperator > wird ein an einer vorhergehenden Stelle definiertes TypoScript-Objekt gelöscht:

    Typoscript
    lib.text > # null lib.text = # leer

    Objekte kopieren

    Das Zeichen < wird angewendet, um einen Objektpfad in einen anderen zu kopieren. Das gesamte Objekt wird kopiert – sowohl der Wert als auch die Eigenschaften. Alle alten Objekte und Werte werden an dieser Position überschrieben.

    Typoscript
    lib.meinNeuesObjekt < lib.meinText

    Bedingungen in TypoScript

    Neben dem Erstellen, Konfigurieren und Verwalten der Objekte können im TypoScript auch Bedingungen erstellt werden. Folgendes Beispiel zeigt den grundsätzlichen Aufbau einer Bedingung im TypoScript: 

    Typoscript
    [*Bedingung*] ... [global]

    Liste der wichtigsten Bedingungen:

    Typoscript
    [bh.isMobile] # Anweisungen für mobile Endgeräte [global] [backend.user.isLoggedIn] # Anweisungen, wenn der Benutzer im Back-End angemeldet ist [global] [!backend.user.isLoggedIn] # Anweisungen, wenn der Benutzer nicht im Back-End angemeldet ist [global] [page["layout"] == 4] # Anweisungen, wenn Seitenlayout 4 ausgewählt wurde [global] [page["uid"] == 23] # Anweisungen für die Seite mit der page-ID "23" # (könnte auch ohne Bedingung im Erweiterungs-Template der entsprechenden Unterseite eingefügt werden) [global] [siteLanguage("languageId") == 1] # Anweisungen für die Sprache mit der ID "1" [global]

    Die nächste Schritte

    Folgende nächste Schritte empfiehlt das Bakehouse-Team jedem neuen Bakehouse-Entwickler: