Advitum.de auf Google+

Typo3 Tutorial: Wie wird aus einem Design eine fertige Typo3-Seite?

Typo3 Tutorial: Wie wird aus einem Design eine fertige Typo3-Seite?
VN:F [1.9.22_1171]
Bewertung: 4.0/5 (47 Stimmen abgegeben)
Von am
Kategorien: Arbeit, CSS, Design, PHP, Programmieren, Tutorials, Typo3

Content Management Systeme sind ein geniales Konzept — einmal eingerichtet und gut konfiguriert, brauchen die Editoren und Redakteure keinerlei technisches Know-How, um die Seite mit Inhalten zu füttern. Ich baue alle Seiten für meine Kunden auf einem CMS auf, denn der Kunde kann dann die Seite selbst verwalten.

Schaut man sich im Internet nach einem guten CMS um, so wird einem eine lange Liste angeboten, aus der man wählen muss. Meine Erfahrungen zur Wahl des richtigen Content Management Systems habe ich in dem Artikel Welches Content Management System nutzt ihr? geschildert.

Je besser ein CMS am Anfang vom Profi eingerichtet und konfiguriert wird, desto einfacher kann der Laie hinterher die Seite verwalten. Ein CMS-Riese, der dieses Prinzip perfektioniert hat und der deshalb immer wieder genannt wird, ist Typo3. Einmal eingerichtet, macht die Verwaltung und Änderung der Inhalte nahezu keine Arbeit mehr. Die Einrichtung des Systems selbst ist allerdings kompliziert, wobei die lückenhafte, schwer verständliche und über Hunderte von Webseiten verteilte Dokumentation von Typo3 und die meisten Tutorials keine große Unterstützung bieten.

Dabei ist das System hinter Typo3 — einmal verstanden — im Grunde sehr einfach und logisch aufgebaut.

Dieser Artikel richtet sich deshalb an alle Interessierten, die auf der Suche nach einem Einsteigertutorial sind und gerne das Prinzip von Typo3 verstehen wollen. Ich schreibe diesen Artikel in der Hoffnung, das ihr, wenn ihr diesen Artikel gelesen habt, euch nicht in den Irrwegen von Typo3 verstrickt, wie ich es anfangs getan habe.

Typo3 Tutorial: Wie wird aus einem Design eine fertige Typo3-Seite?, 4.0 out of 5 based on 47 ratings

Artikelserie: Internetseite mit Typo3 erstellen

Dieser Artikel ist Teil einer mehrteiligen Artikelserie. Lies dir auch die restlichen Teile durch!

  1. How to: Photoshop-Entwurf mit HTML & CSS umsetzen - t3n
  2. Typo3 Tutorial: Wie wird aus einem Design eine fertige Typo3-Seite?
  3. Typo3-Tutorial: Schulhomepage mit Typo3 erstellen - schulhomepage.de

Abonniere den RSS-Feed von Advitum, um keinen Artikel zu verpassen, oder folge mir über meine Facebook-Seite oder meinen Twitter-Kanal.

Schritt 1: Installation von Typo3

Als erstes müssen wir Typo3 auf unserem Webserver installieren. Ich gehe in diesem Tutorial einfach mal davon aus, dass ihr schon eine fertige Webserver-Umgebung zur Verfügung habt — ich benutze übrigens einen lokalen XAMPP-Server, damit ich alles direkt auf meinem Computer testen kann.

Schritt 1.1: Herunterladen von Typo3

Beim Herunterladen von Typo3 fangen die Probleme schon an. In den meisten Tutorials, die ich gelesen habe, wurde ein direkter Link zu dem Download angeboten, der allerdings nach einiger Zeit nicht mehr funktionierte. Damals stand ich als Anfänger plötzlich vor dem Problem, welches Paket ich denn jetzt herunterladen muss.

Auf der Downloadseite von Typo3 werden verschiedene Versionen von Typo3 angeboten. Ganz links steht immer die aktuellste Version — momentan ist das bei mir die Version 4.5 LTS. In der untersten Tabellenzeile werden verschiedene Links zu verschiedenen Paketen angeboten — »Introduction Package«, »Source« und »Blank Package«.

Im Paket »Introduction Package« ist Typo3 schon komplett eingerichtet und betriebsbereit, allerdings wird hier nur ein langweiliges Standart-Design mitgeliefert. Dieses Paket ist für Anfänger gedacht, die erstmal schauen wollen, wie Typo3 funktioniert. Da wir Typo3 nach unseren Wünschen und vor allem mit unserem Design aus dem ersten Teil des Artikels einrichten wollen, ist dieses Paket nichts für uns.

Das Paket »Source« liefert den für Typo3-Entwickler den Quellcode von Typo3 — dieses Paket richtet sich hauptsächlich an fortgeschrittene Typo3-Entwickler.

»Blank Package« ist das Paket, was wir brauchen. Es enthält Typo3 als komplett leeres System, das nur auf die Einrichtung durch uns wartet. Dieses Paket wollen wir uns jetzt herunterladen. Ob ihr das Paket als »tar.gz« oder als »zip« herunterladet, ist egal. Dies sind einfach nur zwei verschiedene Komprimierungs-Verfahren. Ich habe einfach das Zip-File heruntergeladen.

Schritt 1.2: Entpacken des Paketes

Jetzt haben wir das Paket heruntergeladen und können es zum Beispiel nach C: entpacken. Wir erhalten einen Ordner namens blankpackage-4.5.3. Die Versionsnummer am Ende des Ordnernamens ist bei mir jedenfalls 4.5.3, wundert euch aber nicht, wenn bei euch eine andere Versionsnummer steht, denn diese ändert sich ja in Zukunft immer mal wieder.

Den Inhalt dieses Ordners kopieren wir jetzt einfach auf unseren Webserver — wenn ihr einen XAMPP-Server benutzt, dann müsst ihr die Daten in den Ordner htdocs kopieren.

Der Kopiervorgang wird vermutlich eine Zeit dauern, wartet unbedingt, bis alle Daten kopiert sind, bevor ihr mit dem nächsten Schritt fortfahrt.

Schritt 1.3: Entsperren des Installationstools

Wenn ihr jetzt eure Webseite — wenn ihr XAMPP benutzt, dann ist die Web-Adresse http://localhost/ im Browser aufruft, bekommt ihr zunächst erstmal eine Fehlermeldung. Keine Panik, das ist normal.

Typo3 wirft erstmal eine Fehlermeldung aus.
Da das Installationstool noch gesperrt ist, kann Typo3 nicht mit der Installation beginnen.

Aus Sicherheitsgründen ist das Installationstool von Typo3 gesperrt. Wir müssen es jetzt erst manuell entsperren, um Typo3 zu installieren. Dazu müssen wir nur im Ordner typo3conf eine Datei mit dem Namen ENABLE_INSTALL_TOOL anlegen.

Nun können wir endlich mit der eigentlichen Installation beginnen.

Schritt 1.4: Konfiguration der Datenbank

Rufen wir die Webseite nochmal im Browser auf.

Das Typo3 Installationstool
Jetzt können wir auf das Installationstool zugreifen.

Anscheinend hat das entsperren des Installationstools funktioniert. Jetzt können wir Typo3 installieren. In diesem Schritt wird noch nichts von uns verlangt, wir müssen lediglich auf »Continue« klicken.

Ein Formular verlangt die Eingabe der MySQL-Zugangsdaten
Typo3 braucht zunächst einen Zugang zu der MySQL-Datenbank.

Als erstes braucht Typo3 einen Zugang zu der Datenbank. Dort werden später die Inhalte der Seiten gespeichert. Wenn ihr einen Webserver benutzt, könnt ihr bei eurem Anbieter die Zugangsdaten zu der MySQL-Datenbank erfragen — benutzt ihr einen XAMPP-Server, so ist der Benutzername standardmäßig root und das Passwortfeld bleibt leer.

Typo3 braucht eine Datenbank
In diesem Schritt müssen wir eine neue Datenbank für Typo3 anlegen.

Jetzt müssen wir für Typo3 eine Datenbank bestimmen. Ich empfehle, eine neue Datenbank mit dem Namen typo3 anzulegen — den Namen könnt ihr aber auch frei wählen.

Auf manchen Webservern können nicht einfach neue Datenbanken angelegt werden. In diesem Fall müsst ihr einfach eine der bestehenden Datenbanken auswählen.

Typo3 legt Tabellen an
Typo3 will jetzt Tabellen anlegen, in denen die Daten gespeichert werden sollen.

Als letztes muss Typo3 noch die benötigten Tabellen anlegen, um die Daten darin zu speichern. Diesen Schritt müssen wir einfach nur mit einem Klick auf »Import database« absegnen.

Schritt 1.5: Sperren des Installationstools

Damit später nicht das Installationstool von jedem benutzt werden kann, müssen wir jetzt das Passwort für dieses ändern. Scrollt dazu ganz nach unten und klickt auf den Link »Change the Install Tool password here«. Jetzt gebt ihr in das Formular das neue Passwort ein und klickt auf »Set new password«. Abschließend solltet ihr noch die Datei typo3conf/ENABLE_INSTALL_TOOL löschen. Jetzt kann niemand mehr auf das Typo3-Installationstool zugreifen.

