Notizen zu TYPO3 9.5

TYPO3 gehört vermutlich nicht zu den intuitivsten Content Management Systemen der Welt. Der Umfang dieses Werkzeugs erfordert eine gehörige Einarbeitungszeit, das Zusammenspiel aus TypoScript und Fluid-Templates muss verstanden werden und ein zwischenzeitlich stattgefunder grundsätzlicher Technikwechsel macht die Sache auch nicht leichter.

Dennoch: Performance und die herausragende Verarbeitung der möglichen Datenmengen sind enorm und bei großen Projekten ist genau aus diesem Grund dieses System einen Blick wert. Vieles findet sich dokumentiert im Netz und dies soll an dieser Stelle nicht wiederholt werden. Ein paar eigene Stolpersteine und Notizen dazu könnten aber vielleicht dem ein oder anderen weiterhelfen.

1. Die Installation

Apache, PHP und mySQL sollten an Bord sein, damit es losgehen kann. Bevor die Installation erfolgen kann, prüft TYPO3 selbst, ob Einstellungen überprüft werden müssen. Eventuell notwendige Wertänderungen oder die Zuschaltung von Extensions in der php.ini erklärt der „System Environment Check“ recht deutlich (wenn doch alle Probleme so eindeutig dargestellt werden würden!). Sinnvollerweise startet man zum Abschluss der Installation ohne Demoseiten und richtet sich seine Umgebung selbst ein. So wird Datenmüll vermieden und man erhält ein sauberes System.

Nun, „zum Abschluss“ war etwas voreilig, denn jetzt folgen weitere Einstellungen über das „Install Tool“. Etwa die Prüfung, ob Ghostscript und GraphicsMagick installiert wurden (falls nicht, beides findet sich kostenlos im Netz). Hierzu finden sich zahlreiche Dokumentationen und gute Bücher. Dennoch traten bei meiner Installationen einige Probleme auf (insbesondere bei der – nicht möglichen – Installation von Extensions), die allerdings nach reichlich Recherche und ausprobieren gelöst werden konnten. Drei Stellen im Setup seien somit wärmstens zur weiteren Überprüfung empfohlen:

  • [HTTP][proxy] – Wenn vorhanden, hier den zwischengeschalteten Proxy-Server eintragen.
  • [HTTP][verify] auf 0 setzen. Das bewirkt Wunder!
  • [lockIP] von 4 auf 0 umsetzen. Damit entstehen Wunder im Doppelpack (Stichwort: unregelmäßiger automatischer Logout des Benutzers. Sehr nervig.).

2. Die Ersteinrichtung

Benutzer einrichten, Sprache einstellen, Browser aktualisieren und Cache leeren: Jetzt steht endlich das System bereit. Eine erste Dateistruktur zu überlegen könnte bereits zu diesem Zeitpunkt eine gute Idee sein, um späterem Wildwuchs und unübersichtlichem Durcheinander vorzubeugen. Insbesondere das Anlegen eines system-Ordners mit einer Unterstruktur für Templates, CSS-, JS- und Bilddateien halte ich für sinnvoll. Und dann geht es zum Herz der künftigen Internetseite: der Wurzelseite.

Die häufig (und sinnvoll) als „root“ benannte Seite wird über das Register „Zugriff“ sichtbar gemacht und im Register „Verhalten“ als Anfang der Website definiert. Hier sollte auch das zentrale Template hinterlegt werden. Metadaten und die Dateiorte für CSS- sowie JS-Dateien werden bekannt gemacht. Auch können die zu benutzenden Templatetypen defniert und Variablen der FLUID-Templates mit Leben befüllt werden. Zum Beispiel so:

