Typo 3 - Ciando

Transcrição

Typo 3 - Ciando

Seite 1
Robert Steindl
Typo 3
Aus dem Inhalt:
n
Studie e
ausgab
Das Praxisbuch für Entwickler
Die hohe Flexibilität von Typo3 4.x hat ihren Preis: Nicht selten benötigen
Webseitenentwickler Wochen oder gar Monate, um sich in das freie
Content-Management-System einzuarbeiten. Der erfahrene IT-Berater
und Entwickler Robert Steindl kennt die Probleme, insbesondere bei
der Erweiterung von Typo3, aus seiner täglichen Arbeit. Sein Buch bietet
Typo3-Entwicklern konkrete Hilfe bei der Entwicklung von Templates,
bei der Arbeit mit TypoScript und beim Programmieren von Extensions.
씰
씰
씰
씰
Typo3 verstehen
Der modulare Aufbau des freien CMS ist Segen und Fluch zugleich:
Denn die nahezu endlose Erweiterbarkeit von Typo3 basiert auf
einer Vielzahl von Komponenten, deren Zusammenspiel der Anwender erst verstehen muss. Robert Steindl zeigt, wie die wichtigen
Konfigurations-Arrays im Backend von Typo3 miteinander interagieren und wie Sie sie so ansprechen, dass Sie Ihr gewünschtes
Ergebnis erreichen.
Extensions programmieren
Die Entwicklung funktionaler Erweiterungen für Typo3 nimmt
in diesem Buch breiten Raum ein. Robert Steindl liefert eine umfassende Checkliste, die beinhaltet, worauf Sie bei der ExtensionProgrammierung achten müssen und wie Sie am besten dabei
vorgehen. Ausführlich wird auch das Kickstarter-Tool beschrieben,
das ein Grundgerüst für die geplante Erweiterung erzeugt. Eine
umfangreiche Referenz der zentralen Befehlskomponenten ist
ideal zum Nachschlagen für jedes Extension-Projekt.
• Installation und Verwaltung
von Typo3
• TypoScript richtig anwenden
• Templates entwickeln
• Die Erweiterung TemplaVoilà
• Barrierefreie Websites gestalten
• Der Database Abstraction Layer
• Das Erweiterungstool Kickstarter
• Das Konfigurations-Array TCA
• Coding Guidelines
• Grundlagen der Typo3-API
• Typo3 optimieren
• Integration von Typo3-Websites
in Unternehmensanwendungen
Über den Autor:
Robert Steindl ist Diplom-Physiker
und Geschäftsführer des Web-Beratungsunternehmens Agilo GmbH.
Gleichzeitig ist er Manager für OnlineServices des Consulting-Hauses
Experton Group. Zuvor war er als
leitender Redakteur für den Onlineauftritt der Zeitschrift PC WELT
verantwortlich. Robert Steindl lebt
in München.
TypoScript beherrschen und jederzeit nachschlagen
Die Typo3-eigene Konfigurationssprache TypoScript ist der
Schlüssel zu den Funktionen des Systems. Der Autor zeigt, wie
diese Sprache funktioniert, und liefert eine Referenz der zentralen
Typo3-Komponenten und ihrer Funktionalität.
Templates erstellen
Keine erfolgreiche Website ohne passendes Design:
Der Autor zeigt, wie Sie Templates für Typo3 aufbauen,
und stellt das Werkzeug TemplaVoilà vor, mit dem Sie
HTML-Vorlagen flexibel und schnell erstellen können.
35,– EUR [D]
ISBN 978-3-7723-6758-8
Know-how
ist blau.
Robert Steindl
• Das Typo3-Backend
Auf www.buch.cd:
Alle Programmbeispiele und
Listings zum Download
Besuchen Sie unsere Website
www.franzis.de
Typo 3
14:01 Uhr
FRANZIS
13.03.2009
n
Studie e
ausgab
Typo 3
> Extensions selbst programmieren
> TypoScript verstehen und beherrschen
> Typo3-Templates erstellen und umsetzen
Steindl
6758-8 U1+U4 Farbalternativen
Das Praxisbuch
für Entwickler
FRANZIS
6758-8 Titelei:6758-8 Titelei
11.03.2009
16:12 Uhr
Seite 1
Robert Steindl
Typo 3
11.03.2009
16:12 Uhr
Seite 3
Robert Steindl
Studiene
ausgab
Typo 3
Mit 150 Abbildungen
FRANZIS
11.03.2009
16:12 Uhr
Seite 4
Bibliografische Information der Deutschen Bibliothek
Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie;
detaillierte Daten sind im Internet über http://dnb.ddb.de abrufbar.
Alle Angaben in diesem Buch wurden vom Autor mit größter Sorgfalt erarbeitet bzw. zusammengestellt und unter Einschaltung wirksamer
Kontrollmaßnahmen reproduziert. Trotzdem sind Fehler nicht ganz auszuschließen. Der Verlag und der Autor sehen sich deshalb gezwungen,
darauf hinzuweisen, dass sie weder eine Garantie noch die juristische Verantwortung oder irgendeine Haftung für Folgen, die auf fehlerhafte
Angaben zurückgehen, übernehmen können. Für die Mitteilung etwaiger Fehler sind Verlag und Autor jederzeit dankbar. Internetadressen
oder Versionsnummern stellen den bei Redaktionsschluss verfügbaren Informationsstand dar. Verlag und Autor übernehmen keinerlei Verantwortung oder Haftung für Veränderungen, die sich aus nicht von ihnen zu vertretenden Umständen ergeben. Evtl. beigefügte oder zum
Download angebotene Dateien und Informationen dienen ausschließlich der nicht gewerblichen Nutzung. Eine gewerbliche Nutzung ist nur
mit Zustimmung des Lizenzinhabers möglich.
© 2009 Franzis Verlag GmbH, 85586 Poing
Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherung in elektronischen Medien. Das Erstellen und Verbreiten von Kopien auf Papier, auf Datenträgern oder im Internet, insbesondere als PDF, ist nur mit ausdrücklicher Genehmigung des Verlags
gestattet und wird widrigenfalls strafrechtlich verfolgt.
Die meisten Produktbezeichnungen von Hard- und Software sowie Firmennamen und Firmenlogos, die in diesem Werk genannt werden, sind
in der Regel gleichzeitig auch eingetragene Warenzeichen und sollten als solche betrachtet werden. Der Verlag folgt bei den Produktbezeichnungen im Wesentlichen den Schreibweisen der Hersteller.
Lektorat: Franz Graser
Satz: DTP-Satz A. Kugge, München
art & design: www.ideehoch2.de
Druck: Bercker, 47623 Kevelaer
Printed in Germany
ISBN 978-3-7723-6758-8
5
Inhaltsverzeichnis
1
Grundlagen.................................................................................................. 11
1.1
Einleitung ........................................................................................ 11
1.2
Entstehung von Typo3...................................................................... 11
1.3
Architektur ....................................................................................... 12
1.4
TYPO3 Association und Community.................................................. 15
1.5
Ressourcen ...................................................................................... 16
2
Typo3 installieren ........................................................................................ 17
2.1
Systemvoraussetzungen .................................................................. 17
2.1.1 Grundvoraussetzungen .................................................................... 17
2.1.2 Optionale Voraussetzungen ............................................................. 18
2.2
Typo3 unter Linux und Windows....................................................... 18
2.2.1 Linux-spezifische Eigenheiten.......................................................... 18
2.2.2 Windows-spezifische Eigenheiten .................................................... 20
2.3
Basisinstallation .............................................................................. 21
2.3.1 Schnellinstallation im 1-2-3-Modus ................................................. 21
2.3.2 Erweiterte Konfiguration................................................................... 23
2.4
Extensions ....................................................................................... 31
2.4.1 Der Extension Manager .................................................................... 32
2.4.2 Extensions installieren..................................................................... 36
2.5
Multiple Websites mit Typo3 ............................................................ 37
2.5.1 Mehrere Instanzen von Typo3 .......................................................... 37
3
Website Design mit Typo3............................................................................ 41
3.1
HTML ist aller Seiten Anfang............................................................. 41
3.2
Die statische Variante ...................................................................... 42
3.2.1 Platzhalter: Subparts oder Marker? .................................................. 42
3.2.2 Typoscript sorgt für Inhalte............................................................... 47
3.2.3 Mehrere Templates verwalten .......................................................... 50
3.3
Automatische Templates.................................................................. 56
3.3.1 Die Erweiterung automaketemplate ................................................. 56
3.3.2 Einbinden der Erweiterung ............................................................... 56
6
Inhaltsverzeichnis
3.3.3
3.3.4
3.3.5
3.3.6
3.4
3.4.1
3.5
3.5.1
3.5.2
3.5.3
3.5.4
3.5.5
3.5.6
3.5.7
3.5.8
3.5.9
3.5.10
3.5.11
3.5.12
3.6
3.6.1
3.6.2
3.6.3
3.6.4
3.6.5
3.6.6
3.6.7
3.6.8
3.6.9
3.6.10
3.7
3.7.1
3.7.2
3.8
3.8.1
3.8.2
3.8.3
3.8.4
Das virtuelle Template ..................................................................... 59
Feintuning für den Auto-Parser ......................................................... 62
Abschlussarbeiten ........................................................................... 62
Auto-Parser und Template Selector .................................................. 64
TemplaVoila..................................................................................... 64
Ein TemplaVoila-Template anlegen .................................................. 65
TypoScript........................................................................................ 80
Einführung ....................................................................................... 80
Typoscript-Bereiche ......................................................................... 81
Der Typoscript Object Browser ......................................................... 82
Syntax.............................................................................................. 84
Datentypen ...................................................................................... 88
Bedingungen (Conditions) ............................................................... 91
Funktionen....................................................................................... 95
Konstanten ...................................................................................... 99
Der Setup-Bereich ............................................................................ 99
Fehlersuche ................................................................................... 107
Editoren für Typoscript ................................................................... 112
Ein Beispiel-Template .................................................................... 115
Menüs in Typo3 ............................................................................. 119
Das HMENU-Objekt ........................................................................ 120
Menü-Ebenen................................................................................. 122
Menü-Zustände.............................................................................. 127
TMENU ........................................................................................... 129
GMENU .......................................................................................... 134
Layer-Menüs .................................................................................. 136
GMENU_FOLDOUT .......................................................................... 139
IMGMENU ...................................................................................... 141
JSMENU.......................................................................................... 144
Spezielle Menüs ............................................................................ 145
Barrierefreies Design...................................................................... 155
Ressourcen zur Barrierefreiheit ...................................................... 155
Valider Quellcode .......................................................................... 158
Mehrsprachige Websites................................................................ 178
Das Zwei-Baum-Konzept ................................................................ 178
Das One-Tree-Fits-All-Konzept ........................................................ 180
Extensions und Mehrsprachigkeit .................................................. 190
RealUrl und Mehrsprachigkeit ........................................................ 191
Inhaltsverzeichnis
3.8.5
3.9
3.9.1
3.9.2
3.9.3
3.9.4
3.9.5
3.9.6
7
TemplaVoila und Mehrsprachigkeit ................................................ 196
Frontend-Benutzer ......................................................................... 197
Von Usern und Gruppen ................................................................. 198
Zugriffsrechte vergeben ................................................................. 201
Login-Seite einrichten .................................................................... 203
Login auf jeder Seite ...................................................................... 206
User-Registrierung und Profilverwaltung......................................... 208
Passwörter absichern..................................................................... 212
4
Das Typo3 Backend ................................................................................... 215
4.1
Benutzerverwaltung ....................................................................... 215
4.1.1 Backend-Benutzergruppen............................................................. 215
4.1.2 Rechte vergeben ............................................................................ 217
4.1.3 Backend-User anlegen ................................................................... 227
4.2
Backend anpassen ........................................................................ 231
4.2.1 Die Typoscript-Hierarchie ............................................................... 231
4.2.2 UserTS ........................................................................................... 232
4.2.3 PageTS........................................................................................... 252
4.3
Workflows in Typo3........................................................................ 268
4.3.1 Versionierung ................................................................................ 269
4.3.2 Workspaces ................................................................................... 271
5
Extension-Entwicklung............................................................................... 281
5.1
Grundlagen .................................................................................... 281
5.1.1 Typo3 und Extensions .................................................................... 281
5.1.2 Arten von Extensions ..................................................................... 283
5.1.3 Benennung von Extensions ............................................................ 286
5.1.4 Veröffentlichen von Extensions ...................................................... 288
5.1.5 Verzeichnisstruktur ........................................................................ 288
5.2
Der Extension Kickstarter ............................................................... 294
5.2.1 General info ................................................................................... 295
5.2.2 Setup languages ............................................................................ 296
5.2.3 New Database Tables..................................................................... 296
5.2.4 Extend existing Tables ................................................................... 304
5.2.5 Frontend Plugins ............................................................................ 305
5.2.6 Backend Modules .......................................................................... 308
5.2.7 Integrate in existing Modules ......................................................... 309
5.2.8 Clickmenu items ............................................................................ 310
8
Inhaltsverzeichnis
5.2.9
5.2.10
5.2.11
5.2.12
5.2.13
5.2.14
5.3
5.3.1
5.3.2
5.3.3
5.3.4
5.3.5
5.3.6
5.3.7
5.4
5.5
5.5.1
5.5.2
5.5.3
5.5.4
5.5.5
5.6
5.6.1
5.6.2
5.6.3
5.6.4
5.6.5
5.6.6
5.6.7
6
Services ......................................................................................... 310
Static TypoScript code ................................................................... 313
TSconfig......................................................................................... 313
Extension schreiben....................................................................... 313
Dateien des Kickstarters ................................................................ 315
Konfiguration einer Extension ........................................................ 326
Backend-Programmierung.............................................................. 327
Backend-Module............................................................................ 327
Modulerweiterungen ...................................................................... 331
Integration mit mod.php ................................................................ 331
Backend-Klassen ........................................................................... 334
ext_tables.php / tca.php................................................................ 336
Das Objekt $BE_USER .................................................................... 339
Verwendung des System-Logs........................................................ 343
Frontend-Programmierung.............................................................. 346
Project Coding Guidelines .............................................................. 351
Konventionen für Benennung und Formatierung............................. 351
Variablen und Konstanten.............................................................. 356
Datenbankzugriff ........................................................................... 357
Sicherheit ...................................................................................... 360
Coding ........................................................................................... 362
Typo3-API....................................................................................... 365
Grundlagen .................................................................................... 365
Workspaces ................................................................................... 370
TYPO3 Core Engine (TCE) ................................................................ 374
Erweitern von Typo3- und Extension-Funktionen ............................ 383
Nützliche Variablen und Konstanten .............................................. 385
AJAX im TYPO3 Backend ................................................................. 390
Der Table Configuration Array (TCA)................................................ 396
Lösungen................................................................................................... 443
6.1
Performance steigern ..................................................................... 443
6.1.1 Typo3 optimieren ........................................................................... 443
6.1.2 PHP................................................................................................ 448
6.1.3 Apache .......................................................................................... 449
6.1.4 MySQL ........................................................................................... 451
6.1.5 Leistung messen............................................................................ 451
6.2
Einbinden in bestehende Architekturen ......................................... 453
Inhaltsverzeichnis
6.2.1
6.2.2
6.3
6.3.1
6.3.2
6.3.3
6.4
6.4.1
6.4.2
6.4.3
6.5
6.5.1
6.5.2
6.5.3
6.5.4
9
Typo3 und LDAP ............................................................................. 453
Typo3 und OpenEMM..................................................................... 461
Backup .......................................................................................... 466
Import/Export als T3D .................................................................... 466
Backup mittels Extension............................................................... 468
Backup mittels Shell-Skript............................................................ 471
Sicherheit ...................................................................................... 473
Aktuelle Patches einspielen ........................................................... 473
Weniger ist besser ......................................................................... 474
Typo3 absichern ............................................................................ 475
Suchmaschinenoptimierung .......................................................... 482
Validen Quellcode erzeugen .......................................................... 482
Metadaten optimieren.................................................................... 485
Sitemap anlegen............................................................................ 488
SEO-freundliche Links.................................................................... 490
Stichwortverzeichnis ................................................................................. 495
41
3
Website Design mit Typo3
3.1
HTML ist aller Seiten Anfang
Wieviel Arbeit Sie auch in die Funktionalität Ihres Typo3-Systems stecken – der erste
Eindruck Ihrer Besucher wird maßgeblich vom Layout der Seite bestimmt.
Nur in seltenen Fällen ist aber ein guter Programmierer auch ein guter Webdesigner,
daher wird das Layout typischerweise von einem Spezialisten erstellt und dem Entwickler als HTML-Vorlage übergeben. Dabei steht zu hoffen, dass der Designer nicht
nur Photoshop kennt, sondern auch mit Begriffen wie etwa dem barrierefreien Design
etwas anfangen kann. Denn je besser die Qualität der Vorlage, desto weniger Arbeit fällt
für die Umsetzung an.
Als Typo3-Entwickler erhalten Sie also eine HTML-Vorlage, die es in Typo3 zu integrieren gilt und die etwa so aussehen könnte:
42
Kapitel 3: Website Design mit Typo3
Bild 3.1: Eine einfache HTML-Vorlage
Um daraus ein vollwertigesTypo3-Template zu machen, stehen mehrere Wege offen.
Welcher der einfachste oder auf Dauer sinnvollste ist, hängt sehr von der Aufgabenverteilung im Unternehmen sowie dem Einsatzzweck des Webauftritts ab.
3.2
Die statische Variante
Der wohl kürzeste Weg von der HTML-Vorlage zum Typo3-Template ist reine Handarbeit. Der Entwickler nimmt sich dabei die HTML-Datei vor und versieht sie an den
richtigen Stellen mit Typo3-spezifischen Platzhaltern.
3.2.1
Platzhalter: Subparts oder Marker?
Typo3 kennt zwei Arten von Platzhaltern im Template – Marker und Subparts. Ein
Marker kennzeichnet eine Stelle, an der Typo3-Inhalte eingefügt werden sollen.
3.2 Die statische Variante
43
Ein Beispiel: Aus dem Quelltext
<div id="footerInhalt">Copyright 2008</div>
wird
<div id="footerInhalt">###COPYRIGHT###</div>
Bei der Ausgabe wird dieser Marker durch Inhalt aus dem Content Management-System
ersetzt.
Ein Subpart kennzeichnet dagegen einen größeren Bereich im Quelltext, der ersetzt werden soll. Dazu werden eine Anfangs- und eine Endmarkierung gesetzt. Der gesamte Text
zwischen den Markierungen sowie die Markierungen selbst werden bei der Ausgabe
komplett gegen den Inhalt aus Typo3 ausgetauscht.
Beispiel:
<ul id="HauptmenueListe">
<li class="aktiv"><a href="#">Startseite</a></li>
<li><a href="#">Produkte</a></li>
<li class="last"><a href="#">Impressum</a></li>
</ul>
wird nach der Bearbeitung zu