Die Installation ist fertig, doch es liegt noch ein langer Weg vor uns. Im nächsten Schritt fangen wir mit der Konfiguration im Backend an.

Schritt 2: Einloggen in das Backend

Ein zentraler Aspekt bei Content Management Systemen ist die Aufteilung in »Frontend« und »Backend«. Das Frontend repräsentiert später die Internetseite selbst. Dieser Teil des Systems ist für die Darstellung der Internetseiten zuständig. Das Frontend ist das, was der Besucher der Internetseite später sieht. Das Backend ist der zweite große Bereich des Systems. Dies ist die Arbeitsumgebung, in der die Verwalter, Redakteure und Admins der Seite die Fäden ziehen. Hier können alle Einstellungen bearbeitet, Seiten und Texte angelegt werden und vieles mehr.

Das Frontend ist ohne weiteres für uns zugänglich, dazu rufen wir einfach die Internetseite auf. Als XAMPP-Nutzer wäre die Adresse wieder http://localhost/.

Eine Fehlermeldung informiert uns darüber, das noch keine Seiten angelegt sind.
Noch wuden im Backend keine Seiten angelegt, deshalb erscheint diese Fehlermeldung.

Noch erscheint hier nur eine Fehlermeldung, da wir ja noch gar keine Seiten, die Typo3 jetzt anzeigen könnte, angelegt haben.

Widmen wir uns also zunächst dem Backend. Dazu hängen wir an die Adresse einfach /typo3 an. Der voreingestellte Admin hat den Benutzernamen admin und das Passwort password — kreativ, oder?

Jetzt befinden wir uns im Backend von Typo3. Auf der linken Seite befindet sich eine Liste mit Modulen. Nach dem Einloggen findet ihr eine Kurzhilfe zu allen Modulen auf dem Bildschirm. Module lassen sich vielleicht am ehesten als kleine Programme beschreiben, wobei jedes Modul einen bestimmten Funktionsbereich abdeckt. Im Page-Modul können zum Beispiel Seiten und Texte angelegt und bearbeitet werden.

Schritt 3: Anlegen einer Seite

Wählen wir zunächst auf der linken Seite das Page-Modul. Der Hauptbereich des Backends wird sich verändern, es erscheint ein Seitenbaum.

Der Seitenbaum von Typo3
Bisher enthält der Seitenbaum nur das Wurzelelement.

Bisher enthält der angezeigte Seitenbaum nur das Wurzelelement. Alle Seiten und Unterseiten werden später dieses Element als Vorfahren haben.

Doch wie legen wir eine neue Seite an? Dazu klicken wir einfach mit der rechten Maustaste auf das Wurzelelement und wählen »New«.

Es kann ausgewählt werden, wo die Seite angelegt werden soll.
Wo soll die Seite eingeordnet werden? Noch macht dieser Dialog keinen Sinn, da noch keine anderen Seiten vorganden sind.

In diesem Dialog kann ausgewählt werden, an welcher Position die Seite eingeordnet werden soll. Noch hat der Dialog keinen Sinn, da keine anderen Seiten vorhanden sind. Aber wenn mehrere Seiten vorhanden sind, kann hier ausgewählt werden, zwischen welche Seiten die neue Seite eingefügt werden soll. Fürs erste reicht es jetzt aber, einen beliebigen Pfeil anzuklicken.

Ein gelbes Hinweisicon zeigt, dass ein Name ausgewählt werden muss.
Hier kann der Name der Seite festgelegt werden. Benötigte Felder werden mit einem gelben Icon hervorgehoben.

Im nächsten Dialog können alle Eigenschaften der neuen Seite definiert werden. Nehmt euch ruhig die Zeit, durch alle Reiter zu blättern und alle zur Verfügung stehenden Eigenschaften zu lesen. Wichtig ist für uns erstmal nur der erste Reiter. Hier muss der Name der Seite definiert werden. Eine kurze Bemerkung am Rande: der Name der Seite wird später die Überschrift, hier bietet sich also tatsächlich eine volle Überschrift an. Für den Namen, unter dem die Seite später in der Navigation auftaucht, benutzt besser das Feld »Alternative Navigation Title«.

Wir werden jetzt als Seitentitel »Herzlich Willkommen auf meiner Testseite« und als Navigationstitel »Startseite« eintragen.

Am oberen Rand der Oberfläche befinden sich zwei Icons, auf denen ein Speichern-Symbol zu sehen ist. Jedoch befindet sich auf einem Icon zusätzlich ein X. Das erste Icon, ohne das X, bedeutet nur Speichern. Nach dem Speichern bleibt man so trotzdem auf der Seite, um die Daten nochmal zu bearbeiten. Das zweite Icon, mit dem X, bedeutet Speichern und Schließen, die Seite wird also geschlossen und man kehrt zurück zur vorherigen Seite.

Da wir nichts weiter verändern wollen, klicken wir einfach auf »Speichern und Schließen« und kehren so zurück zur vorherigen Seite.

Wie man sieht, hat sich der Seitenbaum verändert. Die neue Seite erscheint jetzt als Kindelement des Wurzelelements. Im Übrigen werden alle weiteren Seiten als Unterseiten zu dieser ersten Seite angelegt, aus praktischen Gründen, die ich später noch erläutern werde. Per Rechtsklick auf die Seite im Seitenbaum könnten wir wieder die Seiteneigenschaften bearbeiten. Aber wir begnügen uns jetzt einfach mit einem Linksklick auf die gerade angelegte Seite.

Jetzt fügen wir nun endlich Inhalt ein.

Schritt 4: Einfügen von Seiteninhalten

Im Hauptbereich erscheint jetzt ein vierspaltiger Bereich. In Typo3 können Seiteninhalte auf bis zu vier Spalten verteilt werden. Die Bezeichnung »Spalten« ist an dieser Stelle etwas irreführend, denn es handelt sich lediglich um vier voneinander getrennte Inhaltsbereiche. Diese können später nicht nur als Spalten nebeneinander, sondern auch beispielsweise untereinander dargestellt werden.

Der Inhalt von Seiten funktioniert in Typo3 nicht wie in herkömmlichen Textverarbeitungsprogrammen, es gibt einen wesentlichen Unterschied. Der Inhalt wird nicht als eine Einheit definiert, sondern in mehrere, aufeinander folgende Content-Elemente unterteilt.

Jedes Content-Element ist grün umrahmt
Jeder grüne Kasten ist ein einzelnes Content-Element.

Im Beispiel oben wird deutlich, dass sich der Inhalt der Seite aus vielen einzelnen Content-Elementen zusammensetzt.

Widmen wir uns wieder unserer Aufgabe — wir müssen Inhalt auf die Seite bringen. Dazu klicken wir einfach in der Spalte »Normal« auf das kleine Icon mit dem grünen Plus. Als nächstes können wir auswählen, welche Art von Content-Element wir erzeugen wollen. Es gibt jede Menge unterschiedlicher Content-Elemente — reiner Text, Text & Bild, nur Bilder, Listen, Tabellen. Uns reicht fürs erste reiner Text, also wählen wir »Regular Text Element«.

Jetzt öffnet sich der Editor für das Content-Element. Hier können wir eine Überschrift definieren, die dann über dem Content-Element steht, diese ist allerdings optional. Weiter unten finden wir dann ein großes Eingabefeld, in dem wir den Text — ähnlich wie in Word — formatieren können.

Wir geben hier jetzt irgendeinen Beispieltext ein, zum Beispiel »Meine erste Typo3-Seite :D«. Jetzt speichern wir wieder das Dokument — man beachte die verschiedenen Speichern-Buttons, die zur Verfügung stehen. Erstmal reicht uns aber Speichern und Schließen.

Widmen wir unsere Aufmerksamkeit noch einmal dem Seitenbaum. Vielleicht ist euch schon aufgefallen, dass an dem Icon der neuen Seite ein kleines, rotes Hinweisschild zu sehen ist. Dieses rote Icon bedeutet, dass die Seite versteckt ist. Rechtsklicken wir auf die Seite und wählen die Option »Enable«, womit die Seite sichtbar gemacht wird. Und siehe da, das Icon verändert sich, das rote Schild ist verschwunden.

Jetzt haben wir also eine fertige, für jeden sichtbare Seite angelegt — statten wir dem Frontend noch einen Besuch ab. Und tatsächlich, die alte Fehlermeldung ist verschwunden — leider ist an ihre Stelle eine neue Fehlermeldung getreten. »No TypoScript template found!«

Schritt 5: TypoScript

Obwohl wir eine Seite angelegt haben, wird von Typo3 noch eine Fehlermeldung angezeigt. Eine wichtige Sache haben wir noch nicht eingerichtet, das TypoScript.

TypoScript ist eine vereinfachte Skriptsprache, mit der definiert werden kann, wie Typo3 die Seiten aufbauen soll. Klingt kompliziert? Schauen wir uns einmal folgende Grafik an.

In diesem Schema ist dargestellt, wie Typo3 die Seiten erzeugt.
Eine Seite besteht nicht nur aus Inhalt, sondern auch aus einer »Bauanleitung« — dem TypoScript — mit welchem Typo3 aus dem Inhalt eine HTML-Seite erstellt.

