Tag: setup

Einrichten einer Printversion

Das Bereitstellen einer Printversion der jeweiligen Seite kann von TYPO3 durch ein richtig konfiguriertes Plug-In standardmäßig übernommen werden. Dieses Plug-In muss dem Template als statische Template bekannt gemacht werden. Erstmalig ist der Gebrauch von Konstanten von Nöten. Neben der Printversion soll ein Hyperlink, der zum Seitenbeginn führt, eingefügt werden.

Constants:

plugin.alt.print.file.template = fileadmin/template/print_template.html
plugin.alt.print.file.stylesheet = fileadmin/template/css/ne_print.css

Per Konstantendeklaration werden die spezielle Printvorlage in XHTML mit dazugehörigem Style Sheet für die Printversion festgelegt. Es handelt sich hierbei um eine für das Ausdrucken optimierte Darstellungsweise. Die Dateien sind im Dateimanager hinterlegt.

Setup:

# Druckversion und "Nach Oben" â Link SETUP
temp.printversion = TEXT
temp.printversion.data = TSFE : id
temp.printversion.wrap = <a href="#nach_oben"><img src="fileadmin/template/img/
icon_top.gif" width="11" height="11"> nach oben</a>&nbsp;&nbsp;&nbsp;<a href="index.php?id=|&type=98"><img src="fileadmin/template/img/ icon_druckversion.gif" width="12" height="11"> Druckversion</a>

# Konfiguration der Print-Version
alt_print >
alt_print = PAGE
alt_print.typeNum=98
alt_print.stylesheet = {$plugin.alt.print.file.stylesheet}

alt_print.10 = TEMPLATE
alt_print.10 {
template = FILE
template.file = {$plugin.alt.print.file.template}

subparts {
content < styles.content.get
}
workOnSubpart = DOCUMENT_BODY
}

Die Erstellung des Hyperlinks für die Druckversion gestaltet sich einfach. Das Standard-TYPO3-Plug-In „plugin.alt.print (98)“ wird dem Main Template als statisches Template be-kannt gemacht. Die Variable „temp.printversion“ wird von Typ „TEXT“ deklariert und mit der Anweisung der nächsten Zeile die aktuelle Page-ID ermittelt. Der Verweis an den Anfang der Seite (ein simpler Link auf einen statischen Anchor-Tag in der Designvorlage) und der eigentliche Link zur Druckversion samt Icon werden formuliert und die Page-ID übergeben. Um nun die Ausgabe des Inhalts in das vorbereitete Print-Template zu übergeben, muss als Seitentyp „98“ für die Printversion angegeben werden. Den Rest erle-digt TYPO3 dann von selbst.

Die nachfolgende Konfiguration der Print-Version ist eine angepasste Version aus der TYPO3-Dokumentation für den Standardeinsatz des Print-Plug-Ins. Ein neues PAGE-Objekt wird erzeugt, dass die Darstellung der Druckversion übernehmen wird. Die Eigenschaft wird aus Übersichtlichkeitsgründen passend zum Seitentyp auf 98 gesetzt. Das Style Sheet aus der Konstantendeklaration wird wie die eigentliche Vorlage dem PAGE-Objekt zugewiesen. In den Subpart „content“, welcher in der Print-Vorlage klassisch definiert wurde, wird der Inhalt aus der Seite kopiert (content < styles.content.get). Außerdem wird durch die abschließende Zeile erreicht, dass nur der Teil innerhalb des Subparts „DOCUMENT_BODY“ in der Printvorlage für den Seitenaufbau benutzt wird. Jeder Seite der nordEnergie-Präsenz wird nun ein Link, der zum Seitenanfang zurückführt und ein Verweis zur Druckversion hinzugefügt.

Pfadanzeige als Menü realisiert

Die Pfadanzeige (Breadcrumb) zur leichten Orientierung in der Seitenhierarchie ist vom Prinzip her nichts anderes als ein Menü mit speziellen Eigenschaften.

