TYPO3 Code: TypoScript, Fluid Templates, CSS und JavaScript

Die Konfiguration einer Webseite mit TYPO3 erstellt man mit TypoScript. Hinzu kommt Fluid als Templating Sprache, um die Inhalte in HTML zu erzeugen. Erfahren Sie in diesem Kapitel mehr über die grundlegende Konfiguration einer TYPO3 Webseite!

TYPO3 Konfiguration

Erfahren Sie in den hier aufgelisteten Kapiteln unseres Wiki mehr über die Konfiguation und den Aufbau einer Webseite mit TYPO3. Der Klick auf einen Button in der Übersicht unten wird Sie auf die jeweilige Seite unseres Wiki bringen.

TypoScript Konfiguration

Die Konfiguration von TYPO3 kann man direkt in der Datenbank seiner Installation abspeichern. Dieses klassische Vorgehen ist allerdings aus der Mode gekommen, denn es hat sich als besser erwiesen, die Konfiguration in einer Datei abzuspeichern und diese Datei über ein INCLUDE_TYPOSCRIPT bzw @import in die Webseite einzubinden. Der Königsweg ist dabei heute die Erstellung einer Provider Extension. Erfahren Sie in diesem Kapitel unseres Wiki mehr über Grundzüge der Einbindung von TypoScript.

TypoScript HEAD Setup

Erfahren Sie in dieser Seite mehr über TypoScript Code zur Konfiguration einer Webseite. Lesen Sie, wie Sie die Einbindung von CSS und JavaScript konfigurieren. Und erfahren Sie mehr über die Steuerung der META-Tags einer Webseite.

TypoScript PAGE Setup

Damit TYPO3 Inhalte aus der Tabelle tt_content rendern kann, müssen die Inhalte der Tabelle aus dem Backend Layout ans Frontend angebunden werden. Dies ist mit der hier beschriebenen Konfiguration zu bewerkstelligen.

TypoScript CONSTANTS

In diesem Teil des TypoScript Setup werden Konstanten für die Webseite definiert. Dies sind z. B. Suchpfade für Templates, mit denen die Layouts von Extensions überschrieben werden. Hier können auch Angaben zu bestimmten PageUIDs gemacht werden, also die IDs von Seiten wie z. B. dem Ziel der Suchfunktion. Da sich diese Seiten in verschiedenen Installationen wie z. B. der DEV und der PROD Version einer Webseite unterscheiden können, muss von Fall zu Fall unterschieden werden, ob es sinnvoll ist, diese Information in diese Datei oder das Page Template zu legen.

Globale Variablen

Mit globalen Variablen lassen sich in TypoScript bestimmten Seiten oder Bereichen eigene Konfigurationen zuordnen. Diese ist z. B. sinnvoll, wenn der Suchbutton einer Webseite, der überall eingebunden ist, in der Suchseite nicht eingebunden werden soll. Ähnliches gilt für die Übersicht der Nachrichten, die in der Detailseite der Artikel nicht dargestellt werden soll.

Page Template

Angaben zur Steuerung und Konfiguration einer TYPO3 Webseite. Diese sind spezifisch für die Umgebung einer Webseite (Development oder Produktion) und können daher voneinander abweichen.

TypoScript Navigation

Wir zeigen Ihnen hier den Aufbau einer Navigation mit TYPO3. Mit TypoScript können Sie nicht nur eine hierarchische Navigation der gesamten Webseite erzeugen. Es gibt auch Sonderfälle von Menus, die sich mit TypoScript hervorragend generieren lassen.

TypoScript Navigation mit Bootstrap 3

Twitter Bootstrap hat sich als Quasi-Standard bei der Generierung responsiver Webseite durchgesetzt. Das Framework erlaubt es mit seinem Modell von row und col nicht nur, Inhalte einer Webseite so zu verschachteln, dass sie auf einem Desktop Rechner und einem Smartphone sichtbar angezeigt werden können.

Eine weitere Stärke von Bootstrap ist es auch, eine Navigation so aufzubauen, dass sie bei einer bestimmten Breite eines Browserfensters umgeschaltet wird.

TypoScript Navigation mit Bootstrap 4

Mit der Version Bootstrap 4 bieten sich dem geneigten Entwickler neue Möglichkeiten, Elemente seiner Webseite zu gestalten. Die neue Version bringt u. a. einen eigenen Slider, mehr Farbmenus und viele kleine Elemente mit sich, die das Leben einfacher gestalten.

Typoscript Libraries

Über eigene kleine Programme lassen sich in TYPO3 Bestandteile wie eine Navigation oder eine Sitemap verwirklichen. Sie können aber auch eine Nachsichtenübersicht für jede Seite Ihrer Webseite generieren. Wir zeigen Ihnen Quellcode für eine Reihe von Libs, die wir in unsere Webseite eingebunden haben.

TYPO3 9.5: SEO und Site Routing

Mit der Einführung der Version 9.5 LTS von TYPO3 ist der Traum so manches TYPO3-Entwicklers Wirklichkeit geworden: die Extension realURL ist weggefallen! Stattdessen gibt es nun die Systemextension SEO, mit deren Hilfe man lesbare Links zum Zwecke der Suchmaschinenoptimierung erzeugen kann. Die Konfiguration einer Webseite umfasst nun mehrere Schritte, um die Grundlagen für eine erfolgreiche Arbeit zu legen.

Thomas Berscheid ⧉ 07.08.2020