Wie man sieht, braucht Typo3 zum Erzeugen einer Seite also nicht nur den Inhalt, sondern auch ein TypoScript. Muss man also für jede Seite wieder das TypoScript liefern? Nein, wenn eine Seite kein eigenes TypoScript hat, wird bei den Elternelementen nach einem TypoScript-Template gesucht. Deshalb sollte man auch alle Seiten als Unterelemente zu der Startseite definieren. So braucht man nur einmal auf der Startseite das TypoScript definieren und alle anderen Seiten übernehmen dieses automatisch.

Jetzt wollen wir also ein TypoScript-Template anlegen. Dazu benutzen wir das Template-Modul von der linken Seite des Bildschirmes. Im Template-Modul wählen wir dann aus dem Seitenbaum unsere Startseite und klicken dann auf »Create template for a new site«.

Im Template-Modul gibt es vier Funktionsbereiche, die wir am oberen Rand auswählen können.

Am oberen Rand können die Funktionen ausgewählt werden.
Mit der grün Markierten Dropdown-Liste können die Funktionen des Moduls ausgewählt werden.

Wir brauchen jetzt die Funktion »Info/Modify« — dies ist übrigens auch die Funktion, die wir meistens benutzen. Hier können wir das ganze Template bearbeiten.

Wenn wir die Funktion »Info/Modify« ausgewählt haben, sehen wir die einzelnen Felder, die wir bei dem Template bearbeiten können. Wichtig ist hier zum einen das Feld »Title«, hier sollte der Titel der Seite eingetragen werden. Viel wichtiger sind jedoch die »Constants« und das »Setup«. Unter »Constants« können Konstanten definiert werden, die dann im Setup verwendet werden können. »Setup« ist der wichtigste Bereich, denn hier wird schließlich und endlich die Seite aufgebaut.

Klicken wir einmal auf Setup und schauen uns an, was dort schon steht.

# Default PAGE object:
page = PAGE
page.10 = TEXT
page.10.value = HELLO WORLD!

Was wir hier sehen ist TypoScript. Die erste Zeile wird durch die Raute auskommentiert, aber danach wird es interessant. Mit TypoScript werden keine Inhalte ausgegeben, es wird lediglich definiert, welcher Text wo ausgegeben werden muss. Unser TypoScript wird immer nur eine Menge von Variablen, Objekten und Arrays definieren, die dann von Typo3 weiterverarbeitet werden.

Typo3 wird in der Variable page nach der Seite suchen, die ausgegeben werden soll. Deshalb wird in diese Variable in der zweiten Zeile ein PAGE-Objekt erzeugt. Das PAGE-Objekt besteht im Grunde nur aus eine COA-Objekt und einigen Variablen, die die Header-Informationen der Seite definieren.

COA-Objekt? Was ist denn jetzt ein COA-Objekt? COA steht für »Content Object Array«, ein COA-Objekt ist also ein Objekt, dass mehrere Content-Objekte speichern kann. Jedes gespeicherte Objekt hat dabei einen numerischen Index, wird also mit einer Zahl angesprochen.

# Default PAGE object:
page = PAGE
page.10 = TEXT
page.10.value = Text1
page.20 = TEXT
page.20.value = Text2
page.30 = TEXT
page.30.value = Text3

So funktioniert ein COA — hier werden drei TEXT-Objekte im PAGE-Objekt gespeichert, diese haben die Indizes 10, 20 und 30. Warum wird nur jede zehnte Zahl benutzt? Es gibt keine Regel, dass nur jede zehnte Zahl benutzt wird, aber das hat den Vorteil, dass man, wenn man irgendwo etwas dazwischen schieben muss, nicht alle Indizes ändern muss. Denn man hat ja zwischen benachbarten Objekten immer neun freie Indizes, die man benutzen kann.

In diesem Beispiel sehen wir auch, wie ein TEXT-Objekt, das wir auch schon im ersten Beispiel benutzt haben. Das TEXT-Objekt wird dazu benutzt, Text oder einfachen HTML-Code in der Seite zu benutzen. TEXT-Objekte haben eine Eigenschaft value, in welcher der Text angegeben wird.

Kommen wir wieder zurück zu dem TypoScript, was Typo3 schon für uns angelegt hat.

# Default PAGE object:
page = PAGE
page.10 = TEXT
page.10.value = HELLO WORLD!

Jetzt verstehen wir also schon, was dieses Script macht. Es legt eine Seite an und definiert als einzigen Inhalt den Text »HELLO WORLD!«.

Schauen wir uns jetzt noch einmal unsere Seite im Frontend an. Wie wir sehen, wird auf der Seite, wie wir es im TypoScript gesehen haben, nur »HELLO WORLD!« angezeigt.

Als nächstes ersetzen wir das »HELLO WORLD!« mit unserem eigenen Inhalt.

Schritt 6: Inhalt per TypoScript einfügen

Aber wo ist unser Inhalt? Den Inhalt müssen wir — wie alles andere — per TypoScript einbinden. Dazu gibt es ein sehr einfaches Hilfsmittel, mit dem wir den Inhalt automatisch im TypoScript importieren können. Es handelt sich dabei um eine bereits vorinstallierte Erweiterung. Diese müssen wir nur noch in unser TypoScript einbinden. Dazu gehen wir zurück zum Template-Modul und wählen unsere Startseite aus. Hier klicken wir auf »Edit the whole template record«.

Im Reiter »Includes« können wir TypoScripts, die uns verschiedene Erweiterungen bereitstellen, in unser TypoScript-Template einbinden. Wir suchen jetzt nach einem Script namens »CSS-Styled-Content«. Es gibt mehrere Scripts mit diesem Namen, hinter einigen stehen verschiedene Versionsnummern von Typo3. Wir brauchen aber das Script, hinter dem keine Versionsnummer steht, dies ist die aktuellste Version des Scripts. Dieses Script wählen wir aus und speichern dann.

In unserem TypoScript-Setup — wir erreichen es, indem wir wieder das Template-Modul auswählen und dann auf unsere Seite klicken — können wir jetzt mit folgendem Script auf unseren Inhalt zugreifen.

page = PAGE
page.10 < styles.content.get

In der Variable styles.content.get hat das TypoScript, das wir gerade inkludiert haben, die Inhalte der Seite gespeichert. Übrigens werden hier nur die Inhalte aus der Spalte »Normal« gespeichert. Die Inhalte aus den anderen drei Spalten befinden sich in den Variablen styles.content.getRight, styles.content.getLeft und styles.content.getBorder.

Wichtiges Update: Damit das Einfügen von Inhalt per styles.content funktioniert, klicke auf »Vollständigen Template-Datensatz bearbeiten« im Template. Hier musst du auf dem Reiter »Enthält« unter »Statische Templates einschließen (aus Erweiterungen)« das Template »CSS Styled Content« einbinden.

Wir benutzen hier als Operator ein <, dieser Operator wird dazu benutzt, den Inhalt einer Variable in eine andere Variable zu kopieren.

Schauen wir uns jetzt wieder das Frontend an, so wird in der Tat der Inhalt unserer Seite angezeigt.

Schritt 7: Template als Designvorlage

Jetzt wissen wir also schon, wie wir mit Typo3 den Inhalt auf die Seite bringen. Mit TypoScript könnten wir jetzt manuell das ganze Design erstellen, aber das wäre viel zu aufwendig. Stattdessen werden wir jetzt das fertige Design aus dem ersten Teil des Artikels zu einem Template machen.

Das fertige Design müssen wir jetzt erst einmal in den Ordner /fileadmin/templates/main kopieren, zusammen mit den beiden Ordnern css und images. Dieses Template können wir dann später per TypoScript mit den Inhalten der Seite füllen.

Doch zunächst ein wenig zur Theorie. In die Template-Datei müssen wir jetzt so genannte Marker einbauen. Diese Marker dienen uns später als Markierungen, wenn wir Inhalte in das Template füllen. Marker bestehen immer aus drei Rauten am Anfang und am Ende des Marker-Namens. Dazu schauen wir uns auch wieder ein kleines Beispiel an.

<title>###titleMarker###</title>

In diesem Beispiel habe ich einen Marker mit dem Namen »titleMarker« gesetzt. Diesen kann ich dann später per TypoScript durch einen Text ersetzen lassen. Neben den Markern gibt es noch die Submarker, mit welchen man einen ganzen Abschnitt im Template markieren kann. Das sieht dann zum Beispiel so aus.

<!-- ###markierung### begin -->
	<div>Dieser Bereich kann von TypoScript ausgewählt werden.</div>
<!-- ###markierung### end -->

Im Folgenden habe ich an einigen Stellen im Template Marker und Submarker eingefügt, zum Beispiel, um die Stelle zu markieren, an welcher später die Überschrift stehen soll. Das Suchfeld und das User-Panel habe ich entfernt, da wir es hier nicht brauchen. Außerdem habe ich alle Pfade zu Grafiken und zum Stylesheet angepasst, sodass diese immer gültig sind.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>Startseite » ThemeWall</title>
	<!-- ###DOCUMENT_HEADER### begin --><meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<link type="text/css" href="/fileadmin/templates/main/css/style.css" rel="stylesheet"><!-- ###DOCUMENT_HEADER### end -->
