Typo3: Der schnelle Einstieg

von Jörg Drzycimski

Das Open Source CMS Typo3 ist eines der umfangreichsten und komplexesten Systeme am Markt, und so wird mancher Designer oder Webmaster schon verschreckt, bevor er Typo3 testet. Und obwohl Typo3 unzählige Funktionen bietet, ist eine Website schon innerhalb kürzester Zeit aufgebaut. Die Einsatzmöglichkeiten des CMS reichen dabei von der kleinen Vereins-Site bis zur großen Firmenpräsentation.

Die umfangreiche Dokumentation zu Typo3 lädt nicht gerade zum Lesen ein. Aber wie bei jeder Dokumentation ist auch bei Typo vieles erst dann interessant, wenn man komplexe Funktionen braucht. Die erste Website ist schnell aufgebaut, und kann später durch neue oder verfeinerte Elemente erweitert werden.

Das CMS arbeitet mit einem so genannten Sitetree, der der Ordneransicht des Windows Dateibrowsers ähnelt. Nachdem man die Installation abgeschlossen hat, ist erstmal nur die leere Top-Hierarchie vorhanden. Die Top-Hierarchie stellt allerdings nicht eine Website dar, sondern vielmehr den obersten Level des Trees, unter dem man mehrere Websites – auch mit völlig verschiedenen Domains und Designs – in einer Typo-Installation anlegen kann. Alle Seiten, die man anlegt, werden im Pagetree nach Hierarchie gespeichert. So behält man auch sehr verschachtelte Sitestrukturen und mehrere Websites im Überblick.

Zuerst muss eine Seite angelegt unterhalb des Toplevels angelegt werden, die dann im Prinzip die „Homepage“ der Website darstellt. Im Webmodul „Seite“ (linker Frame) bekommt man durch einen Klick auf das Symbol in der Treeansicht (mittlerer Frame) ein kontext-sensitives Menü, und über „Neu“ eine Auswahl an möglichen neuen Datensätzen. Ein Klick auf „Seite“ in der Datensatzauswahl (rechter Frame) ruft die Eingabemaske für den Pageheader der neuen Seite auf, in dem man die Seiteneigenschaften festlegt.

Screenshot
Sitetree rechts und Pageheader-Interface links

Die neue Seite wird im Frontend allerdings noch nicht funktionieren, da ein sogenanntes Template fehlt. Dieses kann man über das Webmodul „Template“ durch „Create template for a new site“ anlegen. Schaut man sich das Ergebnis im Frontend an (Kontextmenu->Ansehen), wird man mit dem weltberühmten „Hello World“ begrüßt: Template erfolgreich eingefügt.

Nun braucht die Website noch einige Seiten. Der einfachste Weg dorthin führt über das Webmodul „Funktionen“, mit dem man gleich mehrere Seiten anlegen kann. Diese Seiten werden unterhalb der „Dr. Web Plus“ Hierarchie erzeugt, die den Rootlevel der Website darstellt. Im Webmodul „Liste“ werden nun alle neuen Seiten inklusive Template dargestellt.

Screenshot
Sitetree in der Listenansicht

Über das Kontextmenü kann man jetzt sowohl neue (Unter-) Seiten, als auch Seiteninhalt anlegen. Für den Inhalt stehen 4 Blöcke zur Verfügung: Left, Content, Right und Border. Der Inhalt der einzelnen Blöcke ist unbegrenzt und in der Art variabel, es lassen sich also zum Beispiel Texte, Tabellen und Bilder in jedem Block einfügen. Jeder Block lässt sich durch einen Befehl im TypoScript ansprechen, und auf der Seite darstellen. Soll ein Teil des Inhalts in einem anderen Block erscheinen, kann man diesen zwischen den Blöcken verschieben. Der Inhalt eines Blocks wird sequentiell abgearbeitet, aber auch hier kann die Reihenfolge nachträglich geändert werden.

Der Seiteninhalt wird komfortabel über einen Rich Text Editor angelegt, in dem auch grundlegende Formatierungen wie Bold, Italic, Listen und Tabellen eingefügt werden können.

Screenshot
Rich Text Editor im WYSIWYG Modus

Nach dem Anlegen verschiedener Seiteninhalte wird man im Frontend leider immer noch mit „Hello World“ begrüsst. Nun beginnt die Arbeit am TypoScript im Setup des Templates. TypoScript ist keine echte Scriptsprache, sondern eine Ausgabeanweisung für den HTML-Parser von Typo3. Das Template sorgt dafür, dass der Inhalt der Seiten im Frontend ausgegeben wird, und zwar nach den Formatierungen und Anweisungen, die man im Template erstellt.

 # PAGE Objekt definieren
    page = PAGE
    page.typeNum = 0
    # Menü aus allen Seiten erzeugen
    temp.MENU = HMENU
    temp.MENU.1 = TMENU
    temp.MENU.1 {
    wrap = <p align="left" style="background-color: Yellow;">|</p>
    NO {
    ATagParams = style="font-family: Arial; font-weight: bold; text-decoration:
    none; color: Black;"
    allWrap = &nbsp;|&nbsp;
    }
    }
    # Erstes Objekt: Menü
    page.10 < temp.MENU
    # Zweites Objekt: alle Inhalte aus Block Content
    page.20 < styles.content.get

Oben: Code im Setup des Templates

Der PageType 0 bezieht sich auf die Version, die im Frontend angezeigt wird, in diesem Fall normales HTML. Dieses kann zum Beispiel durch die PageTypes für Druckversion oder PDF erweitert werden.

Dann wird das Menü definiert. Die TypoScript-Anweisung wrap umschliesst das gesamte Menü mit dem P-Tag, das auch Styles oder andere HTML-Attribute enthalten darf. Das Pipe-Symbol (|) stellt dabei den Link dar. NO ist der Normalzustand des Links, es gibt auch ACT für den aktiven Link oder IFSUB, falls der Link Unterpunkte enthält.

Am Ende werden die Objekte in die Seite eingefügt. Die Zahlen 10 und 20 beziehen sich dabei auf die Reihenfolge der Darstellung auf der Seite, die Spitzklammer fügt den Inhalt in das Seitenobjekt ein. Damit wird also erst das Menü dargestellt, und dann der Inhalt der Seite aus dem Block Content eingesetzt (Block „Left“ wäre styles.content.getLeft, alle anderen analog).

Screenshot
Website im Frontend

Mit den Anweisungen wrap und params lässt sich die Website wie eine HTML-Seite designen, es gibt im TypoScript auch Anweisungen zu Grafiken, Tabellen, direktes HTML et cetera, so dass dem Design für das Frontend keine Grenzen gesetzt sind. Für aufwendigere Layouts empfiehlt sich allerdings der Einsatz von externen Designvorlagen und Cascading Stylesheets. Auch diese kann Typo3 verarbeiten.

Fazit
Es lohnt sich auch schon bei kleineren Sites, Typo3 einzusetzen, und bei geringen Anforderungen an Design und Layout ist eine neue Website innerhalb kürzester Zeit aufgebaut.
Die Möglichkeiten, die man sich damit eröffnet, sind allerdings unbegrenzt. Längerfristig wird man das ein oder andere Tutorial nicht vermeiden können, aber dieser Ansatz und etwas Talent in HTML und strukturierter „Programmierung“ geben den richtigen Impuls. Die Typo3-Website hält viele Tutorials, Dokumentationen und sogar Video-Lehrgänge für alle, die tiefer in das CMS eindringen wollen, kostenlos parat.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.