# Locator-Funktion (Pfadanzeige, rootline)
temp.locator = HMENU
temp.locator {
special = rootline
special.range = 0 | -1
wrap = Sie befinden sich hier:&nbsp;|
1 = TMENU
1 {
NO {
allWrap = | &nbsp;-&nbsp; |*| | &nbsp;-&nbsp; |*| |
stdWrap.htmlSpecialChars = 1
}
}
}

Ein neues mit „temp.locater“ bezeichnetes HMENU-Objekt vom Spezialtyp „rootline“ bietet die Funktionalität einer anklickbaren Pfadanzeige. Die „range“-Eigenschaft des HMENU-Objekts legt fest, bei welcher Ebene der Pfad beginnen soll.
In diesem Anwendungsfall wird auf obersten Ebene bei Level 0 (Startseite) begonnen und bis zur aktuellen Seite fortgesetzt (-1). Zur besseren Verständlichkeit der Funktion dient der vorangestellte, kurze Erklärungstext (Sie befinden…). Der Pfad selbst ist wiederum ein Text-menü, welches per „allWrap“ und „Optionsplit“ die einzelnen Seitentitel durch ein Minus-zeichen und Leerzeichen optisch voneinander abtrennt.

Aufbau der Hauptnavigation

Der Aufbau der Navigation in TYPO3 ist simpel und schnell realisiert. Für das Erstellen der Hauptnavigation werden spezielle TypoScript-Objekte vom Typ HMENU und TMENU benö-tigt, die in TYPO3 für hierarchische, textbasierte Menüs verwendet werden. Grafische Navigationen oder Layermenüs wären ebenfalls durch das CMS nutzbar gewesen, sind für diese Art der Navigation jedoch überflüssig.

# Hauptnavigations-Menu 1 cObject - vom Typ HMENU
temp.menu_main = HMENU

# Erste Ebene Menu-Object, textuell
temp.menu_main.1 = TMENU
temp.menu_main.1 {

# Normal-Zustand Eigenschaften
NO.allWrap = <div class="mainnavi-level1-no"> | </div>
NO.stdWrap.htmlSpecialChars = 1
}

# Zweite Ebene Menu-Object, textuell
temp.menu_main.2 = TMENU
temp.menu_main.2 {

# Normal-Zustand Eigenschaften
NO.allWrap = <div class="mainnavi-level2-no"> | </div>
NO.stdWrap.htmlSpecialChars = 1

# Aktiven Zustand aktivieren und Eigenschaften setzen
ACT = 1
ACT.allWrap = <div class="mainnavi-level2-act"> | </div>
ACT.stdWrap.htmlSpecialChars = 1
}

temp.menu_main.3 = TMENU
temp.menu_main.3 {

# Normal-Zustand Eigenschaften
NO.allWrap = <div class="mainnavi-level3-no"> | </div>
NO.stdWrap.htmlSpecialChars = 1

# Aktiven Zustand aktivieren und Eigenschaften setzen
ACT = 1
ACT.allWrap = <div class="mainnavi-level3-act"> | </div>
ACT.stdWrap.htmlSpecialChars = 1
}

Erzeugt wird ein mit dem Titel „temp.menu_main“ (frei wählbar) versehenes HMENU-Objekt, welches für „Hierarchisches Menü“ steht und das grundlegende Basisobjekt aller TYPO3-Menüs ist. Für das neue Menüobjekt müssen nun seine Zustände und Ebenen definiert werden. Dafür werden den drei Ebenen drei neue Menü-Objekte von Typ TMENU zugewiesen (Textmenüs) und der jeweilige Normal-Zustand angegeben (abgekürzt mit NO). Zusätzlich kann ein aktives Aussehen, wenn der Menüpunkt aktuell ausgewählt ist, zur erhöhten Orientierung des Besuchers definiert werden (ACT), was für die zweite und dritte Ebene realisiert wurde.

Von dem generellen Prinzip her wird den verschiedenen Zuständen lediglich ein umschlie-ßender Div-Tag zugewiesen. So erhält bspw. der Normalzustand der ersten Ebene durch „allWrap“ die Div-Klasse „mainnavi-level1-no“. Für das Pipesymbol („|“) wird also der Menücode aus dem CMS eingefügt und von den in „allWrap“ stehenden Zeichen umgeben. Das genaue Aussehen dieses Eintrages ist im Style Sheet definiert. So funktioniert die Menüerstellung in allen Fällen. Die „htmlSpecialChars”-Funktion ist für die XHTML-Kompatibilität notwendig, falls Sonderzeichen im Textmenü verwendet werden.