</head>

<body>
	<!-- ###DOCUMENT_BODY### begin -->
	<div id="mainWrapper">
		<div id="mainContent" class="contentWrapper">
			<img src="/fileadmin/templates/main/images/logo.png" alt="ThemeWall" id="logo" />
			
			<!-- ###NAVIGATION### begin -->
			<ul id="navigation">
				###NAVIGATION_ITEMS###
			</ul>
			<!-- ###NAVIGATION### end -->
			
			<div id="columns">
				<h1>###HEADING###</h1>
				###CONTENT###
			</div>
			<div class="clean"></div>
		</div>
	</div>
	
	<div id="footer" class="contentWrapper">
		<!-- ###FOOTER_MENU### begin -->
		<ul id="footerMenu">
			###FOOTER_MENU_ITEMS###
		</ul>
		<!-- ###FOOTER_MENU### end -->
		<div id="copyright">
			© 2011 <a href="https://advitum.de/">Advitum</a> &amp; <a href="http://patrickhummel.de/">Patrick Hummel</a>
		</div>
	</div>
	<!-- ###DOCUMENT_BODY### end -->
</body>

</html>

Mit dem TypoScript können wir jetzt aus dieser Datei den Inhalt eines Submarkers kopieren, die Marker durch Inhalte ersetzen und dann in unser PAGE-Objekt einfügen.

Bevor wir damit anfangen, noch eine kurze Ergänzung zur Syntax von TypoScript. Geschweifte Klammern dienen in TypoScript dazu, zu zeigen, dass etwas ein Kindelement von etwas anderem ist.

page.10 = blubb
page.20 = blubb
page.30 = blubb

Ich kann mir also sparen, jedes mal wieder page zu benutzen, indem ich statt des oben Stehenden das Folgende schreibe.

page {
  10 = blubb
  20 = blubb
  30 = blubb
}

Dies ist vor allem nützlich, wenn man es mit längeren Namen zu tun hat. Jetzt fangen wir aber an mit dem Head des Templates, denn hier muss nichts ersetzt werden, so wird das Verstehen leichter.

# In der Variable »temp« können temporäre Variablen gespeichert werden, welche von Typo3 automatisch gelöscht werden.
# Zum Erzeugen eines Templates aus einer Datei brauchen wir das Template-Objekt.
temp.docHead = TEMPLATE
temp.docHead {
  # Das Template soll aus dieser Datei entstehen.
  template = FILE
  template.file = fileadmin/templates/main/index.html
  # Mit »workOnSubpart« wird der Submarker angegeben, dessen Inhalt das Template umfassen soll.
  workOnSubpart = DOCUMENT_HEADER
}

In der Variable temp.docHead befindet sich also jetzt ein Template mit folgendem Inhalt.

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" href="/fileadmin/templates/main/css/style.css" rel="stylesheet">

Dieses Template können wir jetzt so in den Head der Seite einbinden:

temp.docHead = TEMPLATE
temp.docHead {
  template = FILE
  template.file = fileadmin/templates/main/index.html
  workOnSubpart = DOCUMENT_HEADER
}

# Default PAGE object:
page = PAGE
page {
  headerData = COA
  headerData.10 < temp.docHead
  
  10 < styles.content.get
}

Schauen wir uns wieder das Frontend an. Hier sollte sich jetzt Schriftart und Hintergrundfarbe der Seite geändert haben. Dies zeigt, dass das Stylesheet eingebunden wird.

Sollte sich nichts verändern, so ist es nötig, den Cache von Typo3 zu leeren. Dazu begeben wir uns wieder ins Backend, klicken auf den kleinen, gelben Pfeil am oberen, rechten Rand und wählen dann »Clear all caches«. Jetzt sollte sich das Frontend verändern.

Als nächstes fügen wir in die Seite den Body ein. Dies ist etwas komplizierter, da wir einige Marker ersetzen müssen.

temp.docBody = TEMPLATE
temp.docBody {
  template = FILE
  template.file = fileadmin/templates/main/index.html
  workOnSubpart = DOCUMENT_BODY
  
  marks {
    # Hier müssen wir den Inhalt für die zu ersetzenden Marker angeben.
    HEADING = TEXT
    # So können wir in TypoScript auf Eigenschaften einer Seite, in diesem Fall den Titel, zugreifen.
    HEADING.field = title
    
    CONTENT < styles.content.get
  }
}

page = PAGE
page {
  headerData = COA
  headerData.10 < temp.docHead
  
  10 < temp.docBody
}

Das einzige, was anders als bei dem Head ist, ist zum einen der zu bearbeitende Submarker, zum anderen werden Inhalte für die Marker definiert.

Typo3 benutzt jetzt unser Design für die Seite.
Typo3 benutzt jetzt unser Template-File, um die Seite zu erzeugen. Jetzt fehlen nur noch die Menüs.

Al nächstes ersetzen wir die Marker mit eigenen Inhalten.

Schritt 8: Die Navigation

Als nächstes kümmern wir uns darum, dass durch das TypoScript die Navigation angelegt wird. Dazu müssen wir aber erst ein paar Seiten erstellen. Wie ich vorhin bereits betonte, müssen alle Seiten als Unterseiten unserer Wurzelseite angelegt werden. Als erstes legen wir die Startseite an. Aber Moment — wir haben doch schon eine Startseite, warum noch eine?

Das ist ganz einfach. Zwar muss in unserem Seitenbaum eine Seite alle anderen Seiten als Unterseite haben — diese Wurzelseite wird von Typo3 als erstes Aufgerufen — allerdings wollen wir, dass die Startseite in unserer Navigation zusammen mit den anderen Seiten erscheint. Deshalb legen wir jetzt die wahre Startseite als Kind unserer Wurzelseite an und stellen die Wurzelseite so ein, dass sie nur einen Verweis auf unsere eigentliche Startseite darstellt. Klingt kompliziert? Macht nichts, wir gehen das jetzt Schritt für Schritt durch!

Als erstes legen wir, wie gesagt eine neue Seite als Kind unserer Wurzelseite an. Dazu rechtsklicken wir auf die Wurzelseite und wählen unter »Page Actions« »New«.

Eine neue Seite können wir anlegen unter Page Actions > New
Hier können wir eine neue Seite anlegen.

Als Position für die Seite wählen wir den Pfeil direkt unterhalb der Wurzelseite. Jetzt geben wir als Seitentitel wieder »Herzlich Willkommen auf meiner Seite« oder etwas ähnliches ein.

Erinnern wir uns nochmal an das Design — statt eines Linktextes für die Startseite war dort ein kleines Home-Icon zu sehen. Dies wollen wir natürlich auch in Typo3 haben. Hier ein kleiner Trick, der mir schon des öfteren das Leben vereinfacht hat: In das »Alternative Navigation Title«-Feld können wir auch HTML-Code eingeben — also auch ein Image-Tag. Geben wir also hier folgendes ein.

<img src="/fileadmin/templates/main/images/home.png" alt="Home">

Jetzt klicken wir auf »Speichern und Schließen«.

Ich habe anschließend noch zwei weitere Seiten mit den Titeln »Themes« und »Top Lists« direkt hinter der neuen Startseite angelegt, allerdings habe ich hier keine alternativen Seitentitel vergeben.

Mein neuer Seitenbaum hat 3 Unterseiten
So sieht mein Seitenbaum jetzt aus.

An den kleinen roten Symbolen im Seitenbaum erkennen wir, dass die drei neuen Unterseiten noch versteckt sind. Per Rechtsklick und anschließendem Klick auf »Enable« können wir sie einblenden.

Mit der Option »Enable« können wir die Seiten sichtbar machen.
Hier können wir die Seiten sichtbar machen — andernfalls werden diese nicht in der Navigation angezeigt.

Als letztes müssen wir noch die Wurzelseite bearbeiten. Diese soll schließlich jetzt als Verweis auf die neue Startseite zeigen. Wir öffnen also die Seiteneigenschaften. Hier können wir als Titel erst einmal den Titel der Seite eintragen — in diesem Fall also »Testseite«. Den Navigationstitel können wir jetzt auch entfernen, diese Seite soll schließlich in keiner Navigation auftauchen. Als Type müssen wir »Shortcut« auswählen. Es erscheint ein neues Eingabefeld, in welchem wir das Ziel des Shortcuts, als die neue Startseite auswählen können. Anschließend klicken wir auf »Speichern und Schließen«.

Den Inhalt unserer Wurzelseite können wir über das Page-Modul löschen, gleichzeitig legen wir auf den drei neuen Seiten ein wenig Inhalt an. Wenn wir damit fertig sind, können wir uns endlich dem TypoScript für unser Menü widmen.

Um TypoScript dazu zu bringen, das Menü anzulegen, benutzen wir ein HMENU-Objekt. Das HMENU-Objekt vereinfacht das Anlegen eines hierarchischen Menüs, man muss im Grunde nur definieren, wie die einzelnen Ebenen des Menüs angezeigt werden sollen. In unserem Fall wollen müssen wir übrigens nur die erste Ebene definieren, denn wir wollen ja gar nicht, dass in der Navigation Unterseiten erscheinen. Schauen wir uns erst einmal das HMENU-Objekt an.