<li><a href="#">Impressum</a></li>

</ul>
Die Zusätze »Beginn« und »Ende« dürfen Sie weglassen (streng genommen auch die
Kommentarzeichen), allerdings erhöht eine solche zusätzliche Markierung die Übersichtlichkeit.
Subparts sind einfachen Markern in einem wesentlichen Punkt überlegen: Zwischen
ihrem Anfang und ihrem Ende darf normaler HTML-Text stehen, und die Markierung
selbst ist in der hier verwendeten Schreibweise für HTML nur ein Kommentar. Das
erleichtert das Arbeiten mit der HTML-Vorlage erheblich, weil die einzelnen Bereiche
44
der Seite mit sinnvollen Inhalten dargestellt werden. Das so bearbeitete Template vermittelt daher immer noch einen realistischen Eindruck vom Aussehen der Website,
wenn es in einem HTML-Editor oder im Browser betrachtet wird.
Wie oben erwähnt, ist diese Methode relativ schnell, und der Entwickler hat maximale
Kontrolle über die Platzierung und Bezeichnung der Marker. Daher eignet sie sich sehr
gut für die schnelle Umsetzung einfacher Layouts.
Muss allerdings die HTML-Vorlage nach dem Einbau der Marker erneut bearbeitet
werden, kann sich die Unsichtbarkeit der Subpart-Markierungen negativ auswirken.
Werden Elemente der Seite in einem modernen WYSIWYG-Editor wie Dreamweaver
verschoben oder geändert, kann es schnell passieren, dass die Marker aus Versehen
gelöscht werden oder nach den Änderungen falsch platziert sind. Nach jedem Bearbeiten
der Vorlage muss der Typo3-Entwickler daher den Quellcode komplett neu prüfen und
die Marker gegebenenfalls korrigieren.
Damit ist die Arbeit an der HTML-Vorlage fast erledigt – bis auf eine Kleinigkeit: Die
Pfade zu den Bildern und zur CSS-Datei sind üblicherweise relativ angelegt. Um die
Vorlage später in Typo3 zu nutzen, wird sie mitsamt ihren Ressourcen im Verzeichnisbaum von Typo3 abgelegt, normalerweise unterhalb von fileadmin, also etwa in
fileadmin/template. Die ausgebende Seite, normalerweise die Datei index.php von
Typo3, liegt aber meist im Root-Verzeichnis des Servers. Die Verweise müssen daher
entsprechend umgebaut werden.
Das HTML-Template sieht nun folgendermaßen aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Typo3 Testsite</title>