Mit wenigen Zeilen TypoScript ist die gesamte, problemlos erweiterbare Hauptnavigation umgesetzt worden. Das Menü ist komplett dynamisch und bildet die Baumstruktur aus TY-PO3 ab. Wird eine neue Seite hinzugefügt, wird diese Veränderung automatisch in der Frontend-Darstellung eingepflegt. Das gesamte Menü ist in dem Eintrag temp.menu_main bereits angelegt und wird an späterer Stelle der Seite hinzugefügt.

Konfiguration des Template Auto-Parsers

Der Auto-Parser ist eine Extension, welche die XHTML-Designvorlage nach korrekter Konfiguration automatisch mit TYPO3-Markierungen zur Laufzeit versieht. So können vom Content Management System in die vorgesehenen Positionen, in diesem Fall durch „subparts“ markiert, die verschiedenartigen Inhalte dynamisch einfügt werden.

#Konfiguration des Auto-Parser fuer Haupt-Template:
plugin.tx_automaketemplate_pi1 {

  # Die Designvorlage wird eingelesen:
  content = FILE
  content.file = fileadmin/template/main_template.html

  # Hier werden die Elemente im der XHTML-Vorlage definiert
  # welche von subpart-Comments umgeben werden sollen:

  elements {
    BODY.all = 1
    BODY.all.subpartMarker = DOCUMENT_BODY

    HEAD.all = 1
    HEAD.all.subpartMarker = DOCUMENT_HEADER
    HEAD.rmTagSections = title

    DIV.all = 1
  }

  # Alle relativen Pfadangaben soll diese Prefix vorangestellt werden:
  relPathPrefix = fileadmin/template/
}

Zu Beginn ist es notwendig, die Designvorlage einzulesen (diese wurde zuvor samt Style Sheet über den Dateimanager an die angegebene Position gebracht). Hierfür wird die Variable „content“ mit dem FILE-Objekt belegt, damit eine Datei eingebunden werden kann . Anschließend erfolgt die Zuweisung der Designvorlage, die ab diesem Zeitpunkt dem System bekannt ist. Darauf folgend wird die Vorlage nach bestimmten Tags abgesucht und mit Subpart-Markern belegt. Zwischen dem öffnenden und schließenden Body-Tag der Vorlage soll der Subpart „DOCUMENT_BODY“ eingefügt werden. Analog dazu gilt dies für den Head-Tag. Außerdem wird der Title-Tag, welcher den Seitentitel beinhaltet, entfernt. Der Titel der jeweiligen Seite wird durch TYPO3 später dynamisch und passend ergänzt. Alle Div-Tags der Vorlage, an die ein Klassen- oder ID-Name vergeben wurde, werden ebenfalls mit gleichnamigen Subparts versehen. Durch diesen Umstand ist erreicht, dass jeder relevante Container des zu Grunde liegenden Layout über einen füllbaren Subpart-Marker verfügt, der durch dynamische Teile (Navigationen, Inhalte etc.) ergänzt werden kann . Die letzte Anweisung des Setups bewirkt, dass allen relativen Pfadangaben aus der Vorlage der Zusatz „fileadmin/template/“ vorangestellt wird. Dabei handelt es sich um das selbst gewählte Unterverzeichnis in dem alle Template-bezogenen Daten abgelegt sind. Es sind keine Pfadanpassungen in der Ausgangsvorlage nötig. TYPO3 kann diese Begebenheit vollkommen automatisch ohne weiteres Zutun des Users regeln.

Doctype-Festlegung per TypoScript

TYPO3 erzeugt standardmäßig HTML 4.01 Transitional kompatiblen Quellcode. Über wenige Zeilen TypoScript kann der Dokumententyp (Doctype) wie zuvor festgelegt auf XHTML 1.0 Strict gesetzt werden.