# Das HMENU-Objekt speichern wir wieder in einer temporären Variable, wir binden es später in unser Template ein. Deshalb muss das Menü auch unbedingt vor dem docBody-Template definiert werden!
temp.mainMenu = HMENU
temp.mainMenu.1 = # Ebene 1
temp.mainMenu.2 = # Ebene 2
temp.mainMenu.3 = # Ebene 3
# So kann man die verschiedenen Menüebenen einblenden.

Wir brauchen keine drei Menüebenen, wie in dem Beispiel. Uns reicht die oberste Ebene, also die Nummer 1. Hier definieren wir jetzt ein TMENU-Objekt. Ein TMENU-Objekt erstellt ein Menü mit Textlinks.

temp.mainMenu = HMENU
temp.mainMenu.1 = TMENU

Jetzt müssen wir dem TMENU-Objekt nur noch übergeben, wie verschiedene Typen von Menüeinträgen dargestellt werden sollen.

temp.mainMenu = HMENU
temp.mainMenu.1 = TMENU
temp.mainMenu.1 {
  # In NO wird gespeichert, wie Links mit keiner (NO) besonderen Eigenschaft angezeigt werden sollen.
  # Mit der Eigenschaft allWrap definieren wir übrigens, mit welchem Code der eigentliche Link umschlossen werden soll. Statt des | erscheint der A-Tag
  NO.allWrap = <li> | </li>
  # Diese Zeile definiert, dass der Menüeintrag für die aktuelle (ACT) Seite anders dargestellt wird ...
  ACT = 1
  # ... und zwar so:
  ACT.allWrap = <li class="current"> | </li>
}

Wir definieren also eine Darstellung für die aktuelle Seite und für alle anderen Seiten. Es gibt noch weitere Optionen für Menüeinträge, zum Beispiel können alle Einträge, die Untereinträge haben, anders dargestellt werden (IFSUB).

Eine Sache fehlt aber noch. Wir müssen das Menü jetzt noch in unser Template einbetten, weshalb wir die Eigenschaft marks der Variable temp.docBody ein wenig erweitern.

marks {
    HEADING = TEXT
    HEADING.field = title
    
    CONTENT < styles.content.get
    
    NAVIGATION_ITEMS < temp.mainMenu
  }
Das Hauptmenü funktioniert wie gewünscht
Wie man sieht, funktioniert unser TypoScript. Das Menü wird wie gewünscht dargestellt.

Nach dem Hauptmenü fügen wir jetzt noch ein Footermenü ein.

Schritt 9: Navigation im Footer

In dem Design ist neben dem Hauptmenü noch ein Menü im Footer vorgesehen. Hier sollen einige ausgewählte Seiten Platz finden.

Damit wir auch ein paar neue Seiten zum Darstellen haben, erstellen wir jetzt im Typo3-Backend drei neue Seiten mit den Titeln »Kontakt«, »FAQ« und »Impressum«. Allerdings müssen wir diesmal nicht nur den Titel definieren, sondern auch sicherstellen, dass diese drei Seiten nicht in der Hauptnavigation auftauchen. Dazu wechseln wir beim Erstellen der Seiten auf den zweiten Reiter namens »Access« und setzen einen Haken bei »Hide in Menus«. Dies sorgt dafür, dass die Seiten nicht im Hauptmenü auftauchen.

Versteckte Seiten werden mit gestricheltem Rahmen dargestellt.
So sieht unser Seitenbaum jetzt aus. Wie man sieht, werden die Seiten, die nicht im Menü auftauchen, mit einem gestrichelten Rahmen am Icon markiert.

Wir definieren die Seiten, die in der Footer-Navigation erscheinen sollen in unserem TypoScript. Damit dies möglichst einfach im Nachhinein zu bearbeiten ist, definieren wir die Seiten nicht mitten in unserem TypoScript-Setups, sondern wir speichern dies in dem Constants-Feld.

# Komma-separierte Liste von Seiten, die im Footer-Menü angezeigt werden sollen 
footerMenuItems = 9, 10, 11

In meinem Fall waren die IDs der Seiten 9, 10 und 11, wir können dies aber ganz leicht nachschauen. Wenn ihr euren Cursor im Seitenbaum über das Icon einer Seite haltet, wird euch die ID der Seite angezeigt. Fügt also in dieser Konstante die IDs der drei Seiten ein und wechselt dann wieder zum Setup-Feld.

# Auch das Footer-Menü ist ein HMENU-Objekt und wird in einer temporären Variable angelegt.
temp.footerMenu = HMENU
temp.footerMenu {
  # Diese Zeile ist notwendig, damit auch die Seiten, für die wir definiert haben, sie sollen nicht im Hauptmenü erscheinen, in diesem Menü erscheinen
  includeNotInMenu = 1
  # Hier definieren wir, dass eine gegebene Liste von Seiten für das Menü herhalten muss
  special = list
  # Und hier binden wir die Konstante mit der Liste ein
  special.value = {$footerMenuItems}
  # Ab hier kennen wir uns wieder aus, wir definieren hier wieder ein TMENU-Objekt
  1 = TMENU
  1 {
    NO.allWrap = <li> | </li>
  }
}

Auch dieses Menü müssen wir wieder in unser Template integrieren.

marks {
	HEADING = TEXT
	HEADING.field = title

	CONTENT < styles.content.get

	NAVIGATION_ITEMS < temp.mainMenu

	FOOTER_MENU_ITEMS < temp.footerMenu
}

Schauen wir uns im Frontend an, ob das neue Menü funktioniert.

Das Footer-Menü funktioniert.
Jap, funktioniert.

Schritt 10: Managen des Contents

Wir sind fertig. Wirklich. Wir haben unser Design erfolgreich in Typo3 umgesetzt. Im Grunde ist Typo3 jetzt fertig eingerichtet, was das Design angeht.

Aber wie geht es weiter? Auf dem Weg zu einer fertigen Seite fehlen noch einige Konfigurationen. Wie es nun weitergehen kann zeige ich in dem Artikel Schulhomepage mit Typo3 erstellen auf Schulhomepage.de. Für weitere Informationen und Tutorials über Typo3 solltet ihr euch die Links anschauen, die ich unter »Links zum Thema« weiter unten aufliste.

Jetzt seid ihr dran!

Gebt mir ein Feedback! Hat euch dieses Tutorial gefallen? Wie findet ihr Typo3? Postet eure Meinung in den Kommentaren!

Links zum Thema

Typo3 Tutorial: Wie wird aus einem Design eine fertige Typo3-Seite?, 4.0 out of 5 based on 47 ratings

Nächster Artikel der Serie

Dieser Artikel ist Teil der Artikelserie »Internetseite mit Typo3 erstellen«.

Hier geht es zum nächsten Artikel der Serie: Typo3-Tutorial: Schulhomepage mit Typo3 erstellen - schulhomepage.de

Links zum Thema

Jetzt seid ihr dran!

Teilt eure Meinung mit uns in den Kommentaren, gebt eine Bewertung für diesen Artikel ab und teilt ihn in Social Networks!

Über

Ich bin ein junger Webdesigner und Programmierer aus Siegen und blogge auf Advitum.de über meine Erfahrungen im Web. Meine Themenschwerpunkte liegen im Bereich der Web-Entwicklung mit PHP, JavaScript, HTML und anderen Script-, Programmier- und Markup-Sprachen, der Nutzung von Content Management System wie Typo3, Wordpress etc. und der Effekt-Hascherei mit Photoshop. Seit 2008 blogge ich auf Advitum.de – mal mehr, mal weniger regelmäßig – über alles, was mich so interessiert. Wenn dir mein Blog gefällt, freue ich mich immer sehr über Feedback in Form von Kommentaren und E-Mails.

Kommentare zu diese Artikel

Schreibe jetzt einen Kommentar!

Oli schrieb am Antworten

Hallo Lars

Gibt es einen Grund, warum du das Template nicht mit TemplaVoila eingebunden hast? Ich habe das auch versucht und mir ist folgendes aufgefallen.

1. Es ist sehr einfach das Template einzubinden, besonders für Anfänger in TYPO3
2. Ich finde es super, dass bei TemplaVoila eingebundenen Templates, Inhalte und sogar ganze Spalten per Drag&Drop verschoben werden können. Das gefällt natürlich auch meinen Kunden sehr gut.

Gruss Oli

    Lars Ebert schrieb am Antworten

    Für mich war es damals als Anfänger wahnsinnig verwirrend, was denn die Rolle von Plugins wie AutoMakeTemplate oder TemplaVoila ist. Die haben mich persönlich eher verwirrt als mir geholfen. Ich halte es für eine gute Idee, erstmal zu zeigen, wie es komplett ohne zusätzliches Plugin geht.

Erik schrieb am Antworten

Hallo Lars

Ich arbeite schon einige Jahre mit T3, aber so ein schönes Tutorial im Schritt-für-Schritt-Modus habe ich noch nie gesehen. Vielen Dank, dass du dir die Zeit genommen hast! Viele Einsteiger sollten dir dankbar sein!