<link href="fileadmin/templates/simple/css/styles.css" rel="stylesheet"
type="text/css" />

</head>
<body>

<div id="Kopf">
<img src="fileadmin/templates/simple/img/logo.gif" alt="Logo" name="Logo"
width="200" height="80" id="Logo" />
<img src="fileadmin/templates/simple/img/header.jpg" alt="Schmuckgrafik"
name="Headergrafik" width="800" height="80" id="Headergrafik" />
</div>
<div id="Hauptmenue">

<li><a href="#">Impressum</a></li>

</ul>
</div>
<div id="breadcrumb">
<div id="breadcrumbInhalt">

<a href="#">Startseite</a> --> <a href="#">Punkt2</a> --> <a
href="#">Unterpunkt 1</a>

</div>
</div>
<div id="Inhalt">
<div id="LinkeSpalte">
<div id="LinkeSpalteInhalt">
<ul id="SubmenueListe">

<li><a href="#">Punkt 1</a></li>
<li class="aktiv"><a href="#">Punkt 2</a>
<ul id="Submenue2Liste">
<li class="aktiv"><a href="#">Unterpunkt 1</a></li>
<li><a href="#">Unterpunkt 2</a></li>
<li><a href="#">Unterpunkt 3</a></li>
</ul>
</li>
45
46