#DOCTYPE auf XHTML 1.0 Strict setzen, für den IE wird die XML-Angabe umgedreht
config.doctype = xhtml_strict
config.doctypeSwitch = true
config.xhtml_cleaning = all
config.htmlTag_langKey = de

Die erste Anweisung verändert den Doctype auf XHTML 1.0 Strict. Der zweite Befehl ist notwendig, da in der Version 6.0 des Microsoft Internet Explorers ein Bug existiert, der eine dem W3-Konsortium entsprechende Deklaration des XML-Typs der Seite vor dem Doctype fehlinterpretiert und zu gravierenden Darstellungsfehlern führt. Deshalb muss die Reihenfolge speziell für den Internet Explorer umgedreht werden, was durch diese Anweisung erledigt wird. Durch die Funktion „xhtml_cleaning“ wird der erzeugte XHTML-Code von häufigen Fehlern bereinigt. Mit der letzten Zeile wird die Sprachversion der generierten Seiten auf deutsch festgelegt.

Anlegen spezieller Bereiche/Funktionen

Wie die Unterscheidung von statischer und dynamischer Bereiche ergeben hat, müssen die Hauptnavigation, die Metanavigation im Kopf und Fuß, der Platzhalter für das Stimmungs-bild, der eigentliche Content inklusive Pfadanzeige und die Funktionen in der Fußzeile (Druckversion, Verweis an den Anfang der Seite) mit Hilfe von TypoScript realisiert werden. Die Dokumentation der praktischen Umsetzung in Auszügen soll die Erstellung des Grundgerüstes des Internetauftritts verdeutlichen.

Integration in TYPO3

Die hierarchische Baumstruktur wurde im CMS bereits vollständig abgebildet. Die Seiten sind jedoch noch komplett ohne Aussehen oder anderen Inhalt. Um diesen Zustand zu ändern, muss dem System die Designvorlage hinzugefügt und für die Seiten ein Template angelegt sowie zugewiesen werden. Das einheitliche Aussehen kann relativ simpel erreicht werden, indem man dem obersten Wurzeldatensatz (in diesem Beispiel „Startseite“) ein Template zuweist, welches automatisch allen untergeordneten Seiten vererbt wird. Das Hinzufügen der XHTML-Designvorlage inklusive Style Sheet erfolgt durch Upload in den „fileadmin-Ordner“ des CMS. In diesem Ordner können alle Dateien, die für den Internetauftritt benötigt werden, (in Unterordnern) abgelegt werden. Es handelt sich in anderen Worten um den Dateimanager von TYPO3.

Der klassische Weg bei der Seitenerstellung mit TYPO3 wäre, den Quelltext der Designvorlage mit verschiedenen TYPO3-Markern, so genannten „Marks“ und „Subparts“, zu versehen, welche dann aus dem CMS heraus angesprochen und mit Inhalten aus der Datenbank gefüllt werden können. Ein eleganterer und modernerer Lösungsansatz wird allerdings durch den Einsatz der zuvor erwähnten Extension „Template Auto-parser“ verfolgt. Eine spezielle Vorbereitung der Designvorlage ist nicht notwendig, da der Auto-Parser selbstständig die austauschbaren Markierungen („subparts“) zur Laufzeit einfügt. Diese wiederum können angewählt und befüllt werden. Somit ist es möglich, die XHTML-Vorlage ohne auch nur eine Anpassung oder Umstellung zu verwenden.

Für die „Startseite“ wird demzufolge ein neuer Template-Datensatz erstellt. Diese Art von Datensätzen hat verschiedene Bestandteile. Die für diese Betrachtung wichtigsten zwei Felder sind „Constants“ (hier werden häufig verwendete Konstanten definiert) und „Setup“ (beinhaltet die in TypoScript formulierte Beschreibung der kompletten Seitenelementerzeugung) .

Die kommentierte Anführung von TypoScript-Codeausschnitten des Setup-Feldes soll verdeutlichen, wie die Seite von TYPO3 aufgebaut wird. Sollten zusätzlich Konstantendefinitionen benötigt werden, wird dies deutlich sichtbar gemacht. Der gesamte, konfigurierte Template-Datensatz kann im Anhang gefunden werden.

Einrichten des Content Management Systems