Leute, schreibt dem Lars auch ein paar Feedbacks – es steckt viel Arbeit hinter diesem Tutorial, und es ist frustrierend für jeden Autor, wenn alle nur stillschweigend lesen und keiner sagt was dazu …

    Lars Ebert schrieb am Antworten

    Hallo Erik,

    vielen Dank für dein sehr positives Feedback! Du hast recht, es tut immer wieder gut zu sehen, dass da doch jemand ist den meine Artikel interessieren. Das motiviert mich immer für meine nächsten Artikel!

Asheldon schrieb am Antworten

danke. und das sage ich echt nicht oft.

Master Fu schrieb am Antworten

Grossartig! Ganz herzlichen Dank!

Martin schrieb am Antworten

Sehr gut, sehr schön geschrieben! Vielen Dank für die Arbeit.

Nick schrieb am Antworten

Echt gut! Vielen Dank!

Ruebi schrieb am Antworten

Eigentlich ein tolles Tutorial, aber im ZIP-Container der zum Download bereit steht liegt eine falsche index.html (Autor: Patrick Hummel) !!! Da muss man erstmal drauf kommen. Sobald man die index.html aus dem Beispieltext reinkopiert geht’s wie von Wunderhand.

Also bitte mal checken.

Sonst klasse und Danke.

    Lars Ebert schrieb am Antworten

    Hey Ruebi,

    ich hab das mal geprüft und finde keine falsche Datei. Meinst du das Zip-Archiv psd2html.zip? Da liegt ja nur die HTML-Datei des letzten Artikels drin, das hat noch nichts mit Typo3 zu tun. Deshalb verändern wir ja später diese Datei, um daraus ein Typo3-Template zu machen.

    Und der Autor ist auch nicht Patrick, er hat bloß das Design als Photoshop-Datei bereitgestellt, die HTML-Datei ist im ersten Teil der Artikelserie entstanden.

    Ich würde mich freuen, wenn du dich nochmal melden könntest und das Problem genauer beschreiben könntest, denn es interessiert mich schon, was da nicht stimmt!

Pascal schrieb am Antworten

Hi,

erstmal vielen Dank für dieses Tutorial, hat mir schonmal viele Einblicke geliefert. Aber ich habe an einer Ecke ein Problem und ich bin kurz vorm ausrasten: Wenn es auf Seite 5 darum geht, das Template in den Head der Seite einzubinden, dann habe ich am Ende den Code sogar 1:1 übernommen. Keine Chance, ich sehe leider keine Veränderung. Was mache ich falsch?

    Lars Ebert schrieb am Antworten

    Hey Pascal,

    was genau funktioniert denn nicht? Bei welchem Schritt des Tutorials bist du und was siehst du im Frontend? Probier vielleicht schonmal, den Cache von Typo3 zu leeren.
    Gib mir mehr Infos, ich helfe dir gerne weiter! Kein Grund zum Ausrasten 😉

      Pascal schrieb am Antworten

      Das nenn ich mal Reaktionszeit 😉
      Also ich bin auf der Seite 5 bei Schritt 7: Template als Designvorlage:
      Soweit alles klar und auch mein Inhalt wird angezeigt. Habe mir die Dateistruktur auch angelegt wie beschrieben. Mir wenn ich jetzt

      page {
      headerData = COA
      headerData.10 < temp.docHead

      10 < styles.content.get
      }
      einfüge, dann passiert nichts, auch nicht nach dem Cache leeren. Wo muss ich denn genau das hier:

      # In der Variable »temp« können temporäre Variablen gespeichert werden, welche von Typo3 automatisch gelöscht werden.
      # Zum Erzeugen eines Templates aus einer Datei brauchen wir das Template-Objekt.
      temp.docHead = TEMPLATE
      temp.docHead {
      # Das Template soll aus dieser Datei entstehen.
      template = FILE
      template.file = fileadmin/templates/main/index.html
      # Mit »workOnSubpart« wird der Submarker angegeben, dessen Inhalt das Template umfassen soll.
      workOnSubpart = DOCUMENT_HEADER
      }

      reinpacken? Ich habe echt alles versucht, aber ich komm einfach nicht weiter.

      Danke schonmal! 🙂

        Lars Ebert schrieb am Antworten

        Also im Setup (nicht bei den Konstanten!!!) sollte hinterher das stehen:

        [py]
        # In der Variable »temp« können temporäre Variablen gespeichert werden, welche von Typo3 automatisch gelöscht werden.
        # Zum Erzeugen eines Templates aus einer Datei brauchen wir das Template-Objekt.
        temp.docHead = TEMPLATE
        temp.docHead {
        # Das Template soll aus dieser Datei entstehen.
        template = FILE
        template.file = fileadmin/templates/main/index.html
        # Mit »workOnSubpart« wird der Submarker angegeben, dessen Inhalt das Template umfassen soll.
        workOnSubpart = DOCUMENT_HEADER
        }

        page {
        headerData = COA
        headerData.10 < temp.docHead

        10 < styles.content.get
        }
        [/py]

        Ist die Seite nach Einfügen des Codes wieder komplett weiß oder wird wenigstens dein Inhalt noch angezeigt?

        Schau mal, ob im Quellcode der Seite irgendwo

        [html]
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <link type="text/css" href="/fileadmin/templates/main/css/style.css" rel="stylesheet">
        [/html]

        auftaucht, wenn ja, dann liegt es nicht am TypoScript und du solltest mal den Pfad der CSS-Datei prüfen. Wenn es nicht auftaucht, prüfe den Pfad des Templates.

          Pascal schrieb am

          Danke, ich werde es später mal probieren! 😉

          LG

          Pascal schrieb am

          Hi,

          Sorry hatte viel um die Ohren! Also leider taucht bei mir:
          gar nicht in meinem Quellcode auf…Habe die Pfadangaben überprüft und da scheint alles richtig zu sein

          Pascal schrieb am

          Das mein ich natürlich 😉

          Pascal schrieb am

          Hi ich bins jetzt nochmal,

          also ich bin alles durchgegangen und ich glaube, dass er einfach nicht auf meine index.html und meine style.css zugreifen will! (Im Quellcode taucht einfach nicht der Pfad zum Fileadmin auf….)

          Ich habe keine Ahnung warum er das nicht machen will, ein Berechtigungsproblem sollte es eigentlich nicht sein.

          Hattest du das Problem vielleicht schon einmal?

          Lars Ebert schrieb am

          Nein, das Problem hatte ich noch nie. Der Fehler liegt vermutlich in einem falschen Pfad im TypoScript oder in einer fehlenden BaseURL-Angabe. Wichtig ist zum Beispiel die Zeile config.baseURL = http://typo3.localhost/, wobei du natürlich deine eigene URL eingeben musst. Im Template muss das CSS mit einem absoluten Pfad eingebunden werden ().

          Schau auch mal nach, ob du im TypoScript vielleicht Anführungszeichen um die Pfade gesetzt hast, die dürfen nämlich nicht da sein!

          Pascal schrieb am

          Ich konnte den Fehler eingrenzen. Er zeigt mir jetzt meine Schriften an und formatiert diese auch aber, er zeigt mir die Bilder aus dem ../images-Ordner nicht an. Er zeigt mir z.B oben links in der Ecke das „Theme Wall“ an, aber das Bild nicht. Den Footer kann ich auch schon sehen.
          Kann es sein, dass ich in der Konfiguration von Typo3 was übersehen habe?

          Lars Ebert schrieb am

          Schau mal, ob bei dir im Quellcode beim Logo oben rechts im Quellcode der Pfad stimmt, bei mir steht [html]<img src="/fileadmin/templates/main/images/logo.png" alt="ThemeWall" id="logo">[/html]

          Pascal schrieb am

          Komisch, der Pfad taucht auf und stimmt auch

          Lars Ebert schrieb am

          Dann ruf diesen Pfad mal händisch im Browser auf, vielleicht ist RealURL ja falsch konfiguriert oder die Datei existiert nicht. Hast du die Ordner denn auch genau so benannt?

Tom schrieb am Antworten

Hey vielen Dank für das Tutorial.
Habe soweit alles verstanden und umgesetzt.
Allerdings wird im Frontend auf der Startseite statt den Links zu den Seiten „Impressum“ und „Kontakt“ nur „###FOOTER_MENU_ITEMS###“ angezeigt. Auf allen anderen Seiten sind diese aber vorhanden. Wenn ich mir die erste Unterseite (Startseite) im Backend ansehe werden die Links ebenfalls angezeigt. Auf der Wurzelseite erscheint nur der Marker. An was kann das liegen? Der Verweis scheint zu funktionieren, da in der URL die richtige ID steht.

    Tom schrieb am Antworten

    Oke hat sich erledigt, jetzt wird es aus heiterem Himmel angezeigt 😀
    Lag vielleicht am Cache oder so

    Trotzdem Danke.

Sascha Zippel schrieb am Antworten

Ich habe schon echt viele 3T Anfänger Tutorials gelesen, aber das ist das Beste was ich dazu gefunden habe. Vielen Dank für das Tutorial!