</ul>
</div>
</div>
<div id="RechteSpalte">
<div id="RechteSpalteInhalt">

<img id="Hauptbild" src="fileadmin/templates/simple/img/home.jpg" alt="Unser
Firmensitz" width="300" height="308" />
<h1>Willkommen</h1>
<p>Willkommen auf der Typo3-Website.</p>
<p> </p>
<p>Diese Seite dient uns als Beispiel, um eine HTML-Vorlage als Typo3Template zu verwenden.</p>

</div>
</div>
</div>
<div id="footer">
<div id="footerInhalt">###FOOTER###</div>
</div>

</body>
</html>
Tipp: Ein etwas umständlicher, aber möglicher Workaround, damit das Template
trotz der unterschiedlichen Pfade auch nachträglich mit einem HTML-Editor erneut
bearbeitet werden kann, ohne die Pfade anpassen zu müssen:
Legen Sie sich in Ihrem Arbeitsverzeichnis ebenfalls einen Ordner fileadmin/
templates/simple an und speichern Sie darin eine Kopie der Bilder und CSSDateien. Wenn Sie unter Linux oder Mac-OS arbeiten, können Sie auch einen
symbolischen Link zurück auf das Verzeichnis der HTML-Datei setzen. So können
bereits beim Arbeiten im Editor die späteren Pfade benutzt werden.
vs160217:~/templates # ls -l
total 8
drwxr-xr-x
2 root
root
drwx-----7 root
root
lrwxrwxrwx
1 root
root
3.2.2
47
4096 Oct 17 17:08 .
4096 Oct 17 17:07 ..
2 Oct 17 17:08 simple -> ../..
Typoscript sorgt für Inhalte
Nachdem die Vorlage fertig ist, kommt endlich Typo3 ins Spiel, genauer: ein Typo3Template, das dem System mittels Typoscript-Anweisungen mitteilt, welche Inhalte welchen Platzhalter ersetzen sollen. Typoscript wird in einem eigenen Kapitel ausführlich
behandelt. In diesem Kapitel werden wir daher nur die Funktionen ansprechen, die
nötig sind, um unsere Templates zu nutzen. Auch die Menü-Elemente werden etwas
später in einem eigenen Abschnitt behandelt.
Zunächst wird für die Root-Seite ein Template angelegt. Am einfachsten geschiet dies,
indem das Modul Template gewählt wird und der Button Create template for new site
angeklickt wird.
Bild 3.2: Über das Template-Modul geht das Anlegen eines Templates am schnellsten
Anschließend wird bei diesem Template noch das statische Template aus der Erweiterung css_styled_content eingebunden. Diese Erweiterung gehört bei den aktuellen
Versionen zum Installationsumfang. Sie finden sie als System-Extension im Ordner
typo3/sysext.
Diese Erweiterung ist derzeit sozusagen das Standard-Template für Typo3. Sie hat die
alten, tabellen-basierten Templates abgelöst. Im Hinblick auf barrierefreie Seiten war
css_styled_content gegenüber Tabellen-basierten Layouts ein großer Schritt nach
48
vorne, wenn auch noch einige Lücken offen bleiben und die Erweiterung etwas zu
übermäßig vielen CSS-Auszeichnungen neigt. Mehr zum Thema barrierefreie Webseiten
mit Typo3 finden Sie im Abschnitt 3.7.
Bild 3.3: css_styled_content sorgt für saubere Ausgaben
Der Typoscript-Teil des gerade erzeugten Templates sieht folgendermaßen aus:
# Default PAGE object:
page = PAGE
page.10 = TEXT
page.10.value = HELLO WORLD!
Es werden zwei Objekte angelegt, zum einen das PAGE-Objekt mit dem Namen page
(wobei der Name beliebig ist), zum zweiten darin ein TEXT-Objekt, das als Bezeichner
lediglich eine Nummer bekommt. Diesem Objekt wird in der Eigenschaft value ein
statischer Wert zugewiesen.
49
Um nun statt des statischen Textes »HELLO WORLD!« Inhalte auszugeben, wird
anstelle des TEXT-Objekts das HTML-Template als Seitenobjekt eingebunden.
page.10 = TEMPLATE
page.10 {
template = FILE
template.file = fileadmin/templates/simple/index.html
workOnSubpart = DOCUMENT_BODY
subparts.CONTENTRIGHT < styles.content.get
}
Dieser Code weist zunächst dem Template-Objekt die HTML-Datei zu. Die Anweisung
workOnSubpart sorgt dafür, dass aus dem Template nur der Bereich zwischen den
###DOCUMENT_BODY###-Markierungen benutzt wird.
Die letzte Anweisung bringt nun Inhalte aus dem CMS ins Spiel. Die Zeile
subparts.CONTENT < styles.content.get
holt die Inhalte der aktuellen Seite und ersetzt damit den Subpart CONTENTRIGHT.
styles.content.get
css_styled_content.
ist ein vordefiniertes Objekt aus dem statischen Template
Ein Blick in die Typoscript-Dateien der Extension zeigt folgende
Definition:
styles.content.get = CONTENT
styles.content.get {
table = tt_content
select.orderBy = sorting
select.where = colPos=0
select.languageField = sys_language_uid
}
Es handelt sich also um ein CONTENT-Objekt, das Inhalte der Tabelle tt_content holt.
Die where-Bedingung colPos=0 sorgt dafür, dass nur Inhalte erfasst werden, die im
CMS für die Spalte »Normal« eingetragen wurden.
Analog dazu stellt css_styled_content noch styles.content.getLeft, styles.
content.getRight und styles.content.getBorder zur Verfügung, um Inhalte der
anderen Spalten (Links, Rechts und Rand) zu holen.
50
Neben dem Inhalt wollen wir aber auch noch die CSS-Datei verwenden, die der Webdesigner geliefert hat. Hier gibt es zwei Möglichkeiten:
page.includeCSS {
file1 = fileadmin/templates/simple/styles.css
file1.media = all
}
fügt die CSS-Datei in die Typo3-Ausgabe mit ein.
Alternativ lässt sich auch hier die Template-Methode benutzen. Dazu wird im Header
der HTML-Vorlage ein weiterer Subpart-Marker eingefügt und wie folgt eingebunden:
page.headerData.10 = TEMPLATE
page.headerData.10 {
template = FILE
template.file = fileadmin/templates/simple/index.html
workOnSubpart = DOCUMENT_HEADER
}
Der Vorteil dieser Methode ist, dass sehr bequem nicht nur die CSS-Datei, sondern auch
andere Header-Einträge, etwa Javascript-Dateien, ohne Nacharbeit so übernommen
werden, wie es der Webdesigner vorgesehen hat. In unserem Beispiel haben wir allerdings den <title>-Tag ausgespart, weil dieser von Typo3 eingefügt werden soll. Auch
<meta>-Tags sollten normalerweise nicht über das Template definiert werden.
3.2.3
Mehrere Templates verwalten
Mit dem HTML-basierten Ansatz ist ein Wechsel des Layouts relativ einfach. Um etwa
einer Gruppe von Seiten ein anderes Template zuzuweisen als dem Rest der Seite, erzeugen Sie für die übergeordnete Seite ein Erweiterungstemplate, das die entsprechenden
Objekte des Haupttemplates nach Wunsch abändert. Das kann etwa so aussehen:
51
Bild 3.4: Das Layout von Einzelseiten lässt sich gezielt ändern
Dieser Weg hat allerdings den Nachteil, dass die jeweiligen Templates zwar vorbereitet,
aber nur vom Administrator ausgewählt werden können, weil typischerweise ein
Redakteur in einer Typo3-Site nicht das Recht haben sollte, das Typoscript-Setup der
Seite zu ändern.
Hier hilft die Erweiterung Template Selector (rlmp_tmplselector) weiter, die von
Kasper Skårhoj in seinem Tutorial Modern Template Building vorgestellt und von Robert
Lemke weiterentwickelt wurde.
Diese Erweiterung erlaubt die Auswahl unterschiedlicher Templates durch den Redakteur, ohne in tiefere Strukturen eingreifen zu müssen.
Die Seiten-Templates unterscheiden sich nicht von den bisherigen. Es sind auch keine
besonderen Vorkehrungen zu treffen. Jedes Template, das als HTML-Seite in einem
vorher definierten Ordner liegt, wird vom Template Selector automatisch zur Auswahl
angeboten.
52
Um den Template Selector einzubinden, installieren Sie die Erweiterung und passen
anschließend das Typoscript-Setup Ihrer Website folgerndermaßen an:
plugin.tx_rlmptmplselector_pi1{
templatePathMain = fileadmin/templates/main/
defaultTemplateFileNameMain = standard.html
inheritMainTemplates = 1
}
Mit der templatePathMain-Anweisung wird festgelegt, wo der Template Selector die
Templates findet, die zur Auswahl angeboten werden. Die folgende Zeile legt die
Standardeinstellung fest.
Die letzte Zeile bestimmt, ob eine Seite die Einstellungen der übergeordneten Ebene
erben soll, wenn nichts anderes festgelegt ist. Für das Seitentemplate ergibt die Vererbung meist Sinn, so lassen sich beispielsweise in einem Webkatalog alle Produktseiten
einheitlich darstellen.
Nun muss das Plugin noch in die Seite integriert werden. Dazu wird die Anweisung
template=FILE ersetzt:
page.10 = TEMPLATE
page.10 {
template =< plugin.tx_rlmp_templselector_pi1
template.content.templateType = main
subparts.CONTENT < styles.content.get
}
Beim Bearbeiten einer Seite gibt es nun die Möglichkeit, das zu verwendende HTMLTemplate bequem im Backend zu selektieren:
Bild 3.5: Der Template Selector erlaubt dem Redakteur die Wahl des Layouts
53
Wie im obigen Bild zu sehen, wird die Auswahl durch Icons erleichtert. Diese Icons sind
ganz einfach zu erstellen. Im Verzeichnis, in dem die HTML-Templates liegen, wird für
jedes Layout ein GIF-Bild gleichen Namens abgelegt. Der Template Selector verwendet
diese Bilder dann automatisch im Backend.
Tipp: Bei älteren Typo3-Versionen erfolgt die Template-Auswahl, indem zunächst
der Seitentyp von »Standard« auf »Erweitert« geändert wird. Die Felder zur LayoutAuswahl erscheinen dann unten auf der Backend-Seite. In der Typo3-Version 4.2
bleibt der Seitentyp auf »Standard«, stattdessen gibt es einen neuen Reiter »Erweitert«, in dem die Templates ausgewählt werden.
Subtemplates
Neben der Auswahl des Seitenlayouts bietet der Template Selector noch eine zusätzliche
Ebene. Damit lässt sich beispielsweise die Darstellung des Inhalts variieren, während
Menüs und Logo gleich bleiben. Um diese Funktion zu nutzen, wird das TyposcriptSetup erneut erweitert:
plugin.tx_rlmptmplselector_pi1{
templatePathMain = fileadmin/templates/
templatePathSub = fileadmin/templates/sub/
defaultTemplateFileNameMain = standard.html
defaultTemplateFileNameSub = standardsub.html
inheritMainTemplates = 1
inheritSubTemplates = 1
}
temp.contentTemplate = TEMPLATE
temp.contentTemplate {
template.content.templateType = sub
workOnSubpart = SUB_BODY
subparts{
CONTENTSUBLEFT < styles.content.getLeft
CONTENTSUBMEDIUM < styles.content.get
CONTENTSUBRIGHT < styles.content.getRight
54
}
}
page.10 = TEMPLATE
page.10 {
template.content.templateType = main
subparts.CONTENT < temp.contentTemplate
}
Die Einstellungen für die Subtemplates sind mit denen der Seitentemplates weitgehend
identisch. Der Inhalt im Haupttemplate (subparts.CONTENT) wird jetzt aber durch das
neue Objekt temp.contentTemplate definiert.
Dieses Objekt ist selbst wieder ein Template. Durch die Zeile template.content.
wird dem Plugin mitgeteilt, dass es jetzt um ein Subtemplate geht.
Welches Template benutzt werden soll, lässt sich ebenfalls im Backend auswählen:
templateType = sub
Bild 3.6: Der Template Selector mit Auswahl für Seitenlayout und Inhalt
Die Inhaltstemplates sind etwas einfacher strukturiert. Sie müssen im Body lediglich das
Content-Element enthalten:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
55
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2-spaltiges Layout für Artikel</title>

