Einführung
Aufbau dieses Buchs
An wen sich dieses Buch richtet
Typografische Konventionen
Verwendung der Codebeispiele
Kontakt
Danksagungen
I. Die THEMES-Erweiterung
1. Inspiration und Geschichte
2. Einführung in die THEMES-Erweiterungen
THEMES für Einsteiger
THEMES für Redakteure
THEMES für Integratoren
THEMES für Entwickler
3. Die THEMES-Erweiterung installieren
THEMES als Distribution installieren
Das THEMES-Framework als einzelne Erweiterungen installieren
Übersicht über verwendete Erweiterungen
Installation
THEMES als Entwicklerversion via GIT installieren
Hinweise für eigene Deployments
4. Arbeiten mit der THEMES-Erweiterung
Auswahl eines Themes
Nutzung des THEMES-Backend-Moduls
Auswählen im sys_template-Datensatz
Einstellungen eines Themes ändern
Änderungen im Backend-Modul Themes
Änderungen im Konstanten-Editor (nur für Administratoren)
5. Themes konfigurieren
Auswählen eines Themes
Konfigurieren eines Themes
Konfigurieren des Theme-Konfigurators
II. TYPO3-Themes erstellen
6. Einführung in das Bootstrap-Base-Package für TYPO3-Themes
7. Theme-Struktur anlegen
Speicherplatz eines Themes – Wo sollten die Dateien des Themes liegen?
Verzeichnisstruktur eines Themes
Das Verzeichnis Configuration
Das Verzeichnis Meta
Das Verzeichnis Resources
Theme-Konfigurationsdateien
8. Backend-Layouts nutzen
Wozu benötigen Sie Backend-Layouts?
Das Backend mit Backend-Layouts strukturieren
Backend-Layouts anlegen und bereitstellen
So erstellen Sie ein Backend-Layout als Datensatz
So verwalten Sie Backend-Layouts in versionierbaren Dateien
Backend-Layout-TSconfig-Referenz
Backend-Layouts auf Seitenebene verwalten
Backend-Layouts entfernen
9. TypoScript-Basis anlegen
Root-Template erstellen
Konstanten der THEMES-Erweiterung
Automatisch generierte Theme-Konstanten
Konfigurations-Theme-Konstanten
Definition der constants.txt
TypoScript-Setup aus der THEMES-Erweiterung nutzen
TypoScript-Setup für Ihr Theme
Die Content-Marker bereitstellen
Logo für das Theme bereitstellen
Daten aus den Inhaltsseiten auslesen
Menüs erstellen
Top-Menü erstellen
Breadcrumb-Menü erstellen
Hauptmenü erstellen
10. Grid-Layouts
Grid-Elemente und ihre Einsatzmöglichkeiten
Standard-Container zum Zusammenfassen von Elementen verwenden
Grid-Container zur strukturierten Darstellung von Inhalten nutzen
Funktions-Container für besondere Eigenschaften einsetzen
Einen neuen Grid-Element-Typ als Datensatz erzeugen
CE-Backend-Layouts in versionierbaren Dateien verwalten
CE-Backend-Layout-TSconfig-Referenz
CE-Backend-Layouts auf Seitenebene verwalten
Ausgabe von Grid-Elementen im Frontend
Ebenen der Frontend-Ausgabe konfigurieren
Responsive Grids für Bootstrap erzeugen
Generische Klassennamen für ein Framework verfügbar machen
Einfache Grid-Container zur Gruppierung von Elementen erzeugen
Beispiele für spezielle Grid-Container
Vierspaltiger Grid-Container
Grid-Container mit dynamischer Spaltenanzahl verfügbar machen
Funktions-Container für Karussells
11. Fluid-Templates erstellen
Die Fluid-Template-Engine
Fluid-Layouts
Fluid-Templates
Fluid-Partials
Fluid-Namespaces
Fluid-Variablen
Bereitstellung der Template-Pfade
Zugriff auf Theme-TypoScript-Konstanten
Arbeiten mit Fluid
12. Dynamisches CSS einsetzen
DynCSS installieren
DynCSS verwenden
Definition von konfigurierbaren LESS-Variablen
Bootstrap einbinden
Probleme beheben
Erweitertes Beispiel
13. jQuery integrieren
Installation der Erweiterung t3jquery
Erstellung einer individuellen jQuery-JS-Bibliothek
JS-Analyse auf jQuery-Abhängigkeiten
JS-Analyse von t3jquery.txt in Extensions
Komprimieren eigener JS-Dateien
Abhängigkeit von T3 jQuery im Theme vermerken
jQuery-Komponenten für T3 jQuery vermerken
Generierte jQuery-Bibliothek im Theme verwenden
Eigenes JavaScript im Theme einbinden
JavaScript-Bibliotheken über ein CDN einbinden
t3jquery auf ein CDN umstellen
Weitere Bibliotheken über ein CDN einbinden
Einstellungswerte in TypoScript bereitstellen
Sprachwerte in JavaScript bereitstellen
Fehlersuche
JavaScript-Konsole auf Fehler überprüfen
Wird jQuery als erste Datei geladen?
Wird jQuery mehrfach geladen?
14. Mehrsprachigkeit implementieren
Mehrsprachigkeit mit THEMES
Anlegen einer zweiten Sprache
Sprachmenü erstellen
Sprachdateien für das Theme
Sprachwerte aus einem Theme mit TypoScript überschreiben
Ausgewählte Sprache als CSS-Klasse im Body-Tag bereitstellen
15. Mit Inhaltselementen arbeiten
Varianten anlegen
Einrahmungen bereitstellen
Seitenkopf bereitstellen
Breitwand bereitstellen
Meldungen bereitstellen
Verhalten anlegen
Container bereitstellen
Tabellen bereitstellen
16. News integrieren
Installation der Erweiterung
Einrichten der Erweiterung
Verzeichnisstruktur für Erweiterungen
TypoScript der Erweiterung
TypoScript-Konstanten
TypoScript-Setup
Template-Anpassungen der Erweiterung
Öffentliche Dateien der Erweiterung
Sprachanpassungen der Erweiterung
CSS-Anpassungen der Erweiterung
17. RealURL bereitstellen
RealURL-Installation
RealURL für ein Theme aktivieren
RealURL im Backend verwenden
Erweiterte RealURL-Konfiguration
RealURL Auto-Konfiguration
18. Themes vererben
Erstellen der Theme-Erweiterungsstruktur
Seiten-TypoScript bereitstellen
TypoScript-Konstanten bereitstellen
TypoScript-Setup bereitstellen
Fluid-Templates bereitstellen
LESS im Theme verwenden
Neues LESS im Theme verwenden
LESS aus Theme-Bootstrap als Basis verwenden
Sprachwerte des Themes anpassen
JavaScript im Theme verwenden
Gridelements-Komponente im Theme verwenden
Favicon im Theme bereitstellen
19. Zusammenfassung
III. TYPO3-Distributions
20. Einführung in TYPO3-Distributions
Wo findet man Distributionen?
Distributionen auf der TYPO3-Website
Distributionen im Erweiterungsmanager
Eine Distribution installieren
21. Distributionen erstellen
Distributions-Struktur
Dateisysteminhalte
Datenbankinhalte in einem t3d-Export bereitstellen
Eigene Erweiterungen mitliefern
Spezielle Konfigurationen und Aktionen
Distribution testen
Zusammenfassung
22. Distributionen verwenden
Zielgruppenspezifische Einsteigerpakete
Firmeninterne Prototypen
Branchenlösungen
Testumgebungen für Entwickler
Stichwortverzeichnis
Kolophon
Copyright
Die meisten populären Web-Content-Management-Systeme im Open Source-Bereich verfügen bereits seit Jahren über eine große Anzahl fertiger Designvorlagen . Diese sogenannten Themes stehen zum Download über die offiziellen Seiten der Anbieter oder in eigens dafür eingerichteten Theme-Shops bereit. Das Geschäft mit dem Verkauf der Designs boomt. Die einzige Ausnahme bildete bisher TYPO3, für das trotz seiner Beliebtheit insbesondere im europäischen Raum nur eine sehr begrenzte Anzahl von Vorlagen existierte.
Es sind jedoch nicht zuletzt eben solche Themes, die es Neulingen vereinfachen, den Einstieg in das System und die damit verbundene Community zu finden. Die Erschließung von Märkten über den bisherigen Anwendungsbereich hinaus würde damit ebenfalls ermöglicht, denn TYPO3 wird bisher vor allem im sogenannten Enterprise-Bereich für Unternehmenswebseiten genutzt, der Einsatz für kleinere Websites würde mit einer größeren Anzahl an fertigen Themes deutlich erleichtert. Wir sind daher der Meinung, dass es insbesondere für TYPO3 wichtig ist, deutlich mehr solcher Vorlagen anzubieten als bisher. Aus diesem Grund wurde 2013 ein Projekt ins Leben gerufen, das seit Kurzem interessierten Designern und Programmierern die Grundlage dazu liefert, selbstständig sogenannte Theme-Packages zu erstellen.
Wir bezeichnen eine solche Grundlage als Base-Package . Um wie auch immer geartete Themes zu erstellen, empfiehlt es sich in jedem Fall, auf ein passendes Base-Package zurückzugreifen, weil damit bereits ein Großteil der erforderlichen Arbeiten an einem Theme abgedeckt wird. Insbesondere die zugrunde liegenden HTML-Strukturen sollten weitestgehend vereinheitlicht sein, um später möglichst einfach zwischen einzelnen Themes wechseln zu können. Genau diese vereinheitlichte Basis liefert ein Base-Package. Innerhalb eines solchen Base-Package wird jeweils nur ein bestimmtes Framework genutzt, jedoch haben wir bei der Konstruktion der Packages darauf geachtet, dass auch bei Verwendung eines anderen Frameworks als Basis dennoch eine weitestmögliche Kompatibilität zwischen den Paketen hergestellt wird. So wird später auch der Wechsel zwischen verschiedenen Frameworks mit geringem zusätzlichem Aufwand möglich sein.
Zur Finanzierung eines Base-Package haben wir eine Crowdfunding -Kampagne genutzt, die gleichzeitig als Voting für das zugrunde liegende Framework diente. Jeder Sponsor konnte ein Framework seiner Wahl benennen. Neben Bootstrap wurden dabei Foundation , Skeleton und YAML benannt. Die Wahl fiel letztlich mit 90 % der Stimmen sehr eindeutig auf Bootstrap. Das erste Base-Package basiert daher auf diesem Framework, für das im Netz bereits eine breite Palette vorgefertigter Design-Themes existiert. Es bietet damit vielfältige Möglichkeiten, beliebig viele dieser Designs in Form von auf dem Base-Package aufsetzenden Theme-Packages für die Nutzung mit TYPO3 aufzuarbeiten.
Das Ziel dieses Buchs ist es, Ihnen den Aufbau des Bootstrap-Base-Package und seiner Bestandteile zur Verwendung mit den von uns bereitgestellten Erweiterungen rund um die Extension THEMES zu erläutern. Wir werden dazu auf ein von uns bereitgestelltes Theme-Package zurückgreifen und Sie Schritt für Schritt durch Struktur, Konfiguration und Funktionalität dieser Basis führen. Falls Sie noch keine Erfahrung mit dem Aufbau eines Base-Package zum Beispiel durch einen unserer Workshops bei TYPO3-Camps oder Developer-Days haben, sollten Sie diese Schritte in der vorgegebenen Reihenfolge gemeinsam mit uns gehen. Am Ende werden Sie in der Lage sein, selbst eine solche Basis für ein beliebiges Frontend-Framework zu erstellen und darauf aufbauende Design-Themes selbst zu nutzen oder sie zum freien Download oder zum Verkauf anzubieten.
In Teil I werden wir uns mit der eigentlichen Erweiterung THEMES , ihrer Installation , dem grundlegenden Aufbau und ihrer Funktionalität beschäftigen. Sie werden lernen, wie Sie ein damit installiertes Theme nutzen, welche Bestandteile für die sinnvolle Nutzung eines Themes zwingend erforderlich und welche optional sind und wie Sie ein Theme über den sogenannten Konstanten-Editor konfigurieren können.
In Teil II geht es um die Ordnerstruktur eines Themes, die Strukturierung der Inhalte für Redakteure durch Backend-Layouts und Grid-Elemente sowie deren Ausgabe im Frontend mithilfe der TYPO3-eigenen Bordmittel TypoScript und Fluid-Templates . Sie erfahren, wie Sie für besondere Komponenten des verwendeten Frontend-Frameworks speziell strukturierte Grid-Elemente anlegen oder bereits existierende Komponenten anderer Base-Packages wiederverwenden können. Außerdem gehen wir auf die Konfiguration und Einbindung von dynamischen Stylesheets sowie JavaScript-Komponenten ein.
Nach dem Aufbau von Seiten und Inhalten behandeln die weiteren Kapitel insbesondere die Installation , Konfiguration und Ausgabe zusätzlicher Funktionen. Hierbei konzentrieren wir uns auf einige wenige Standardfunktionen, wie sie häufig in Bootstrap-Themes zu finden sind. Sie werden sich dort mit Kontaktformularen , der mehrsprachigen Ausgabe von Seiten und Inhalten, der Integration von News, der Einbindung von besonderen Elementen sowie der Erzeugung lesbarer URLs beschäftigen. Außerdem geben wir in diesem Abschnitt Hinweise dazu, was Sie bei der Integration weiterer Erweiterungen in Ihrem Theme-Package berücksichtigen sollten. Am Ende dieses Abschnitts werden Sie bereits in der Lage sein, eigene Base-Packages zu bauen und Themes dafür zu liefern.
Teil III beschreibt mit den sogenannten Distributions ein besonders nützliches neues Feature, das TYPO3-Anwendern seit der TYPO3-Version 6.2 zur Verfügung steht. Neben einem Theme-Paket lassen sich über eine solche Distribution fertige Seitenbäume, Inhaltselemente, Erweiterungen mit vorgefertigten Plug-in-Konfigurationen und vorkonfigurierte Nutzerzugänge sowohl für das Frontend als auch für Redakteure im Backend erzeugen. Zusammengefasst, können daraus vollständige Branchenlösungen entstehen, bei denen sich die Anwender nach der Installation sofort auf die Eingabe der eigentlichen Inhalte konzentrieren können. Wir zeigen Ihnen, wie Sie eine solche Branchenlösung erstellen und wie Sie die einzelnen Bestandteile erzeugen und vorkonfigurieren.
Zusammen mit dem Bootstrap-Base-Package , dessen Entstehung wir im Buch beschreiben und das Sie unter typo3-themes.org herunterladen können, erhalten Sie so einen ausführlichen Leitfaden. Mit dessen Hilfe können Sie in kürzester Zeit selbstständig ein Base-Package erzeugen oder Theme-Packages für bereits existierende Base-Packages erstellen.
Das Buch richtet sich an Entwickler, Integratoren und Designer mit ausreichend Erfahrung in der Anwendung und Bedienung von TYPO3, mit den zugrunde liegenden PHP-Klassen und Methoden sowie mit den üblichen Werkzeugen der TYPO3-Anwendungsentwicklung. Es handelt sich dabei ausdrücklich nicht um eine reine Anleitung zur Nutzung eines Themes, obwohl natürlich Teile davon im Buch zu finden sein werden. Für Einsteiger in TYPO3 oder reine Anwender von Themes empfehlen wir die sogenannte Guided-Tour-Distribution sowie das jeweilige Handbuch zum Theme.
Die folgenden typografischen Konventionen werden in diesem Buch verwendet:
Kursiv
Steht für neue Begriffe, Dateinamen und Pfade, URLs und E-Mail-Adressen. Viele neue Begriffe sind in einem Glossar am Ende des Buchs definiert.
Nichtproportionalschrift
Wird für Programmlistings genutzt, aber auch für Code innerhalb eines Absatzes, und bezieht sich auf Programmelemente wie Variablen- oder Funktionsnamen, Datenbanken, Datentypen, Umgebungsvariablen, Anweisungen und Schlüsselwörter.
Dieses Symbol weist auf einen Tipp, einen Vorschlag oder eine allgemeine Anmerkung hin.
Dieses Symbol weist auf eine Warnung hin.
Dieses Buch ist dazu gedacht, Ihnen bei der Erledigung Ihrer Arbeit zu helfen. Im Allgemeinen dürfen Sie den Code in diesem Buch in Ihren eigenen Programmen oder Dokumentationen verwenden. Solange Sie den Code nicht in großem Umfang reproduzieren, brauchen Sie uns nicht um Erlaubnis zu bitten. Zum Beispiel benötigen Sie nicht unsere Erlaubnis, wenn Sie ein Programm unter Zuhilfenahme mehrerer Codestücke aus diesem Buch schreiben. Wenn Sie allerdings einen Datenträger mit Beispielen aus O’Reilly-Büchern verkaufen oder vertreiben wollten, müssen Sie eine Genehmigung von uns einholen. Eine Frage mit einem Zitat oder einem Codebeispiel aus dem Buch zu beantworten, erfordert keine Genehmigung. Signifikante Teile von Beispielcode aus dem Buch für die eigene Produktdokumentation zu verwerten, ist dagegen genehmigungspflichtig. Wir freuen uns über eine Quellenangabe, verlangen sie aber nicht unbedingt. Zu einer Quellenangabe gehören normalerweise Autor, Titel, Verlagsangabe, Veröffentlichungsjahr und ISBN, hier also: »Thomas Deuling, Jo Hasenau und Kay Strobach, TYPO3 Theming und Distribution, O’Reilly Verlag 2015, ISBN 978-3-95561-710-3«.
Sollten Sie das Gefühl haben, Ihre Verwendung der Codebeispiele könnte gegen das Fairnessprinzip oder die Genehmigungspflicht verstoßen, dann nehmen Sie bitte unter kommentar@oreilly.de Kontakt mit uns auf.
Bitte richten Sie Anfragen und Kommentare zu diesem Buch an den Verlag:
O’Reilly Verlag GmbH & Co. KG Balthasarstraße 81 50670 Köln
Wir haben eine Webseite zu diesem Buch eingerichtet, auf der Errata, die Codebeispiele und zusätzliche Informationen veröffentlicht werden. Sie finden die Seite unter:
http://www.oreilly.de/catalog/typo3themingger/
Kommentare oder technische Fragen zu diesem Buch schicken Sie bitte per E-Mail an:
kommentar@oreilly.de
Weitere Informationen zum gesamten Angebot des O’Reilly Verlags finden Sie auf unserer Website: http://www.oreilly.de.
Wir sind auf Facebook: facebook.com/oreilly.de (https://www.facebook.com/oreilly.de)
Folgen Sie uns auf Twitter: twitter.com/OReilly_Verlag/(https://twitter.com/oreilly-verlag)
Der besondere Dank der Autoren gilt den insgesamt 72 Unterstützern der Crowdfunding-Kampagne auf Startnext, allen voran den Hauptsponsoren Michael Dengler, Peter Linzenkirchner und Jochen Weiland, die mit ihren Beiträgen die Entwicklung der Pakete ermöglicht und dabei gleichzeitig für Bootstrap als erstes Base-Package gestimmt haben. Außerdem möchten wir uns ausdrücklich bei Alexandra Follenius und dem Team von O'Reilly Deutschland für die uns entgegengebrachte Geduld bedanken, die wir oftmals ein wenig überstrapaziert haben.
Wir wünschen Ihnen viel Erfolg!
TYPO3 CMS wurde Ende der 1990er-Jahre vom Dänen Kasper Skårhøj erfunden und zunächst als proprietäres Content-Management-System seiner damaligen Firma entwickelt. Im Jahr 2001 erschien mit TYPO3 3.0 die erste Open Source-Version des Systems, die innerhalb weniger Jahre insbesondere auf dem europäischen Markt einen beachtlichen Verbreitungsgrad erreichte. Dieser Umstand war nicht zuletzt zwei Dingen geschuldet, die es Einsteigern erheblich vereinfachten, erste Schritte mit der Software zu machen:
Zum einen gab es mit der Example Page eine äußerst umfangreiche Sammlung von Beispielen für die TYPO3-eigene Konfigurationssprache TypoScript, zum anderen verfügten bereits frühe Versionen des CMS über sogenannte Static Templates (Abbildung 1.1), mit deren Hilfe sich nach wenigen Klicks ein fertiges Design für eine neue Website erzeugen ließ. Zusätzlich existierte noch die FC Bigfeet Site (Abbildung 1.2), die Website eines imaginären Fußballvereins, mit deren Hilfe verschiedene Funktionen von TYPO3 einfach nachvollziehbar waren.
Das Design dieser frühen Themes war nicht weltbewegend, und der dafür genutzte HTML-Code würde heute nicht mehr dem technischen Standard entsprechen. Dennoch halfen sie, das Ziel zu erreichen, möglichst viele Anwender für das System TYPO3 zu gewinnen. Nur so konnte Skårhøj gleichzeitig die Basis der verfügbaren Entwickler für das Content-Management-System erweitern, was insbesondere bei Open Source-Software ein wichtiger Faktor für die Weiterentwicklung ist. In den folgenden Jahren erlebte die TYPO3-Community einen erheblichen Zuwachs an Anwendern und Entwicklern, und TYPO3 wurde zu einem der führenden Open Source-CMS mit Hunderttausenden von Installationen weltweit.
Während zur gleichen Zeit für andere Open Source-Systeme wie Joomla oder WordPress eine wahre Flut von vorgefertigten Themes zum freien oder kostenpflichtigen Download produziert wurde, entwickelte sich dieser Bereich für TYPO3 eher spärlich. Der Grund hierfür lag zum einen darin, dass mit TemplaVoila eine ebenfalls von Skårhøj entwickelte Erweiterung existierte, mit deren Hilfe man verschiedene HTML-Vorlagen über ein sogenanntes Mapping relativ einfach für TYPO3 verfügbar machen konnte. Zum anderen positionierte das TYPO3-Marketingteam das System zunehmend im Enterprise-Segment, was nach Ansicht vieler Entwickler die Verfügbarkeit von vorgefertigten Themes eher unwichtig machte.
Die Folge war, dass Konkurrenzsysteme den Massenmarkt eroberten, während TYPO3 den Ruf bekam, es sei ein zwar qualitativ hochwertiges, aber für einfache Anwender viel zu kompliziertes System mit zu hohen Einstiegshürden bei einer gleichzeitig eher langen Lernphase. Dies führte dazu, dass das stetige Wachstum der TYPO3-Community stagnierte und immer weniger Entwickler als Nachwuchs für das langsam älter werdende Core-Team zur Verfügung standen.
Zwar gibt es anstatt der FC Bigfeet Site seit 2010 mit dem sogenannten Introduction Package ein modernes und sauber strukturiertes Paket, um Einsteigern die Funktionen des CMS zu erläutern, aber für Static Templates existiert bis heute kein adäquater Ersatz. Zudem wurde für das Introduction Package anfangs eine Lizenz gewählt, die die Verwendung des Pakets als Basis für eine eigene Website erschwerte.
Aus dieser Situation heraus entstand die Idee, TYPO3 für den Massenmarkt wieder attraktiver zu machen, ohne dabei auf die bekannte Zuverlässigkeit und Codequalität des Kernsystems zu verzichten. Damit würden mittel- bis langfristig nicht nur Einstiegshürden für Anfänger beseitigt, sondern auch eine breitere Basis geschaffen, um die Fortentwicklung des Systems zu sichern.
Erste Ansätze für die Erweiterung THEMES entstanden bereits aus dem sogenannten Framework for TemplaVoila , das unter Federführung von Ron Hall von einer Gruppe rund um die Web-Empowered-Church in den USA entwickelt wurde. Die grundlegenden Ideen dieses Frameworks wurden zunächst auch in Themes integriert. So bestand mit diesem Framework erstmals die Möglichkeit, strukturgebende Inhaltselemente wie zum Beispiel mehrspaltige Container für das jeweilige Layout anzupassen. Dazu definierte das Framework einen recht umfangreichen Baukasten von Standardinhalten , der dann für das jeweilige Theme lediglich durch TypoScript angepasst werden musste.
Der Baukasten umfasste seinerzeit folgende Elemente:
mehrspaltige Container mit 2, 3 oder 4 Spalten ,
Module – mehrspaltige Container mit einigen speziellen Eigenschaften ,
einen sogenannten HTML-Wrapper, um Inhaltselemente mit eigenem HTML-Code umgeben zu können,
ein spezielles Inhaltselement namens Plain-Image, um Bilder ohne zusätzliche Style-Angaben aus dem TYPO3 CMS ausgeben zu können, sowie
ein spezielles Modul zur Ausgabe von Bildern im sogenannten Featurebereich der Seite.
Bereits mit diesen Werkzeugen war eine effektive Erstellung von Internetseiten möglich. Da das Framework auf TemplaVoila basierte, kam mit den dadurch verfügbaren Seitentypen noch ein weiteres Hilfsmittel hinzu. Das Framework bringt bereits 15 Seitentypen mit, mit denen eine Seite in die typischerweise genutzten Bereiche einer Website eingeteilt werden kann. Dazu gehören:
Footer
Inhalte, die sich unter dem Hauptinhalt befinden
Feature
Bereich, der sich typischerweise im Kopf der Seite befindet und Inhalte besonders hervorhebt
Hauptinhalt
Hauptinhalt der Seite
Generated Content 1 und 2
Inhalte, die via TypoScript erzeugt werden, z. B. News etc.
Links und Rechts
Inhalte, die sich rechts oder links vom Hauptinhalt befinden
Da diese Bereiche in allen auf dem Framework basierenden Themes jeweils gleich benannt wurden, ist ein Wechsel des Seitenlayouts und sogar des gesamten Themes ohne nachträgliche Eingriffe und Korrekturen des Inhalts möglich.
Basierend auf den Erfahrungen mit diesen standardisierten Features des Framework for TemplaVoila , entstand die Idee zur aktuellen Version von THEMES, wobei wir als technische Basis die neuen Möglichkeiten von TYPO3 CMS 6.2 LTS nutzen.
Zur groben Strukturierung der Seiten dienen anstatt der Erweiterung TemplaVoila die bereits im TYPO3-Core verfügbaren Backend-Layouts , die ihrerseits mit einem FLUID-Template für die Frontend-Ausgabe verbunden werden. Zur detaillierteren Strukturierung der Inhaltselemente verwenden wir die Erweiterung Gridelements , die wiederum auf demselben technischen Prinzip beruht, das bereits für Backend-Layouts verwendet wird. Auch hierfür erfolgt die Frontend-Ausgabe zu einem großen Teil mithilfe von FLUID-Templates in Kombination mit entsprechenden TypoScript-Konfigurationen.
FLUID-Templates haben den Vorteil, dass deren Syntax, im Gegensatz zu dem für Entwickler meist kryptischen TypoScript, sehr nahe am tatsächlich auszugebenden HTML liegt, was die Einstiegshürde senkt und damit TYPO3 CMS für neue Entwickler und Integratoren einfacher zugänglich macht.
Durch diese technischen Feinheiten ermöglichen THEMES eine extreme Flexibilität bei gleichzeitiger Standardisierung von Datenstrukturen, die ohne Programmierkenntnisse in diesem Umfang aktuell in keinem anderen Content-Management-System verfügbar ist.
Im Zuge der Entwicklung von THEMES sind einige Erweiterungen entstanden, die in ihrer Gesamtheit als THEMES-Framework bezeichnet werden. Die meisten dieser Erweiterungen werden im Verlauf dieses Buchs schrittweise erklärt.
Dies sind die wichtigsten Erweiterungen:
Die Erweiterung THEMES bindet die installierten Themes in TYPO3 CMS ein und stellt damit die technische Basis dar .
gridelements nutzen wir zum Rendern von mehrspaltigen Inhaltselementen und speziellen Containerelementen
themes_gridelements ist die Brücke zwischen THEMES und gridelements. Darin werden die eigentlichen Standardelemente und Container definiert.
DynCSS dient dem Erzeugen von CSS-Dateien mit einem CSS-Präprozessor .
Durch diesen Aufbau können theoretisch gesehen verschiedene Erweiterungen zum Rendern der Inhaltsstrukturen verwendet werden. Derzeit werden offiziell jedoch nur die durch themes_gridelements definierten Strukturen unterstützt, sodass ein einfacher Wechsel zwischen einzelnen Themes möglich ist, ohne die Inhalte neu verteilen oder migrieren zu müssen. Die so bereitgestellten Standards decken nach unseren Erfahrungen fast alle üblichen Anwendungsfälle ab.
Immer wenn THEMES in Großbuchstaben geschrieben wird, ist die Erweiterung selbst gemeint, wird dagegen von einem Theme gesprochen, ist eine konkrete Frontend-Vorlage gemeint, die mithilfe dieser Erweiterung erzeugt wurde.
THEMES wurde mit dem Fokus auf folgende Zielgruppen entwickelt, auf deren Anforderungen wir im Folgenden eingehen werden:
Einsteiger in die TYPO3-Welt
Redakteure
Integratoren
Entwickler
Jede dieser Gruppen hat spezielle Anforderungen, die durch unsere Erfahrungen in der TYPO3-Community ermittelt und zusammengetragen wurden. Dabei haben wir besonders Entwickler und Einsteiger im Blick, denn eine Standardisierung der Frontend-Ausgabe ist für beide Gruppen nützlich. Entwickler können damit zügiger arbeiten, Einsteiger finden sich schneller innerhalb der Strukturen zurecht.
Für Einsteiger in die TYPO3-Welt bietet THEMES die Möglichkeit, innerhalb weniger Minuten ein grundsätzlich benutzbares Content-Management-System zu erhalten.
Unsere Motivation war, dass sich TYPO3 CMS nach der Installation möglichst benutzerfreundlich und ohne großen Aufwand umgehend verwenden lässt. Ein Standard-TYPO3-CMS begrüßte seinen Nutzer nämlich bisher nach der Installation mit der folgenden wenig hilfreichen Fehlermeldung (Abbildung 2.1).
Auch auf der darin verlinkten Wiki-Seite (Abbildung 2.2) erhält man nur rudimentäre Informationen über ein Basis-TypoScript zur Ausgabe des Texts »Hallo Welt«.
TYPO3 ist so, wie es auf TYPO3.org zum Download angeboten wird, ein sehr mächtiges Content-Management-Framework , dessen vielfältige Möglichkeiten aber auf Neueinsteiger oder wechselwillige Nutzer anderer Content-Management-Systeme oft abschreckend wirken.
Den Download von TYPO3 CMS finden Sie unter: https://typo3.org/download/
Das vollständige THEMES-Framework mit allen erforderlichen Erweiterungen kann als sogenannte Distribution installiert werden, wodurch man ein sofort sinnvoll nutzbares System erhält. Das ist möglich, da eine Distribution eine Kombination aus Erweiterungen, Datenbankinhalten und Dateien liefert und diese automatisch entsprechend im System ablegt.
In THEMES wird ein Standardsatz von oft genutzten strukturierenden Inhaltselementen definiert, der dann vom darauf basierenden Theme in der Frontend-Ausgabe lediglich angepasst wird. Durch diesen Ansatz ist zwischen den meisten Themes ein einfaches Umschalten möglich, was es einem Einsteiger ermöglicht, verschiedene Themes auszuprobieren, um das System kennenzulernen und es schrittweise an seine Anforderungen anzupassen. Zudem bietet THEMES die gleichzeitige Nutzung von mehreren Themes innerhalb derselben TYPO3-Installation, womit Varianten einer Seite einfach getestet und verändert werden können.
Durch diesen Ansatz ist es möglich, sehr einfach in die Welt von TYPO3 CMS einzusteigen und diese damit auch für Neueinsteiger weiter zu öffnen.
THEMES bietet Redakteuren, soweit vom Integrator erlaubt, die Möglichkeit, in einem definierten Rahmen auf das Layout von Seitenbäumen einzuwirken. So ist es dem Redakteur ohne die Nutzung von Typo-Script möglich, die Frontend-Ausgabe innerhalb dieses Rahmens festzulegen. Wie weit oder eng dieser Rahmen gesteckt sein sollte, hängt zum einen von den Fähigkeiten der jeweiligen Redakteure ab, zum anderen davon, wie viele Freiheiten man der Redaktion bei der Gestaltung der Seite einräumen möchte, ohne festgelegte Regeln des Corporate Designs zu verletzen. Mit THEMES sind sowohl sehr restriktive als auch vollständig freie Gestaltungsvarianten möglich.
Bei einer restriktiveren Konfiguration würden die vom Integrator freigegebenen Konstanten zum Beispiel genutzt, um lediglich die Farbwelten einer Internetseite zu gestalten. Der Redakteur kann im Backend-Modul von THEMES eine oder mehrere Basisfarben festlegen, und das verwendete Theme erzeugt mithilfe von TypoScript und der Erweiterung DynCSS die nötigen CSS-Dateien mit den dazu passenden Farbvarianten.
In einer freieren Konfiguration könnten Redakteure nicht nur einzelne Basisfarben verändern, sondern über entsprechende Checkboxen und Radio-Buttons besondere Effekte, Positionen oder Sichtbarkeitseinstellungen des zugrunde liegenden Frameworks auswählen. Insbesondere für responsive Layouts ist dies sehr hilfreich. Es setzt aber gleichzeitig entsprechende Erfahrungen der Redaktion voraus, weil sonst schnell unerwünschte Ergebnisse zustande kommen.
Durch die Standardisierung von Datenstrukturen ist es außerdem einfach, das Layout einer Webseite anzupassen, ohne dass die Inhalte noch einmal erfasst oder umstrukturiert werden müssen. Dies erspart den Redakteuren viel Arbeit, die sonst zum Beispiel beim Relaunch einer Website mit neuem Design entstand.
TYPO3-Integratoren wird durch Themes eine neue Welt im Bereich der Frontend-Entwicklung geöffnet. Derzeit haben viele Agenturen ihre eigenen Frontend-Frameworks mit immer wieder den gleichen typischerweise auf Internetseiten verwendeten Elementen.
Mehrspaltige Elemente
Tabs
Slider
Akkordeon
…
Mit THEMES werden diese typischen Datenstrukturen in Backend-Layouts und GridElements abgebildet und können in jedem Design angepasst und ausgegeben werden. Da Integratoren damit nur noch spezielle Elemente neu erstellen müssen, sinkt der Entwicklungs- und Einarbeitungsaufwand erheblich, zumal viele dieser speziellen Elemente von den bereits im Theme verfügbaren Elementen abgeleitet werden können. Diese standardisierten Elemente dienen dabei nicht nur als Baukasten, um sich die Methoden von THEMES anzueignen, sie stellen gleichzeitig sicher, dass die erlernten Fähigkeiten sich an eben diesen Standards orientieren, was wiederum allen Entwicklern und Anwendern von TYPO3 zugute kommt.
Zusätzlich wird durch ein ausgeklügeltes Vererbungssystem die Möglichkeit geschaffen, für die grundlegende TYPO3-Installation einer Website mit verschiedenen Teilbereichen zunächst ein agentureigenes Basis-Theme zu nutzen, das für die einzelnen Teilbereiche beliebig erweitert werden kann. Integratoren können so mit deutlich weniger Aufwand wesentlich schneller brauchbare Ergebnisse liefern.
Am Beispiel des Frontend-Frameworks Bootstrap wird dies später im Buch ausführlich erklärt.
Bootstrap-Dokumentation in Englisch: http://getbootstrap.com/
Bootstrap-Dokumentation in Deutsch: http://holdirbootstrap.de/
Aus der Sicht des Entwicklers hilft THEMES dabei, die Möglichkeiten moderner Werkzeuge zu nutzen. Dies wird möglich, da wir sämtliche Konfigurationen eines Themes nicht in der Datenbank verwalten, sondern in Dateien auslagern . Jedes Theme wird daher komplett in einer festgelegten Dateistruktur gespeichert und als TYPO3-CMS-Erweiterung installiert. So kann jedes Theme wie eine beliebige andere TYPO3-Erweiterung verwaltet werden. Dies schließt selbstverständlich Versionierungssysteme wie GIT oder eine Veröffentlichung über das TYPO3-Extension-Repository ein.
Die Ablage von Themes in Dateien erlaubt daher auch die Nutzung von Deploymentsystemen wie Jenkins oder Gitlab CI . Durch Vererbung können Themes zusätzlich von Base-Packages abgeleitet und damit die Entwicklungskosten weiter reduziert werden.
Derzeit ist nur das Basispaket für Bootstrap 3 verfügbar, allerdings können relativ einfach auch andere Frameworks eingebunden werden. Durch diese standardisierten Basis-Themes kann natürlich ebenfalls von einem Frontend-Framework auf ein anderes gewechselt werden, ohne jeweils alle Inhalte neu erstellen oder migrieren zu müssen.
Im Folgenden zeigen wir, wie die THEMES-Erweiterung und die ersten Themes mit den zugehörigen Abhängigkeiten installiert werden.
Damit Sie die Erweiterung installieren können, benötigen Sie zunächst ein lauffähiges TYPO3 CMS 6.2 LTS, am besten mit einer Datenbank im unveränderten Auslieferungszustand. Diesen Zustand erreicht man, indem man die TYPO3-CMS-Quellen via FTP/SSH auf einen Webspace mit PHP 5.3+ und MySQL-Support hochlädt. Danach rufen Sie das Setup auf. Da sich bereits mehrere Bücher mit dem Thema der TYPO3-Installation auf einem Webserver beschäftigen, gehen wir hier nicht detaillierter darauf ein.
Ausführliche Hinweise zu Download und Installation von TYPO3 finden Sie auf der offiziellen TYPO3-Download-Seite unter:
http://typo3.org/download/
Für die Installation des ersten Themes gibt es mehrere Möglichkeiten. Zum einen ist es denkbar, eine TYPO3-Distribution zu nutzen, die bereits für THEMES vorbereitet wurde. Zum anderen können die nötigen Erweiterungen einzeln installiert werden. Damit können Sie genau auf die Anforderungen der jeweiligen Installation eingehen. Sie können aber auch unsere virtuelle Entwicklungsmaschine nutzen.
Alle drei Varianten werden in den folgenden Abschnitten erklärt. Handelt es sich bei dieser Installation um Ihre ersten Schritte mit TYPO3 CMS, empfehlen wir die Installation als Distribution.
Seit Version 6.2 bietet TYPO3 die Möglichkeit, Inhalte und komplette Konfigurationen mit einer Distribution zu installieren. Direkt im Anschluss an die Installation von TYPO3 CMS in einer Version ab 6.2 gibt Ihnen TYPO3 die Möglichkeit, eine Distribution zu installieren. Nutzen Sie diese Möglichkeit, falls Sie TYPO3 selbst installieren. Sollte die Installation bereits bestehen, nutzen Sie zum Installieren bitte den Erweiterungsmanager.
In der Menüleiste des Erweiterungsmanagers wählen Sie den Punkt Vorkonfigurierte Distribution erhalten (siehe Abbildung 3.1).
Wie in Abbildung 3.2 zu sehen, können Sie dann die gewünschte Distribution auswählen.
Ein Klick auf Distribution installieren richtet die Distribution nun auf Ihrem System ein. Dabei werden gegebenenfalls vorhandene Beispielinhalte importiert und auch die nötigen Erweiterungen installiert, so dass dieser Vorgang eine Weile dauern kann.
Während der Installation werden einige Erweiterungen installiert. Diese haben verschiedene Aufgaben und können jeweils auch solo in TYPO3-CMS-Projekten eingesetzt werden. Zwei der installierten Erweiterungen enthalten jeweils ein Theme, und zwar theme_bootstrap und theme_bootstrap_slate . Im mit der Distribution gelieferten Seitenbaum befindet sich eine Seite mit einem kleinen orangefarbenen Symbol auf dem Icon (siehe Abbildung 3.3). Auf dieser Seite können Sie im Backend-Modul Themes das Theme für das Frontend auswählen.
Das THEMES-Framework besteht aus einigen Erweiterungen, die zum Teil voneinander abhängig sind. Mit der Verteilung der Funktionalität auf verschiedene Erweiterungen ist es möglich, diese auch in anderen Projekten wiederzuverwenden, die unter Umständen ohne THEMES arbeiten.
In den Abhängigkeiten sind auch themes_gridelements und gridelements selbst enthalten, die die Standardstrukturen für unsere Themes liefern. Mithilfe dieser Standardstrukturen ist es möglich, Themes später auszutauschen, wobei dadurch nur die Ausgabe im Frontend verändert wird und im besten Fall keine Inhalte angepasst werden müssen.
Für die ersten Schritte mit THEMES bietet sich die Installation von zwei Erweiterungen an, dies sind THEMES und theme_bootstrap . Beide Erweiterungen bringen noch einige Abhängigkeiten mit, die TYPO3 CMS automatisch ohne Ihr Zutun installiert.
| Erweiterung | Aufgabe |
|
themes |
Fügt den Selektor im sys_template-Datensatz hinzu und ermöglicht es, Themes zu registrieren. |
|
theme_bootstrap |
Installiert das Bootstrap-Basis-Theme, von dem weitere Themes abgeleitet werden können. |
Während der Entwicklung von THEMES haben wir großen Wert auf die Wiederverwendbarkeit unserer Arbeitsergebnisse in nicht direkt damit verbundenen Projekten gelegt, deshalb wurde viel Funktionalität in Erweiterungen ausgelagert. Diese Erweiterungen können meistens ohne zusätzliche Abhängigkeiten in Ihren eigenen Projekten verwendet werden.
| Erweiterung | Aufgabe |
|
gridelements |
Ermöglicht die Strukturierung von Inhalten. |
|
t3jquery |
Vermeidet Konflikte bei Mehrfachnutzung von jQuery und verwandten Bibliotheken . |
|
dyncss(.*) |
Ermöglicht die Verwendung von LESS und SASS in Themes und die Konfiguration in TypoScript . |
|
vhs |
Ist eine Sammlung von sinnvollen ViewHelpern, die in einigen Themes genutzt werden . |
Die Installation des kompletten THEMES-Frameworks mit einem Theme erfolgt am besten über den TYPO3-CMS-Erweiterungsmanager . Der Erweiterungsmanager ist für TYPO3-CMS-Administratoren über das Modul Adminwerkzeuge → Erweiterungsmanager erreichbar (siehe Abbildung 3.4). Im Untermodul Erweiterung hinzufügen können Sie entweder nach allen oben aufgeführten Erweiterungen suchen und diese schrittweise manuell installieren, oder Sie installieren nur die Erweiterung theme_bootstrap, für die TYPO3 die oben aufgeführten Abhängigkeiten automatisch mitinstalliert.
Weitere Themes können Sie jederzeit über den Erweiterungsmanager installieren. Diese Themes erscheinen dann im Backend-Modul Web → Themes, wo sie für die gewünschten Teile des Seitenbaums aktiviert werden können. Es besteht also prinzipiell die Möglichkeit, mehrere Webseiten in einer einzigen TYPO3-CMS-Instanz zu verwalten und für jede Seite ein anderes Theme zu verwenden.
Für die automatische Installation einer kompletten Testumgebung von THEMES mit einem aktuellen TYPO3 stellt das Entwicklerteam eine Vagrant-Box bereit, die es ermöglicht, THEMES ohne viel Konfigurationsaufwand zu testen und direkt an THEMES mitzuarbeiten.
Für die Ausführung der virtuellen Maschine benötigen Sie eine Laufzeitumgebung. Diese umfasst GIT, Vagrant und Virtualbox, die für alle gängigen Betriebssysteme verfügbar sind.
Diese Form der Installation setzt Grundkenntnisse im Umgang mit GIT, Vagrant, Virtualbox und Linux voraus, weswegen diese Form der Installation hauptsächlich für Entwickler geeignet ist.
Das GIT-Repository mit der Konfiguration der virtuellen Maschine ist auf http://typo3-themes.org verlinkt. Außerdem findet sich in dem Repository eine einfache Anleitung zum Starten der Maschine.
Im Folgenden gehen wir davon aus, dass GIT, Vagrant und Virtualbox erfolgreich auf Ihrem Hostsystem installiert wurden.
Zum Installieren der virtuellen Maschine führen Sie die Befehle in Listing 3.1 aus. Mit diesen Kommandos wird ein neuer Ordner mit dem Namen ThemesVM erstellt, die Konfiguration geladen und die virtuelle Maschine gestartet und initialisiert.
# Auschecken der Konfiguration git clone https://github.com/typo3-themes/Vagrant.Themes.git ThemesVM # Wechseln in den Ordner, der gerade von GIT erzeugt wurde cd ThemesVM # Starten der VM vagrant up # Browser auf der folgenden IP öffnen: http://192.168.31.16/
Nach einigen Minuten Wartezeit steht Ihnen eine komplette Testumgebung zur Verfügung. Vagrant kümmert sich dabei um die Installation und das Setup eines kompletten Linux-Systems, sodass Sie alle Funktionen ausprobieren können. Am Ende der Installation wird die IP-Adresse, mit der Sie im Browser auf die VM zugreifen können, ausgegeben.
Auf einem Windows-Hostsystem sind für die Installation und den Betrieb der VM unter Umständen Administratorrechte erforderlich, sodass wahrscheinlich während des Erstellens der virtuellen Maschine User-Account-Control-Meldungen auftauchen werden. Bitte bestätigen Sie diese mit »ok«.
Es ist auch möglich, die virtuelle Maschine als Basis für eigene Deployments zu nutzen.
Um alle benötigten Erweiterungen zu installieren, gibt es ein Shell-Skript, das den aktuellsten Entwicklungsstand aus den jeweiligen GIT-Repositories herunterlädt. Dieses Shell-Skript liegt im Ordner serverdata/provision/install-extensions.sh und installiert alle Erweiterungen in den aktuellen Ordner. Damit es in Ihrer Umgebung eingesetzt werden kann, müssen Sie also vor dem Ausführen des Skripts in den gewünschten Ordner wechseln.
Auf Github sind auch die Kochrezepte für das Deployment mit TYPO3.Surf zu finden, sodass die automatisierte Einrichtung noch einfacher wird. Diese nutzen wir zum Beispiel für die Demo-Internetseite rund um THEMES.