Die Installation und Erstkonfiguration von TYPO3 legt den Grundstein für das spätere fehler-freie und reibungslose Arbeiten mit dem System. Mit Hilfe des sogenannten „Installations-Tools“ wird die Verbindung zum Datenbankserver und die Datenbank selbst eingerichtet. Das Befüllen dieser mit der TYPO3-Datenbankstruktur muss erfolgen und die Überprüfung sowie Anpassung von Standardwerten und -variablen (Schreibrechte, E-Mail-Einstellungen, Funktionen der Bildverarbeitung und -kombination etc.) an die eigene Serverumgebung durchgeführt werden.

Anschließend muss das „Backend“, der administrative Hintergrundbereich des CMS, welcher lediglich dem Administrator und den Redakteuren zugänglich ist, für die deutsche Sprache konfiguriert und neue Benutzer mit unterschiedlichen Schreibrechten für die spätere Wartung des Internetauftritts angelegt werden (mit „Frontend“ wird der Bereich von TYPO3 bezeichnet, den der Besucher zu sehen bekommt, also die eigentliche Website). Das Hinzufügen von Benutzern oder ganzen Benutzergruppen mit unterschiedlichen Rechten kann zu jedem Zeitpunkt auch nachträglich erfolgen, so dass in der Phase der Realisation ausschließlich der Administrator-Account, ausgestattet mit allen verfügbaren Berechtigungen, genutzt wird. Für die zukünftige Pflege werden an die Benutzer andere Zugriffsrechte vergeben und für den internetunerfahrenen Redakteur, welcher lediglich textliche Veränderungen aber keine strukturellen Erweiterungen vornimmt, uninteressante Bereiche ausgeblendet. Außerdem muss die gesamte Installation abgesichert werden, indem die Standardpasswörter für das Installations-Tool und die TYPO3-Instanz selbst entsprechend verändert werden.
TYPO3 bringt in der Standardinstallation bereits eine Vielzahl an Funktionen mit sich. Spezielle Module müssen dennoch als sogenannte „Extension“ oder „Plug-Ins“ nachträglich dem System hinzugefügt werden, was sich über den „Extension Manager“ leicht realisieren lässt. Im aktuellen Fall der nordEnergie-Internetpräsenz müssen u. a. Erweiterungen für den Template Auto-parser („automaketemplate“), welcher bei der Template-Erstellung hilft, und eine Erweiterung zur Implementierung von CSS-Definitionen („css_styled_content“) nachgeladen werden, um alle im Konzept aufgestellten funktionalen Forderungen zu erfüllen.

Die hierarchische Baumstruktur des Internetauftritts aus der Informationsarchitektur wird im Content Management System, wie in der Abbildung in der ersten Ebene zu sehen, eins zu eins übernommen.

Sitestruktur in der ersten Ebene
Sitestruktur in der ersten Ebene

In TYPO3 existieren verschiedene Seitentypen. Drei davon sind in der Grafik dargestellt. Der mit „Template Storage“ bezeichnete Datensatz vom Typ „sysFolder“ (Ordnersymbol direkt unter der Weltkugel an erster Stelle – es handelt sich hierbei um einen Speicherplatz für jedes beliebige Datenbankelement) beinhaltet die sogenannten „Templates“. Dies sind in der TYPO3 eigenen Konfigurationssprache „TypoScript“ verfasste Befehlsfolgen, welche für die Generierung der vollständigen Webseiten zuständig sind (dazu im nächsten Abschnitt mehr) . Die übrigen Oberrubriken vom Seitentyp „Standard“ (symbolisiert durch das Icon einer Seite) mit ihren dazugehörigen Unterseiten, welche sich unter dem jeweiligen Punkt aufbauen, bilden die Sitestruktur ab. Das der Metanavigation vorangestellte Symbol ist ein-gegraut dargestellt und zeigt an, dass diese Seite vom Typ „Nicht im Menü“ ist, da dieser Bereich später bei der Generierung des Menüs (der Hauptnavigation) nicht beachtet wird. Die Erstellung der Metanavigation wird aufgrund des unterschiedlichen Erscheinungsbildes und der anders gearteten Funktion gesondert behandelt.