<link href="fileadmin/templates/css/sub2col.css" style="text/css" />

</head>
<body>

<div id="artikellinks" />

<h1>Linke Spalte</h1>
<p>Artikeltext linke Spalte</p>

</div>
<div id="artikelrechts" />

<h1>Rechte Spalte</h1>
<p>Artikeltext rechte Spalte</p>

</div>

</body>
</html>
Unser Typoscript-Code unterstützt drei der vier Spalten, die Typo3 anbietet, das obige
Template wiederum verwendet nur zwei davon (Links und Rechts).
Zum Abschluss fehlt nur noch, das zusätzliche CSS einzubinden, das im Inhaltstemplate
definiert wurde. Das passiert analog zum Standard-CSS:
page.headerData.20 = TEMPLATE
page.headerData.20 {
template.content.templateType = sub
workOnSubpart = SUB_HEADER
}
Damit steht der Nutzung unterschiedlicher Layouts nichts mehr im Wege.
56
3.3
Automatische Templates
Wie oben beschrieben, sorgt der Einbau der Marker in ein Template von Hand für
diverse Probleme, wenn es darum geht, dass eine HTML-Vorlage nachträglich vom
Webdesigner bearbeitet werden soll. Besser wäre es, wenn Typo3 selbst die Struktur der
HTML-Datei erkennen könnte.
3.3.1
Die Erweiterung automaketemplate
Genau dies leistet der Template Auto-Parser von Kasper Skårhoj. Um die Erweiterung zu
installieren, gehen Sie in den Extension Manager und suchen im Online-Repository
nach der Erweiterung mit der Kennung automaketemplate.
Bild 3.7: Der Template Auto-Parser
3.3.2
Einbinden der Erweiterung
Das wichtigste Argument für den Auto-Parser ist, dass Änderungen von Hand an der
HTML-Vorlage nicht mehr notwendig sind. Stattdessen konfigurieren Sie den AutoParser so, dass vorhandene HTML-Elemente automatisch mit Subpart-Markierungen
versehen werden. Dazu wird der Parser in das Typoscript-Template eingebunden:
plugin.tx_automaketemplate_pi1 {
# Einlesen der HTML-Vorlage:
content = FILE
3.3 Automatische Templates
57
content.file = fileadmin/template/auto/index.html
# Festlegung, welche Elemente mit Markern versehen werden:
elements {
BODY.all = 1
BODY.all.subpartMarker = DOCUMENT_BODY
HEAD.all = 1
HEAD.all.subpartMarker = DOCUMENT_HEADER
HEAD.rmTagSections = title
DIV.all = 1
UL.all = 1
}
# Relative Pfade automatisch anpassen:
relPathPrefix = fileadmin/template/auto/
}
Der Beginn ist dem alten TEMPLATE-Objekt sehr ähnlich. Neu ist der elements-Block.
Dieser legt fest, welche HTML-Tags ersetzt werden.
Die folgende Befehlsfolge
BODY.all = 1
BODY.all.subpartMarker = DOCUMENT_BODY
sorgt dafür, dass nach dem <body>-Tag der Marker ###DOCUMENT_BODY### eingefügt
wird. Genau genommen würde diese Anweisung alle <body>-Tags ersetzen, doch da er
nur einmal vorkommt, stellt dies kein Problem dar.
Analog dazu wird auch der Header der HTML-Datei mit einem Marker ###DOCUMENT_
versehen. Das wird uns später erlauben, den Header der HTML-Datei für
unsere Ausgabe mitzuverwenden.
HEADER###
Der Befehl
HEAD.rmTagSections = title
sorgt dafür, dass der <title>-Tag samt Inhalt entfernt wird. Schließlich soll dieser
später dynamisch durch Typo3 erzeugt werden.
58
Die beiden Zeilen
DIV.all = 1
UL.all = 1
bewirken schließlich, dass alle <div>- und <ul>-Tags durchgehend ebenfalls mit
Markern versehen werden. Auf diese Art lassen sich beliebige HTML-Tags mit Markern
versehen.
Tipp: Achten Sie darauf, dass die Namen der HTML-Tags in der Parser-Konfiguration in Großbuchstaben geschrieben werden.
Allerdings werden in unserem Beispiel keine Marker direkt angegeben. Woher nimmt
also der Auto-Parser die Bezeichner? Ganz einfach: Die Erweiterung bedient sich bei den
id- und class-Attributen der entsprechenden Tags. Der Inhalt des Tags <ul id=
"Hauptmenue"> wird also mit dem Subpart-Marker 
versehen. Fehlen beide Attribute, wird auch kein Marker gesetzt.
Das Beispiel-Layout verwendet keinerlei Tabellen, lediglich <div> sowie <ul> für Menüs.
Daher müssen in diesem Fall keine weiteren Tags ersetzt werden.
Die letzte Zeile
relPathPrefix = fileadmin/template/auto/
erspart das manuelle Ersetzen aller Pfade zu Bildern, CSS-Dateien und ähnlichen Elementen. Solange die Ordner-Struktur, die der Webdesigner angelegt hat, unverändert in
dem fileadmin-Ordner kopiert wird, reicht diese eine Zeile aus, um alle nötigen Änderungen vorzunehmen.
Werden etwa Bilder in einem anderen Verzeichnis abgelegt, so lässt sich der Befehl auch
in der Form
relPathPrefix.IMG = fileadmin/images/auto/
gezielt auf Bilder in der Vorlage anwenden.
Seite 1
Robert Steindl
Typo 3
Aus dem Inhalt:
n
Studie e
ausgab
Die hohe Flexibilität von Typo3 4.x hat ihren Preis: Nicht selten benötigen
Webseitenentwickler Wochen oder gar Monate, um sich in das freie
Content-Management-System einzuarbeiten. Der erfahrene IT-Berater
und Entwickler Robert Steindl kennt die Probleme, insbesondere bei
der Erweiterung von Typo3, aus seiner täglichen Arbeit. Sein Buch bietet
Typo3-Entwicklern konkrete Hilfe bei der Entwicklung von Templates,
bei der Arbeit mit TypoScript und beim Programmieren von Extensions.
씰
씰
씰
씰
Typo3 verstehen
Der modulare Aufbau des freien CMS ist Segen und Fluch zugleich:
Denn die nahezu endlose Erweiterbarkeit von Typo3 basiert auf
einer Vielzahl von Komponenten, deren Zusammenspiel der Anwender erst verstehen muss. Robert Steindl zeigt, wie die wichtigen
Konfigurations-Arrays im Backend von Typo3 miteinander interagieren und wie Sie sie so ansprechen, dass Sie Ihr gewünschtes
Ergebnis erreichen.
Extensions programmieren
Die Entwicklung funktionaler Erweiterungen für Typo3 nimmt
in diesem Buch breiten Raum ein. Robert Steindl liefert eine umfassende Checkliste, die beinhaltet, worauf Sie bei der ExtensionProgrammierung achten müssen und wie Sie am besten dabei
vorgehen. Ausführlich wird auch das Kickstarter-Tool beschrieben,
das ein Grundgerüst für die geplante Erweiterung erzeugt. Eine
umfangreiche Referenz der zentralen Befehlskomponenten ist
ideal zum Nachschlagen für jedes Extension-Projekt.
• Installation und Verwaltung
von Typo3
• TypoScript richtig anwenden
• Templates entwickeln
• Die Erweiterung TemplaVoilà
• Barrierefreie Websites gestalten
• Der Database Abstraction Layer
• Das Erweiterungstool Kickstarter
• Das Konfigurations-Array TCA
• Coding Guidelines
• Grundlagen der Typo3-API
• Typo3 optimieren
• Integration von Typo3-Websites
in Unternehmensanwendungen
Über den Autor:
Robert Steindl ist Diplom-Physiker
und Geschäftsführer des Web-Beratungsunternehmens Agilo GmbH.
Gleichzeitig ist er Manager für OnlineServices des Consulting-Hauses
Experton Group. Zuvor war er als
leitender Redakteur für den Onlineauftritt der Zeitschrift PC WELT
verantwortlich. Robert Steindl lebt
in München.
TypoScript beherrschen und jederzeit nachschlagen
Die Typo3-eigene Konfigurationssprache TypoScript ist der
Schlüssel zu den Funktionen des Systems. Der Autor zeigt, wie
diese Sprache funktioniert, und liefert eine Referenz der zentralen
Typo3-Komponenten und ihrer Funktionalität.
Templates erstellen
Keine erfolgreiche Website ohne passendes Design:
Der Autor zeigt, wie Sie Templates für Typo3 aufbauen,
und stellt das Werkzeug TemplaVoilà vor, mit dem Sie
HTML-Vorlagen flexibel und schnell erstellen können.
35,– EUR [D]
ISBN 978-3-7723-6758-8
Know-how
ist blau.
Robert Steindl
• Das Typo3-Backend
Auf www.buch.cd:
Alle Programmbeispiele und
Listings zum Download
Besuchen Sie unsere Website
www.franzis.de
Typo 3
14:01 Uhr
FRANZIS
13.03.2009
n
Studie e
ausgab
Typo 3
> Extensions selbst programmieren
> TypoScript verstehen und beherrschen
> Typo3-Templates erstellen und umsetzen
Steindl
6758-8 U1+U4 Farbalternativen
Das Praxisbuch
für Entwickler
FRANZIS

Typo 3 - Ciando

Transcrição

Documentos relacionados

PRODUKTÜBERSICHT für die Technik The INFINICA Product Suite

TYPO3 - Grenke

TYPO3 Templates: Seiten-Layouts mit Fluid umsetzen — t3n.de

TYPO3 Factsheet by plan2net v2008

Workshop TemplaVoilà - Teil 1: Templates

UTO Merkblatt Materialliste-Einführungskurs - SAC

file extension ogm

Customer Success Story – Just Away

TYPO3-Domains

Content Marketing – Vom Buzzword zur

Der Nabla-Kalkül und die Eigenschaften von Feldern

Manage

1 Überschrift Nummer 1

TYPO3 Neos in der Praxis

HTML Cheat Sheet

Das TYPO3 Profihandbuch

Siedlergemeinschaft Feuerhof spendete einen Turnierkicker

What`s New - TYPO3 Forge

TYPO3 CMS 7.1 - What`s New

PDF-Version - freiesMagazin

1 Inhaltsverzeichnis Inhaltsverzeichnis

Verbraucherliste