Pascal schrieb am Antworten

Hi!
Zuerst einmal: Schönes Tutorial, gefällt mir sehr und erleichtert auch den Einstieg.
Nur habe ich ein Problem und ich komme verflixt nochmal nicht drauf, wieso.
Ich bin bei Seite 5 Schritt 7. Ich schreib alles schön in den Head usw, wie Du es eben erklärt hast. Nur wenn ich dann im FrontEnd schaue, hat sich an der Schriftart/Hintergrund rein gar nichts verändert. Den Cache habe ich bestimmt auch schon 20 Mal gelöscht.

Hast Du noch nen Tipp für mich ?

LG

    Lars Ebert schrieb am Antworten

    Schau mal im Quellcode des Frontends, was dir Typo3 generiert, nach, ob dort die besagten Header-Zeilen zu finden sind. Wenn ja, fehlt wahrscheinlich einfach die CSS-Datei oder der Pfad ist falsch. Wenn nicht, liegt es am TypoScript und du solltest schauen, ob du alle Marker im Template gesetzt hast und ob das TypoScript auch richtig ist.

Lars Ebert schrieb am Antworten

Hallo Stephan, vielen Dank für dein liebes Feedback! Es freut mich, dass mein Tutorial dir gefallen hat. Ich werde auch weiterhin fleißig Tutorials schreiben, wenn mir die Themen nicht ausgehen 😉

Santini schrieb am Antworten

Vielen Dank erst mal für das geniale Tutorial! Endlich habe ich mal verstanden, was es mit der 10 auf sich hat und wieso zur Hölle das eigentlich alles funktioniert 🙂

Aber ein paar Fehler sind mir aufgefallen, über die andere sicher auch schon gestolpert sind. Wenn du die noch behebst, ist das Tutorial echt perfekt!

– Schritt 6 – Verwirrendes Update
Kurz vor Ende des Abschnitts steht in fetter Schrift „Wichtiges Update“ mit einigen Informationen. Diese Infos wurden aber bereits im zweiten Absatz des gleichen Abschnitts mit korrekten Bezeichnungen gegeben. So, wie es jetzt da steht, verwirrt es einfach nur, weil man eine englische Oberfläche vor sich hat, nun das Tutorial aus dem Deutschen ins Englische übersetzen muss und dann Dinge tun soll, die man doch vorher schon getan hat. Ich würde das einfach raus löschen.

– Schritt 7 – Einbinden des Headers:
Du schreibst da tollen Typoscript Code zusammen, der dann später mittels headerData.10 < temp.docHead eingebunden wird. Leider schreibst du nicht dazu, wo man die Definition von headerData hin schreiben soll (nämlich auch in Setup). Beim Body hast du das sehr gut verständlich zusammen in einen Code-Block gepackt, sodass es klar war. Mach das doch einfach auch mit dem Header, dann versteht das jeder.

– Irgendwo ist mir auch noch ein Tippfehler aufgefallen. Aber das ist nicht so tragisch, weil du (was ich besonders erfreulich finde) ansonsten durchgängig sehr sauber geschrieben hast. Alleine dafür muss man ja heutzutage schon einen Extrapunkt vergeben. Quasi eine 1 mit Sternchen 🙂

Karsten schrieb am Antworten

Hey vielen Dank für die Mühe die in dieses Tutorial gesetzt wurde.
Mir als Einsteiger in Typo3 hat es sehr geholfen in das System reinzukommen.

Gruß

Karsten

janik schrieb am Antworten

klasse Tut. um mal einen ersten Einblick zu bekommen, es müsste mehr sowas geben….Fein * * * * *

Clemens schrieb am Antworten

Hey,

vielen Dank für diese sehr gut gelungene Tutorial. Endlich mal eine wirklich vollstädnige und verständliche Anleitung. Werde damit demnächst mal meine erste Typo3 Seite von Grund aus aufbauen.

Viele Grüße
Clemens

Klaus schrieb am Antworten

Hallo, habe deine Site gefunden und wollte mich ein bisschen schlau mit Typoscript machen. Leider bin ich auf einige Schwierigkeiten gestossen. Ich arbeite mit Mac und Mamp, ich hoffe, das ändert nichts an der Vorgehensweise.

Bis zum Schritt 5 finde ich alles sehr verständlich und nachvollziehbar, danach bei Schritt 6 taucht auch schon ein erstes Verständnisproblem auf:

„In unserem TypoScript-Setup — wir erreichen es, indem wir wieder das Template-Modul auswählen und dann auf unsere Seite klicken — können wir jetzt mit folgendem Script auf unseren Inhalt zugreifen.“

Dann wird dieser Code abgebildet:

„page = PAGE
page.10 < styles.content.get“

Jetzt bin ich im TypoScript-Setup, weiss aber nicht, ob ich diese Zeilen hineinkopieren muss oder sollten diese Zeilen durch das includieren des CSS-Styled-Content dort schon sichtbar sein?

Bei Schritt 7 habe mir also die Vorlage geholt und dann ins Typo3 unter fileadmin/templates kopiert. Den Main-Ordner musste ich vorher noch erstellen, damit der Pfad mit dem vorgegebenen übereinstimmt.

Jetzt geht es weiter mit Theorie, wobei mir nicht klar wird, wo die Theorie beginnt wo sie aufhört.

Der nächste Code-Text den du mit Markern ergänzt hast beginnt mit

7 Startseite » ThemeWall
8
9
10

Leider weiss ich schon ab hier nicht mehr, wohin dieser Text kopiert gehört oder ob etwas ersetzt wird.
Du schreibst zwar am Anfang dieses Kapitels:„In die Template-Datei müssen wir jetzt so genannte Marker einbauen.“ Ist denn die „Template-Datei“ die Index-Datei, die ich von deinem Beispiel „psd2html“ importiert habe?

Gehört jetzt dieser Code-Text in den HTML-Text vom Index kopiert oder ins TypoScript-Setup?

Allgemein wäre ich froh, wenn dieser Teil, wenigstens für mich, ein bisschen verständlicher ausgeführt wird, was wohin kopiert oder ersetzt werden soll.

Vielleicht hast du noch Lust darauf einzugehen.

Danke im voraus, Klaus

Chris schrieb am Antworten

Hallo Lars,
als erstes dein Tutorial ist einfach Klasse, vielen Dank dafür an dieser Stelle.
Auch ich fand die ganzen Beispiele mit TemplaVoila verwirrend vor allem da wir vor dem Problem stehen ein System zu übernehmen ohne TemplaVoila. So werden die Basics klar und man bekommt ein gutes Grundverständnis für Typo3.

Zum Problem von Pascal ich bin am gleichen Punkt fast verzweifelt, vorerst hatte ich einen
Workaround mit:
page {
includeCSS.file001 = fileadmin/templates/main/css/style.css
...
}

geschaffen. Problem war auch bei mir das es erst garnicht im Quellcode eingebunden wurde.
Grund dafür sind vermutlich komische cashing Zustände die auch ich nicht ganz verstanden
habe. Ein weiteres Problem ist dann aber noch der „/“ in der index.html.

LÖSUNG:
Den ersten „/“ vor „fileadmin“ in der index.html entfernen.
„/fileadmin/templates/main…“ zu
„fileadmin/templates/main“

dann klappts auch mit dem Logo und natürlich dem Häuschenlogo für die Homeseite.

Ein weiteres Problem dessen Lösung ich noch nicht kenne ist dass das Menü, wär hätte es gedacht, im IE vertical statt horizontal angezeigt wird. FireFox machts richtig. Frage ist das normal das der IE das zerschießt und wenn ja welchen Workaround gibts dafür?

Gruß
Chris

Verena schrieb am Antworten

Hey. Klasse Tutorial! Es hat zwar hier und da mal ein wenig was gehakt, aber im Endeffekt klappt alles! Echt super, herzlichen Dank!

B79 schrieb am Antworten

Danke! Endlich ein gutes Tutorial für ein Blank Package statt die selbsterklärenden Dummy-Seiten zu beschreiben.

    Lars Ebert schrieb am Antworten

    Ich war am Anfang auch nicht angetan von diesen doofen Dummy-Seiten. Wenn man von Anfang an alles selbst macht, wird man irgendwann extrem flexibel mit Typo3 arbeiten können. Danke für deinen Kommentar!

      Kathrin schrieb am Antworten

      Hallo Lars,
      toller Beitra, toller Blog – einziges Mako: TYPO3 schreibt man groß, wie BMW oder PHP….

        Lars Ebert schrieb am Antworten

        Hallo Kathrin, danke für das Lob und den Hinweis. Diese (falsche) Schreibweise hat sich bei mir irgendwie eingebürgert und ist jetzt schwer wieder los zu werden.

moin schrieb am Antworten

Hallo,

erstmal danke.

Ich stecke gerade bei Schritt7. wenn ich folgendes in setup schreibe, verändert sich nichts im frontend, obwohl ich den cache leere. woran kann das liegen?

