Setup einer TYPO3 Webseite mit TypoScript

In dieser Seite

TypoScript Setup

Einbindung einer TypoScript Datei

Sobald man das Root (Basis) Template der Webseite angelegt hat, kann man mit der Einbindung des Setup der Webseite in TypoScript beginnen. In diesem Setup der Seite wird das PAGE Objekt erzeugt, das für den Aufbau des Quelltextes der Seite sorgt. Dabei ist es notwendig, ein HTML-Template für die Seite einzubinden. Zudem werden Suchpfade für das Layout und Partials vorgegeben. Schließlich werden die Inhalte des Backend Layouts mit Objekten in den HTML-Templates verknüpft.

Page Objekt initialisieren

Hier sehen Sie ein Beispiel für den Aufbau eines Setup in TypoScript:

## Initialisierung eines PAGE Objektes page = PAGE page.10 = FLUIDTEMPLATE page.10 { format = html # Pfad zu der HTML Vorlage der Webseite file = fileadmin/templates/Page.html # Pfad zu eingebundenen Partials partialRootPath = fileadmin/templates/Partials/ # Pfad zur Layout Datei layoutRootPath = fileadmin/templates/Layouts/ variables { # Verknüpfung der Inhalte mit dem Backend Layout content_1 < styles.content.get content_1.select.where = colPos = 1 content_2 < styles.content.get content_2.select.where = colPos = 2 } }

Zur Verknüpfung der Inhalte des Backend Layout mit dem Fluid Template nutzt man die Spaltennummern, die man dort vergeben hat. Diese finden sich in der Tabelle tt_content der TYPO3 Datenbank im Feld ColPos wieder. Über das oben geschilderte TypoScript bindet man diese Inhalte nun an Objekte, deren Namen man fast frei wählen kann, wie hier die Bezeichnung content. Man muss bei der Benennung der Variablen auf diese Konventionen achten:

Die Bezeichnung der Variablen darf nur aus Kleinbuchstaben bestehen
Es dürfen keine Umlaute und Sonderzeichen verwendet werden
Zum Trennen einzelner Worte sind Unterstriche sind zulässig, aber keine Leerzeichen

Ein Name wie inhalt_ganze_seite ist ein zulässiger Titel für eine Variable.

Variablen per TypoScript auslesen

Wenn man einzelne Datensätze in einem Fluid Template darstellen möchte, ist es notwendig, diese als Variablen im TypoScript Setup auszulesen und ihnen einen Namen zu geben. Dazu nutzt man das Objekt RECORDS, mit dem man gezielt einen Datensatz in einer bestimmten Tabelle der Datenbank auslesen kann:

page.10 = FLUIDTEMPLATE page.10 { variables { inhalt_box = RECORDS inhalt_box { tables = tt_content source = 42 ## ID des Inhaltselements dontCheckPid = 1 } } }

Einzelne Datenfelder als Variablen auslesen

Mit TypoScript kann man nicht nur alle Inhaltselemente zu einer bestimmten Seite darstellen. Man kann auch einzelne Feldere aus der Tabelle tt_content auslesen, um sie im Fluid Template darzustellen. Hier ein Beispiel für den Seitentitel:

page.10 = FLUIDTEMPLATE page.10 { variables { page_title = TEXT page_title.field = nav_title //subtitle // title } }

Dabei erfolgt eine alternierende Abfrage der Datenfelder aus der Tabelle tt_content: Das wichtigste Feld in der alternative Navigationstitel. Wenn dieser nicht gefüllt ist, wird der Untertitel abgefragt. Ist auch dieser leer, wird der Seitentitel ausgelesen.

Vererbung des Fluid Templates

In einem weiteren Schritt wird das HTML-Template so eingebunden, dass es über beliebig viele Ebenen vererbt werden kann, wie oben bei der Einbindung in der Startseite geschildert. Auch wenn eine TYPO3-Webseite mehrere Tausend einzelne Seiten in mehreren Ebenen hat, reicht es dadurch, ein einzelnes HTML-Template anzugeben.

page.10.file.stdWrap.cObject = CASE page.10.file.stdWrap.cObject { key.data = levelfield:-1, backend_layout_next_level, slide key.override.field = backend_layout default = TEXT # Einbindung der HTML Vorlage default.value = fileadmin/templates/Page.html }

Mehrere Backend Layouts einbinden

Es besteht nun auch die Möglichkeit, mehrere Backend Layouts in eine Webseite einzubinden. Die Objekte für die Inhalte müssen an die entsprechende Spaltennummer (ColPos) gekoppelt werden. Um das Layout bereitzustellen, muss die obige Einbindung erweitert werden:

page.10.file.stdWrap.cObject = CASE page.10.file.stdWrap.cObject { key.data = levelfield:-1, backend_layout_next_level, slide key.override.field = backend_layout # Einbindung des ersten HTML Templates 1 = TEXT 1.value = fileadmin/templates/Page.html # Einbindung des zweiten HTML Templates 2 = TEXT 2.value = fileadmin/templates/Zweipalten.html # Einbindung des Standard HTML Templates default = TEXT default.value = fileadmin/templates/Page.html }

Hierbei ist darauf zu achten, dass die zusätzlichen HTML Templates entsprechend ihrer UID in der Tabelle backend_layout der TYPO3 Datenbank benannt werden. Das hier verwendete zweite Backend Layout hat also die Uid „2“ in der Tabelle.

HEAD Angaben einbinden

CSS einbinden

page {
  includeCSS {
  css1 = fileadmin/scripts/css/formate.css css1.media = all
  }
}

JavaScript einbinden

page {
   includeJSFooterlibs {
     file = fileadmin/scripts/js/jquery-3.7.1.min.js
   }
}

Mehrere CSS / JavaScript Dateien einbinden

Sie können mehrere Style Sheets oder JavaScript Dateien in den Head Bereich einbinden. Achten Sie hier aber auf die Reihenfolge der Einbindung:

page {
  includeCSS {
   css1 = fileadmin/scripts/css/styles.css
   css1.media = all
   css999 = fileadmin/scripts/css/formate.css
   css999.media = all
  }
}

Erzeugung eines TITLE Tag:

page {
   headerData {
    10 = TEXT
    10.field = subtitle // title // description
    10.wrap = <title>|</title>
  }
}

Hinweis: Seit der Version v9.5 von TYPO3 ist diese Art der Einbindung nicht mehr notwendig. In den Seiteneigenschaften gibt es das neue Feld seo_title (Titel für Suchmaschinen). Wenn dieses Feld ausgefüllt ist, wird der bei der Erstellung der Seite vergebene Text überschrieben. Auch die Abschaltung des Stand Titels ist nun nicht mehr notwendig.

Die Einbindung von CSS und JavaScript Dateien ist in den letzten Versionen von TYPO3 auch in Fluid Templates und Partials über Assets möglich.

Social Media Einbindung in TypoScript

Für die Einbindung von Dateien in Facebook (Open Graph) und Twitter war es bis zur v8.7 von TYPO3 die Regel, dass man die HEADER-Angaben der Webseite um entsprechende Tags ergänzt hat. Hier ein Beispiel für die Einbindung einer Beschreibung für Facebook:

Tag für Open Graph (Facebook):

page { headerData { 20 = TEXT 20 { field = description // subtitle // title wrap = <meta property="og:description" content="|"> } } }

Beachten Sie: Ab der Version v9.5 von TYPO3 ist diese Angabe nicht mehr explizit notwendig. Für diese Daten gibt es nun eine eigene Eingabemaske in den Seiteneigenschaften.

Cookies Agentur IBK