config.contentObjectExceptionHandler = 0
config {
 language = de
 locale_all = de_DE
}
# Default PAGE object:
page = PAGE
page {
 page.config.doctype = html5
 shortcutIcon = fileadmin/[...]/pic/favicon.ico
 meta.author = stefan-meissner.com
 # CSS-Dateien
 includeCSS {
  10 = fileadmin/system/[...]/css/bootstrap.min.css
  10.media = all
  20 = fileadmin/system/[...]/css/global.css
  20.media = all
 }
 # JS-Dateien
 includeJSFooter {
  11 = fileadmin/system/[...]/js/jquery-3.4.1.min.js
  22 = fileadmin/system/[...]/js/bootstrap.min.js
 }
 # Templates
 10 = FLUIDTEMPLATE
 10 {
  file.cObject = CASE
  file.cObject {
   key {
    data = levelfield: -1, backend_layout_next_level, slide
    override.data = TSFE:page|backend_layout
   }
   1 = TEXT
   1.value = fileadmin/[...]/templ/Startseite.html
   2 = TEXT
   2.value = fileadmin/[...]/templ/Standardseite.html
  }
  variables {
   linkStartseite = TEXT
   linkStartseite.value = Startseite
   linkStartseite.typolink {
    parameter = [Seiten-ID]
    ATagParams = class="link_startseite"
   }
   [...]
 }
}

3. Templates

Der empfohlene und, wie ich finde, sinnvolle Weg ist, mit FLUID-Templates zu arbeiten. Alle redkationell pflegbaren Inhalte werden in den als *.html-Dateien über Variablen angesprochen. Tipp: Die Angabe {linkStartseite} liefert bei weitem kein so schönes Ergebnis als {linkStartseite -> f:format.raw()}. Wichtig ist, im root-Template die Objekte „Fluid Content Elements“ und „Fluid Contents Elements CSS“ über das Register „Enthält“ einzuschließen.

Und, ach ja, im beispielhaften TypoScript oben hat schon eine Templatezuweisung stattgefunden. Jetzt stellt sich noch die Frage, wie diese dem Redakteur zur Verfügung gestellt werden können. An der Wurzelseite wechselt man dafür in die Ansicht „Liste“ und erstellt einen neuen Datensatz vom Typ „Backend-Layout“. Dieses kann nun konfiguriert werden (Spaltennamen, Spaltennummern). Jedes Backend-Layout erhält eine ID, die im TypoScript angesprochen werden kann und der nun ein FLUID-Template zugeordnet wird. Dies geschieht im oben gezeigten Beispiel in diesem Block:

10 {
 file.cObject = CASE
 file.cObject {
 key {
 data = levelfield: -1, backend_layout_next_level, slide
 override.data = TSFE:page|backend_layout
 }
 1 = TEXT
 1.value = fileadmin/[...]/templ/Startseite.html
 2 = TEXT
 2.value = fileadmin/[...]/templ/Standardseite.html
 }

Die Spaltennamen sieht der Redakteur bei der Seitengestaltung. Spaltennummern braucht man wieder auf Programmierebene:

  • Im FLUID-Template werden die Variablen definiert.
  • Diese können mit TypoScript befüllt werden (im Beispiel oben war das etwa der Link auf die Startseite).
  • Über die Spaltennummer können aber auch redaktionell pflegbare Inhalte zugeordnet werden.

Ergänzend zum Beispiel könnte man die folgenden Skriptblöcke verwenden, um  Überschrift, Teaser und Hauptinhalt dynamisch einzubinden:

FLUID-Template:

<div class="mainside col-lg-10 col-md-9 col-sm-9">
 <h1>{ueberschrift}</h1>
 <div class="shorttext_full">
  {teaser -> f:format.raw()}
 </div>
 {contentMain -> f:format.raw()}
</div>

TypoScript:

ueberschrift = TEXT
ueberschrift.field = title
teaser = COA
teaser {
 10 < styles.content.get
 10.select.where = colPos=1
}
contentMain < styles.content.get

Im TypoScript-Beispiel sind alle Varianten zu sehen: Für die Variable contentMain genügt die Style-Zuordnung, da deren Spaltennumer die 0 ist – der Default-Wert. Dem Element mit Spaltennamen „teaser“ und Spaltennummer 1 muss genau diese „colPos“ mitgeteilt werden. Die Überschrift selbst ist ein Wert aus den Eigenschaften der Seite.

Schwerpunkt: , ,