temp.docHead = TEMPLATE
temp.docHead {
template = FILE
template.file = fileadmin/templates/main/index.html
workOnSubpart = DOCUMENT_HEADER
}
# Default PAGE object:
page = PAGE
page {
headerData = COA
headerData.10 < temp.docHead
10 < styles.content.get
}

    Lars Ebert schrieb am Antworten

    Ist der Pfad korrekt? Schau mal im Quellcode des Frontends nach, ob wenigstens im Head etwas zu sehen ist. Hast du das CSS-Styled-Content-Template in dein Template (über Ressourcen) eingebunden?

    Hast du einen Demo-Link?

Randy schrieb am Antworten

Beide Daumen hoch!!
Ich hasse Typo3, muss mich aber arbeitstechnisch immer wieder damit auseinander setzen. Und obwohl ich nun schon eine Weile mit verschiedenen Typo Projekten arbeite, ist mir einiges immer noch unklar.
Dieses Schritt für Schritt Tutorial ist wunderbar, um mal wirklich bei 0 anzusetzen und kein unnötiges Geschwafel zu ertragen, dass in anderen Tutorien oder Lernvideos immer wieder vorkommt. Anstatt hier alles endlos zu definieren, wird direkt mit den Punkten begonnen, die man braucht und nicht mehr. Von daher finde ich es auch gut, mal ohne TemplaVoila zu starten.
Hätte ich das Tutorial früher entdeckt, hätte ich mir viele graue Haare erspart 🙂

    Lars Ebert schrieb am Antworten

    Danke für dein positives Feedback. Ich habe mich eben am Anfang durch all das »Geschwafel« und die Definitionen wühlen müssen und fand das äußerst unproduktiv. So ist dann später, als ich schon einen relativ guten Überblick hatte, dieses Tutorial enstanden.

    Es freut mich, dass dir das Tutorial auch etwas bring. Danke für deinen Kommentar!

Dennis schrieb am Antworten

Vielen Dank für dieses Tutorial, endlich verstehe ich etwas mehr über Templates in Typo3.
Ich habe mir schon so manche Webseite darüber angesehen aber hier versteht man es wirklich viel besser

Bella schrieb am Antworten

Hallo Zusammen,

erstmal Danke für das tolle Tutorial. Leider verzweifel ich gerade an Schritt 7. Ich habe alles nach Anleitung erstellt, aber die Seite wird einfach nicht angezeigt d.h. typo3 greift nicht auf die index.html-Datei zu. Der Content wird angezeigt aber nicht das Seiten-Styling (die Seite ist weiß mit meinem bereits erstellten Inhalt).

Grundsätzlich habe ich auch ein Problem mit der Index.html-Datei. Wenn ich die Variable temp.docHead so wie beschrieben abändere,
(
)

dann greift die index.datei nicht mehr auf das stylesheet zu. D.h. wenn ich mir die index-Datei über Firefox anzeigen lasse, dann ist das gesamte Styling weg.
Woran liegt das? Kann hier das Prblem liegen?

Ich hoffe sehr, dass mir jemand helfen kann,
Vorab vielen Dank für die Antworten.

Gruß Bella

Leila schrieb am Antworten

Hallo! Vielen lieben Dank für dieses übersichtliche Tutorial . Es ermöglicht einen einfachen Start ins Typo3-Abenteuer! Liebe Grüße!

fabian schrieb am Antworten

bei mir wird das das obere menu nur auf der Startseite(index.php) angezeigt auf index.php? id 3,4 nicht.
Zudem wird das Footer menu garnicht angezeigt,
Kann jemand von euch bitte das funktionierende Typoscript hohladen oder auch mir per Mail schicken? wäre euch sehr dankbar, Das tutorial ist super für Anfänger mit Typo3 wie mich, jedoch finde ich diese Typoscript sprache ein wenig anders als das Html und css mit dem ich mich eher vertraut fühle.

Vielen Dank für eure Hilfe

moe schrieb am Antworten

Hallo Lars, vielen Dank für dieses ausführliche und schön gemachte Tutorial.
Besser hätte man das wirklich nicht machen können.

LG aus Kärnten 🙂

Dominique schrieb am Antworten

Hallöchen!

Danke für das Tutorial, hat mir als absoluter TYPO3-Anfängerin sehr geholfen!

Ich hatte allerdings für das Tutorial ein eigenes Design benutzt und bin fast in Schritt 7 verzweifelt, als meine CSS-Datei nicht übernommen werden wollte. Mir ist erst später klargeworden, dass es an dem relativen Pfad liegt, den ich beim Einbinden benutzt habe, da (korrigier mich, wenn ich da falsch liege, ich rate ja nur) TYPO3 den Pfad kopiert und als Ausgangsordner den Überordner von fileadmin nutzt.
Das ist mir allerdings erst aufgefallen, als ich mir den Pfad aus deinem Beispiel genauer angesehen hatte.

Wäre schön, wenn du das noch als Hinweis für die, die das erste Tutorial übersprungen haben, erwähnen würdest 😀

chris schrieb am Antworten

Hallo Lars

Ich möchte dir mal ein großes Kompliment aussprechen.

Da ich mich beruflich jetzt zwangsläufig mit Typo3 beschäftigen muss, bin ich nach längerer Suche auf diese Seite hier aufmerksam geworden. Ich hatte vorher einige „Einsteiger-Tuts“ durch und muss sagen, nachdem ich deines durch habe, habe ich es wirklich VERSTANDEN. Also nicht nur Script-Kiddi-mäßig (STRG+c / STRG+V).

Alles ist sehr sinnvoll mit einem roten Faden durchzogen, sodass man, falls mal etwas nicht funktioniert, sofort nachvollziehen kann, warum nicht.

Großes Lob und großen Respekt an dich!

Beste Grüße
Chris

Julian schrieb am Antworten

Erstmal: Vielen Dank für dieses Tutorial! Ich bin mittlerweile schon am Verzweifeln, weil ich mit TYPO3 meine Schwierigkeiten habe…

Viele haben ja Probleme mit Schritt 7. Ich gebe zu, auch ich habe da eine halbe Stunde mit verbacht den Fehler zu finden -.- Was vielleicht nicht allen klar ist, dass im Setup folgendes steht:
temp.docHead = TEMPLATE
temp.docHead {
template = FILE
template.file = fileadmin/templates/main/index.html
workOnSubpart = DOCUMENT_HEADER
}
temp.docBody = TEMPLATE
temp.docBody {
template = FILE
template.file = fileadmin/templates/main/index.html
workOnSubpart = DOCUMENT_BODY
marks {
# Hier müssen wir den Inhalt für die zu ersetzenden Marker angeben.
HEADING = TEXT
# So können wir in TypoScript auf Eigenschaften einer Seite, in diesem Fall den Titel, zugreifen.
HEADING.field = title
CONTENT < styles.content.get
}
}
# Default PAGE object:
page = PAGE
page {
headerData = COA
headerData.10 < temp.docHead
10 < temp.docBody
}

Ich weiß nicht genau, ob das richtig ist, aber es funktioniert auf jeden Fall 😀

dominic schrieb am Antworten

hi, wenn ich den head part in mein setup template kopiere, ändert sich weder die schriftart, noch die hintergrundfarbe, auch nach reseten des caches… was könnte ich falsch gemacht haben?

Felix schrieb am Antworten

Hallo Lars!
Vielen Dank für das tolle Tutorial, es ist wirklich gut erklärt. Zu Beginn habe ich überlegt das Template mit FLUID zu erstellen. Da ich mich dort aber nicht zurecht gefunden habe (gibt keine so guten Tutorials dazu wie deins hier zur „klassischen Marker-Methode“), habe ich es auf deine Weise gemacht. Es wäre sehr cool, wenn du einen Blog zu der „neuen“ Fluid Methode machen könntest.
Eine Frage habe ich bezüglich des Templates:
Kann man diesen Part nicht einfach weglassen, oder übersehe ich da was:?
page = PAGE
page {
headerData = COA
headerData.10 < temp.docHead
10 < styles.content.get
}

Er wird ja später durch den hier überschrieben:
page = PAGE
page {
headerData = COA
headerData.10 < temp.docHead
10 < temp.docBody
}

Gruß,
Felix

Benjamin schrieb am Antworten

Schönes Tutorial!

Ein, zwei Sachen musste ich ein wenig anpassen, da das Tutorial ja schon etwas älter ist, aber im Groben Ganzen funktioniert es noch! Vielen Dank für die Mühe!

Joe schrieb am Antworten

Danke für dieses Handbuch. Bestimmt ist es inhaltlich gut für neue User, aber spätestens bei den Erklärungen zu Typoscript ist mir klargeworden, das ist nicht mein Programm. Da bleibe ich lieber bei Joomla, welches wesentlich einfacher ist, auch, wenn es einige Macken hat. Aber lieber mit Macken leben als mich mit Programmcode zu quälen.

Joni schrieb am Antworten

Tolles Tutorial! Ich hoffe, dass es immer noch aktuell ist. Ich denke, dass du mir ziemlich geholfen hast mal typo3 grundsätzlich zu verstehen. Noch habe ich nur eine leere Installation von typo3, aber ich hoffe, dass es sich nach dem ich das Tutorial nochmal gelesen habe verändert…

Diese Artikel könnten dir auch gefallen