TYPO3 Tutorial - Der Einstieg - TYPO3 Einführung

Exzellenter Artikel
6 | 139548 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "TYPO3 Tutorial - Der Einstieg - TYPO3 Einführung" mit Ihrem Wissen!

Diese umfangreiche TYPO3-Einführung zeigt Ihnen Schritt für Schritt die wichtigsten Grundlagen des Content-Management-Systems und erläutert Ihnen wie Sie schnell und einfach TYPO3 selbst installieren.

Was ist TYPO3?

null

TYPO3 ist ein Open-Source-Content-Management-System, welches 1998 auf dem Markt erschienen ist und von Kasper Skårhøj entwickelt wurde.

TYPO3 kann mit derzeit über 3000 Plugins (besser bekannt als Extensions) erweitert werden. Darunter diverse Shop-Erweiterungen, Foren, Newssysteme und vieles mehr.

Anzeige Hier werben

TYPO3 installieren

Um TYPO3 benutzen zu können, benötigt man einen Webserver (APACHE etc.) und einen Datenbankserver. In der aktuellen TYPO3-Version wird mindestens PHP 5.1.0 benötigt, besser 5.2.x. Für die Datenbank kann dank DBAL MySQL, PostgreSQL, Oracle und viele andere verwendet werden.

Ratsam aber nicht zwingend erforderlich ist auch darauf zu achten, das auf dem Server ImageMagick vorhanden ist.

Wer dies alles abkürzen möchte, kann auf fertige Pakete von TYPO3 zurückgreifen, die bereits einen Webserver beinhalten. Dazu bitte ich euch unter folgender URL zu schauen: http://typo3.org/download/installers/

Windows

Da ich keinerlei Erfahrungen habe, wie man einen Windowsserver administriert, gehe ich von einer "Heim-Anwendung" aus. Das heißt, ich werde hier kurz erklären wie man anhand von XAMPP ein kleinen "Homeserver" online setzt und dort mit TYPO3 arbeiten kann.

1. XAMPP installieren

Es ist vollkommen ausreichend wenn wir XAMPP Lite installieren. Folgender Link leitet euch auf die Webseite von XAMPP weiter und lässt euch zwischen verschiedenen Version wählen. Ich empfehle das selbstextrahierende ZIP-Archiv (EXE).

Nachdem ihr XAMPP installiert habt, müssen wir nun zuerst ein paar Einstellungen in der php.ini (Konfigurationsdatei für PHP) vornehmen, um TYPO3 bestmöglich zum laufen zu bringen.

Bei mir ist XAMPP unter dem Pfad "c:\xampplite\" zu finden. Dies kann natürlich bei euch abweichen, deswegen vorher kontrollieren. Der Pfad zu der Konfigurationsdatei ist bei mir "c:\xampplite\apache\bin".
In diesem Ordner solltet ihr die php.ini mit einem beliebigen Texteditor öffnen und folgende Werte wie folgt ändern:

 
Text
1
2
# Zeile 246
memory_limit = 64M

Habt ihr dies getan, könnt ihr die Datei speichern und schließen. Falls euer Webserver bereits laufen sollte, müsst ihr diesen neustarten.

2. XAMPP starten und aufräumen

Wir sind nun soweit und können XAMPP das erste mal starten. Dazu ruft ihr in eurem XAMPP-Ordner einfach die Datei "xampp-control" auf und klickt bei Apache und MySql auf "Start". Nach kurzer Zeit sollte, in Grün hinterlegt, eine Meldung mit "Running" erscheinen.

Wir öffnen nun unseren Browser und tippen in der Adresszeile "http://localhost" ein. Ihr solltet jetzt eine Testseite von XAMPP sehen.

Sicherheitsrelevanter Hinweis

Ich gehe nicht davon aus das XAMPP bei euch vorwiegend online genutzt wird und werde somit nicht auf weitere Maßnahmen eingehen, die euer XAMPP "sicher" vor äußeren Einwirkungen macht.

Da wir diesen ganzen Kram nicht brauchen, gehen wir kurzerhand in unser XAMPP-Verzeichnis und leeren (nicht löschen!) den Ordner "htdocs" vollständig. Nachdem das getätigt wurde, können wir uns der TYPO3 Installation widmen.

3. TYPO3 installieren & konfigurieren

Wir besorgen uns jetzt zuerst einmal TYPO3 unter folgender Adresse: http://typo3.org/download/packages/. Dort wählen wir das Paket "Source with Dummy site ZIP" in der aktuellen Stable Version (4.2.1, Stand: 24. September 2008).
Nach dem Download entpacken wir das Archiv und kopieren den Inhalt des Ordners "typo3_src+dummy-4.2.1" (Kann je nach Version abweichen) in unser "htdocs"-Verzeichnis von XAMPP.

Bild zu TYPO3 Tutorial - Der Einstieg - TYPO3 Einführung
Installation, Step by Step

Wir öffnen nun wieder unseren Browser und tippen dort "http://localhost" ein. Jetzt sollte der 3-Step Installation Assistent von TYPO3 erscheinen.

Im ersten Schritt fragt uns TYPO3 nach unseren Zugangsdaten für die Datenbank. Wenn ihr daran nichts geändert habt, sollte der Benutzername "root" sein und das Password kann leer bleiben. Unter Host kann "localhost" drinnen stehen bleiben.

Ein Klick auf "Continue" führt uns zu Schritt 2, wo wir eine Datenbank auswählen können. Da wir noch keine Datenbank angelegt haben, tippen wir in dem Unterpunkt 2 - Create new database - "typo3" ein und klicken danach wieder auf Continue.

In Schritt 3 werden wir aufgefordert eine Datei für den Import zu wählen. Da wir über keine andere Datei als die Standard-Datei verfügen, können wir hier alles so stehen lassen wie es ist und mit einem Klick auf "Import database" den letzten Schritt abschließen.

TYPO3 hat jetzt für uns alle relevanten Einstellungen getätigt und bereits einen Adminzugang mit den Benutzername "admin" und dem Passwort "password" angelegt. Mit einem Klick auf "Go to the backend login" könnt ihr euch mit den oben genannten Logindaten in das Backend von TYPO3 einloggen.

Linux

Ich gehe bei der Installation unter Linux bereits von einem lauffähigen Webserver aus. Ich möchte euch unter Linux nur die Möglichkeit zeigen, wie ihr mit Symlinks schnell mehrere TYPO3-Installationen anlegen könnt, mit nur einem Source-Paket.

Mehrere Projekte mit einer "TYPO3-Installation" hosten

Das Backend von TYPO3

null
Aufbau der Module

Das Backend von TYPO3 erreicht man normalerweise über den Unterordner "typo3" im Hauptverzeichnis. Beispiel: "http://www.example.com/typo3".

Nach dem erfolgreichen Login stehen einem eine Vielzahl an Modulen zur Verfügung. Die in TYPO3 integrierten Module sind den Kategorien Web, Datei, User Tools, Admin Tools & Hilfe untergeordnet.

Anmerkung zum Screenshot:
Die abgebildeten Module können von euren abweichen. Je nach installierter Extension können neue Module oder Kategorien hinzukommen.

Web

In der Kategorie Web sind alle Module die zur Bearbeitung der Seite nötig sind. Darunter stehen einem auch Hilfsfunktionen bzw. Module zur Verfügung, die das erstellen bzw. bearbeiten von Seiten und/oder Inhalten vereinfachen.

Seite

An erster Stelle sitzt das "Seite"-Modul. Über dieses Modul können Inhalte gepflegt werden. Auf meinem Screenshot seht ihr in dem Icon ein kleines "TV" stehen, dies bedeutet das ich TemplaVoilà benutzte. Im normalen "Seite"-Modul ist das Icon ein wenig anders.

In der normalen Ansicht gibt es standardmäßig 4 Spalten. Diese Spalten teilen sich in den einzelnen Regionen der Seite auf und können frei im Template belegt werden.

null
Ansicht des Seiten-Moduls

Um die Bereiche Links, Normal, Rechts und Rand dem Template zuzuweisen, bedarf es ein wenig TypoScript.

Marker dem Template zuweisen  
Text
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
seite = PAGE
seite.typeNum = 0
seite.config.doctype = xhtml_trans
seite.stylesheet = fileadmin/templates/stylesheet.css


seite.1 = TEMPLATE
seite.1 {
    template = FILE
    template.file = fileadmin/templates/index.html
    workOnSubpart = DOKUMENT
    
    # Linke Spalte
    marks.LINKS < styles.content.getLeft
    # Inhalt (mittlere Spalte)
       marks.INHALT < styles.content.get
       # Header (In TYPO3 "Border" genannt)
    marks.HEADER < styles.content.getBorder
    # Rechte Spalte
    marks.RECHTS < styles.content.getRight
}

In dem einfachen Beispiel werden die Marker einfach über "marks._name_ < styles.content.get_Spalte_" definiert. Im Template selber werden die Bereiche dann einfach via "###NAME###" zugeteilt.

 
HTML
1
2
3
4
5
6
<div id="wrap">
    <p id="header">###HEADER###</p>
    <div id="left">###LINKS###</div>
    <div id="right">###RECHTS###</div>
    <div id="content">###INHALT###</div>
</div>

Hat man TemplaVoilà im Einsatz, dann orientiert sich die Ansicht des "Seite"-Modul an das Template bzw. der Konfiguration in der Datenstruktur vom Template.

null
Ansicht des Seiten-Moduls mit TemplaVoilà

So kann man einfach und schnell Bereiche für sein Template einrichten und individuell mit Inhalten bestücken. Eines der großen Vorteile von TemplaVoilà. Auch verschachtelte Boxen sind möglich, Flexible-Content-Elements (FCE) genannt.

null
Seiten-Modul mit TemplaVoilà und FCE
Anzeigen

Das "Anzeigen"-Modul beinhaltet eine Vorschau der Webseite. Mit einem Klick auf das Modul erscheint wie gewohnt der Seitenbaum und man kann dann auf eine Seite klicken um sich diese dann direkt anzuschauen.

Wer genauer hinschaut, dem fallen die kleinen Stifte auf. Mit einem klick auf diese, kann man die Inhalte zusätzlich bearbeiten. Das ganze funktioniert auch wenn man die Webseite normal aufruft und gleichzeitig im Backend angemeldet ist.

Liste

Über das Listen-Modul kann man sich alle Inhalte einer ausgewählten Seite übersichtlich anzeigen lassen. Wenn man die erweiterte Listenansicht, über die am Seitenende befindliche Checkbox, aktiviert hat, kann man schnell und einfach seine Inhalte Verwalten.

null
Erweiterte Listenansicht
null
Normale Listenansicht

Auch ein Clipboard, für schnelles Kopieren oder Verschieben von mehreren Seiten, steht einem zur Verfügung.

Info

Das Info-Modul beherbergt Funktionen wie etwa eine Seitenbaum-Übersicht, eine Übersetzungs-Übersicht (für mehrsprachige Webseiten) und ein ausführliches Log (wer hat wann welche Seite geändert).

Viel gibt es hier nicht zu erklären, da heißt es eher ... einfach mal reinschauen und durchklicken.

Der aufmerksame Leser werden jetzt sagen, da gibt es aber noch ein paar Reiter mehr. Das ist korrekt aber die anderen Module gehen schon etwas weiter in die Materie und da dies ein Einsteiger-Tutorial ist, brauchen wir diese nicht und sind für uns lange Zeit erstmal uninteressant.

Zugriff

Über das Zugriff-Modul kann man einzelnen Seiten/Sysfolder (etc.) bestimmte Gruppen und/oder Benutzer zuweisen. Dies macht dann Sinn, wenn man mehrere "normale" (das heißt, nicht "Admin"-User) Backendbenutzer hat und diesen bestimmte Seiten zum verwalten zuweisen möchte. Der Backendbenutzer, sofern kein "Admin"-User, kann ausschließlich die Seiten verwalten, die ihm zugewiesen sind.

Bild zu TYPO3 Tutorial - Der Einstieg - TYPO3 Einführung
Übersicht der vergebenen (Seiten-)Rechte
Bild zu TYPO3 Tutorial - Der Einstieg - TYPO3 Einführung
Seiten-Rechte (rekursiv) bearbeiten
Bild zu TYPO3 Tutorial - Der Einstieg - TYPO3 Einführung
Seiten-Rechte nach der Bearbeitung
Funktionen

Hier findet ihr ein paar Hilfsfunktionen die euch TYPO3 bereitstellt. So könnt ihr über den Punkt "Mehrere Seiten erzeugen" bis zu 9 Seiten auf einmal anlegen. Ein weiterer Hilfspunkt ist die Funktion "Seiten sortieren". Mit dieser könnt ihr Seiten nach bestimmten Kriterien (Erstellungszeit, Name etc.) einfach und schnell sortieren.

Versionierung

In TYPO3 gibt es von Haus aus 2 "Arbeitsebenen". Einmal die "LIVE-Arbeitsumgebung" (diese ist Standardmäßig aktiviert) und die "Entwurfsarbeitsumgebung". Über den Menüpunkt Versionierung kann man jetzt alle Änderungen innerhalb der Arbeitsumgebungen koordinieren und publizieren. Besonders dann interessant wenn viele Personen an einer Webseite arbeiten.

Bild zu TYPO3 Tutorial - Der Einstieg - TYPO3 Einführung
Quick-Menü im Backend

Die Arbeitsebene könnt ihr jederzeit im Backend oben Rechts ändern.

Template

In diesem Abschnitt könnt ihr Seiten ein "Template" zuweisen. Dies hat jetzt aber nicht unbedingt viel mit einem Seitentemplate, sprich einer HTML-Vorlage zu tun. Ihr könnt hier vielmehr diverse Einstellungen über TypoScript tätigen und bestimmte Dinge koordinieren.

Extensions

Mit über 3000 Extensions kann man seine TYPO3 Seite individuell mit den verschiedensten Modulen erweitern. Ich möchte euch jetzt ein paar Extensions vorstellen, die ich selber sehr oft benutze.

Der erste Weg zu Extensions geht über typo3.org. Hier findet man im Extension-Repository aktuelle und geprüfte Extensions, aber auch welche, die noch in Alpha- und Betaphase sind. Jede Person kann ein Update und eine eigene Extension hochladen, dafür ist aber schon ein wenig Erfahrung und Praxis mit TYPO3 erforderlich.

Extensions haben bei TYPO3 einen "key", also einen eindeutigen Namen. Nach diesem "Extension Key" kann man dann im TER (TYPO3 Extension Repository) suchen oder direkt über das Interface in TYPO3.

TemplaVoila! (templavoila)

Einfach und schnell äußerst flexible Templates erstellen. Dies ist mit TemplaVoila möglich. Zwar gibt es auch eine "Template-Engine" in TYPO3 aber diese ist längst nicht so flexibel wie TemplaVoila. Ich kann nur jeden raten, der sich ernsthaft mit TYPO3 auseinandersetzen will, sich unbedingt TemplaVoila anzuschauen.

News (tt_news)

Rupert Germann hat mit tt_news die am meisten installierte Extension für TYPO3 geschrieben. Sie umfasst ein vollständiges Newssystem mit Suche, automatischer Archivierung, Kategorien und RSS-Feeds. Ein ausgereiftes Codedesign und die hohe Anpassbarkeit mit CSS zeichnet tt_news (wie auch viele andere Extensions) aus.

RealUrl (realurl)

Mit Hilfe von RealUrl ist es möglich, die üblichen, benutzerfeindlichen URLs von TYPO3 "umzuwandeln". So wird z.B. aus "http://www.webmasterpro.de/index.php?id=54?l=2" die URL "http://www.webmasterpro.de/deutsch/ueberuns". Auch für relativ Unerfahrene leicht zu installieren.

Die erste eigene Seite

Unser Ziel ist es eine kleine fiktive Firmenseite zu erstellen. Damit das alles ein wenig flüssiger von statten geht, habe ich ein Layout mit den benötigten HTML- & CSS-Dateien vorbereitet. Ich schlage vor, ihr downloadet es euch einfach mal und macht das alles Schritt für Schritt mit. Danach könnt ihr einfach mal versuchen euer Layout in TYPO3 umzusetzen.

Anmerkung: Dieses Layout habe ich für einer meiner Extensions verwendet und brauche es nicht mehr. Deswegen nicht über die Kopfgrafik und so wundern. Ich war zu faul das ganze jetzt „neutraler“ zu gestalten.

Entpackt alles und kopiert es einfach in euer TYPO3-Verzeichnis. Ihr solltet dann folgenden Verzeichnisbaum vorfinden:

+ TYPO3
+- fileadmin
++- templates
++- css
++- grafik
++- typoscript
++ index.html

Nachdem unsere Verzeichnisse alle vorhanden sind, können wir uns jetzt im TYPO3-Backend einloggen.

TYPO3 vorkonfigurieren

Ich gehe von einer frischen TYPO3-Installation aus. Von daher haben wir noch keine Extension installiert und noch keine Seiten etc. angelegt.

Backend auf Deutsch stellen

Der erste Schritt führt uns direkt in den Extension Manager (Admin tools -> Ext. Manager). Dort angekommen, wählen wir im Dropdown-Menü „Translation handling“ aus. Wir wählen „German“ aus und klicken auf „Save selection“. Danach ein weiterer Klick auf „Update from repository“ und wir haben TYPO3 erst einmal Deutsch beigebracht. Nun müssen wir TYPO3 nur noch auf Deutsch stellen, dies tun wir indem wir auf den Menüpunkt User settings (User tools → User settings) klicken. Dort wählen wir unter „Language“ nun German aus. Mit einem Klick auf „Save Configuration“ sollte TYPO3 jetzt auf Deutsch gestellt sein.

Seitenstruktur anlegen

Im nächsten Schritt wollen wir unseren Seitenbaum anlegen. Der Seitenbaum spiegelt die Webseiten im Frontend wieder. Wir klicken zuerst auf Funktionen (Web -> Funktionen) im Menü und machen dann ein Rechtsklick auf den einzigen Eintrag im mittleren Frame („New TYPO3 site“). In dem dann erscheinenden Context-Menü wählen wir „Neu“ aus, klicken dann im rechten Frame unter Neuer Datensatz auf „Seite (in)“ und füllen das nun folgende Formular wie folgt aus.

Wählt man im Gegenzug den Assistent aus, kann man im nächsten Schritt die Seitenposition bestimmen. Das ist besonders hilfreich, wenn man viele Seiten bereits angelegt hat.

Als Typ wählen wir „Verweis“ aus und bestätigen mit „Ok“. Das Häkchen bei „Seite verbergen“ nehmen wir raus, schließlich soll unsere Webseite ja sichtbar sein. Unter Seitentitel könnt ihr euch selber etwas ausdenken, ich habe „TYPO3 Webseite“ genommen. Mit einem Klick oben auf die Diskette speichern wir die Seite ab und gehen zurück zur letzten Seite.

Da wir uns immer noch im Funktionen-Modul befinden, klicken wir jetzt auf die eben erstellte Seite im Seitenbaum. Wir sehen jetzt 9 Eingabe-Felder, die nur darauf warten, ausgefüllt zu werden. Dies tun wir jetzt auch und legen somit unseren kleinen Seitenbaum in Sekundenschnelle an. Ich habe mich für folgende Struktur entschieden. Ich empfehle euch für dieses Tutorial erst einmal die gleiche zu nehmen.

Bild zu TYPO3 Tutorial - Der Einstieg - TYPO3 Einführung
Mehrere Seiten auf einmal erzeugen

Haben wir die Felder ausgefüllt, klicken wir nun auf „Seiten anlegen“ und bestätigen wieder mit „Ok“. Im mittleren Frame klicken wir nun auf das Plus neben unseren Seitenbaum, um die so eben erstellen Unterseiten anzuzeigen.

Wir müssen jetzt noch einmal die erste Seite bearbeiten um die Struktur der Seite zu komplettieren. Wir machen also einen Rechtsklick auf die Seite „TYPO3 Webseite“ (ggf. bei euch anders) und wählen im Context-Menü „Seiteneigenschaften bearbeiten“ aus. Da wir den Seitentyp als Verweis festgelegt haben, brauchen wir selbigen, sonst führt die Seite ins Nirvana. Wir gehen also oben auf den Reiter „Verweis“ und klicken Rechts neben der Box auf den Ordner. Wir sehen nun noch einmal unseren Seitenbaum und können jetzt eine Einstiegsseite festlegen. Da dies bei uns die Startseite ist, wählen wir diese mit einem Klick aus. Jeder der jetzt auf unsere Webseite geht, gelangt sofort auf den Menüpunkt „Startseite“.
Nun müssen wir noch zum Reiter „Optionen“ und klicken dort unter „Allgemeine Datensatzsammlung„ auf den Ordner neben dem Eingabe-Feld. Wir wählen dann im Pop-Up die Seite „Template“ aus. Dies ist nötig, damit die Seite weiß, wo sie später das Seiten-Template findet. Wir speichern jetzt wieder die Seite über die Diskette ab und haben damit unsere Struktur festgelegt.

Wie schon angesprochen, wird die Unterseite „Template“ später unsere Seiten-Vorlage beherbergen. Bevor sie das aber kann, müssen wir diese Seite noch einmal bearbeiten. Wir machen also einen Rechtsklick auf die Seite „Template“ und klicken auf „Seiteneigenschaften bearbeiten“. Hier müssen wir nur den Typ der Seite auf „SysOrdner“ stellen und dies mit „Ok“ bestätigen.

SysOrdner sind bestimmte Seitentypen in dem unterschiedliche Typen von Datensätzen abgespeichert werden können.

Kommen wir nun zum Seiten-Template!

Template mit TemplaVoilà erstellen

Ich gehe extra nicht auf die „normale“ Template-Erstellung ein, sondern zeige euch direkt den Weg über TemplaVoilà (im weiteren Verlauf mit TV abgekürzt). Dies ist zwar der etwas längere (und vielleicht auch schwierigere) Weg aber auch der in meinen Augen effektivste Weg. Ihr werdet früher oder später alle bei TemplaVoilà landen, also warum nicht gleich damit anfangen und richtig lernen.

TV Installieren

Zuerst müssen wir natürlich TV installieren. Dazu gehen wir auf den Erweiterungs-Manger (Admin-Werkzeuge -> Erw-Manager) und wählen oben im Dropdown-Menü „Import extension“ aus. Ein Klick auf „Retrieve/Update“ speichert die Extension-Liste auf den Server und ermöglicht ein schnelleres abrufen der Extensions im späteren Verlauf. Im Suchfeld tippen wir nun „TemplaVoila“ ein und klicken auf „Look up“. In der Liste sollte nun die Extension (Version 1.3.7, Stand: 28.12.08) erscheinen. Mit einem Klick auf das Icon mit der weißen Seite und dem Pfeil, installieren wir die Extension. Im nächsten Bildschirm wird uns mitgeteilt, dass die Extension erfolgreich heruntergeladen wurde und kann nun in TYPO3 aktiviert werden. Dies machen wir mit einem einfachen Klick auf „Install extension“.

Der Extension-Manager müsste uns nun darauf aufmerksam machen, dass einige Abhängigkeiten fehlen. In diesem Fall wird die Extension „static_info_tables“ noch benötigt. Wir installieren diese also mit einem Klick auf „Import now“. Nach der Bestätigung klicken wir nun noch einmal auf „Install extension“ und uns wird angezeigt, dass die Extension noch ein paar Datenbanktabellen anlegt. Wir scrollen nun ganz nach unten und segnen dies mit einem Klick auf „Make updates“ ab. Dieses Fenster kann nun über „Close window and recheck dependencies“ geschlossen werden.

TV will nun natürlich auch noch ein paar Tabellen anlegen und bereits vorhandene bearbeiten. Dies wird uns nun mitgeteilt und wartet darauf bestätigt zu werden. Wir scrollen wieder runter und klicken auf „Make updates“ um den ganzen Prozess abzuschließen.

Der aufmerksame Beobachter wird nun mitgekriegt haben, das sich in unserer Backend-Navigation das Icons von „Seite“ grafisch geändert hat und ein neues mit Namen „TemplaVoilà“ hinzugekommen ist.

TV-Template erstellen

Wir gehen nun in das „Liste“-Modul (Web -> Liste) und wählen im Seitenbaum die Seite „Template“ aus. Mit einem Klick auf das Icon im oberen Bereich, erstellen wir einen neuen Datensatz. Wir wählen dann in der Liste „TemplaVoilà Datenstruktur“ aus. Im nächsten Schritt füllen wir das Feld „Titel“ mit „Template (Datenstruktur)“, stellen die Kategorie auf „Seiten Vorlage“ und speichern dies wieder mit einem Klick auf die Diskette ab.

Nun klicken wir erneut auf das Icon um einen neuen Datensatz zu erstellen (das ganz obere) und wählen diesmal „TemplaVoilà Template Objekt“ aus. Als Titel vergeben wir „Template“ und unter Dateireferenz fügen wir „fileadmin/templates/index.html“ ein. Als Datenstruktur wählen wir die eben erstellte aus. Das ganze speichern wir jetzt ab und haben schon einmal das Gerüst für unser Seiten-Template erstellt.

Wir müssen jetzt das Template in einzelne Bereiche aufteilen und TV sagen, wo die einzelnen Inhalte erscheinen sollen. Dazu klicken wir jetzt auf „TemplaVoilà“ (Web -> TemplaVoilà), stellen sicher das wir immer noch die Seite „Template“ ausgewählt haben und sollten dann folgenden Inhalt sehen:

Bild zu TYPO3 Tutorial - Der Einstieg - TYPO3 Einführung

Wir klicken nun auf „Review“ und danach auf „Modify DS / TO“. Mit einem Klick auf „Clear all“ sollte jetzt ein neuer Eintrag mit Namen „Root“ erscheinen. Wir klicken jetzt bei dem Eintrag unter Action auf „Map“, wählen danach unter „Mapping Window“ HTML Source aus und klicken im HTML-Code ganz oben auf dem schwarz hinterlegten „<body>“. Mit einem Klick auf „Set“ bestätigen wir die Auswahl und haben TV gesagt, dass sich die Seiten-Elemente alle innerhalb dieses Body-Tags befinden.

Wir müssen nun 4 weitere Elemente anlegen. Dies habe ich jetzt in ein Video gepackt, welches die erforderlichen Schritte kurz zeigt. Ich gehe gleich näher auf jedes Element ein.

Link zum Video

Die Elemente „Inhalte“ und „Rechte Spalte“ sind so genannte „Content Elements“, in diesen kann man über das „Seite“-Modul dynamisch Inhalte eingefügt werden. „Hauptmenü“ und „Untermenü“ sind dagegen „TypoScript Object Path“. Wie man sich vielleicht schon denken kann, kann man diese über TypoScript ansteuern.

Wir müssen nun noch das Template unserer Hauptseite, „TYPO3 Webseite“ zuordnen. Alle Unterseiten erben automatisch dieses Template. Wir klicken nun also mit der rechten Maustaste auf die Seite im Seitenbaum und wählen „Seiteneigenschaften bearbeiten“. Unter dem Reiter „Erweitert“ wählen wir nun in den zwei Dropdown-Menüs unser angelegtes TV-Template aus. Es sollte dann in etwa so bei euch aussehen:

Bild zu TYPO3 Tutorial - Der Einstieg - TYPO3 Einführung
Seiten-Template für das TypoScript anlegen

Nachdem wir alle Elemente in TV festgelegt haben, kommen wir zum TypoScript. Wir klicken im Seitenbaum auf die Seite „TYPO3 Webseite“ und wählen das Modul „Template“ (Web -> Template) aus. Ein weiterer Klick auf „Create template for a new site“ erstellt uns nun ein Seiten-Template für diese Seite. In dem Dropdown-Menü oben wählen wir jetzt „Info/Modify“ aus und klicken ganz unten auf „Click here to edit whole template record“.

Das Formular füllen wir nun wie folgt aus. „Template-Titel“ kann so bleiben. In „Web-Site-Titel“ können wir ein Titel für die Webseite eingeben, welcher im Browser dann immer oben angezeigt wird. Hier geben wir einfach mal „Unsere TYPO3-Seite“ ein. Unter „Konfiguration“ löschen wir zuerst den Inhalt und fügen dann diese Zeilen hinzu:

TypoScript  
HTML
1
2
3
4
# CLEANING
<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/templates/typoscript/cleaning.txt"> 
# CONFIGURATION
<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/templates/typoscript/config.txt">

Dies bewirkt einfach, dass der Code aus den angegebenen Dateien ausgelesen wird.

Als nächstes widmen wir uns dem Reiter „Enthält“. Dort wählen wir unter „Statische einschließen“ die Elemente „content (default)“ und „cSet (default)“ aus. Unter „Statische einschließen (aus Erweiterungen)„ wählen wir „CSS Styled Content“ aus. Wir speichern den Datensatz mit einem Klick auf die Diskette und schauen uns mal die Dateien an, die wir oben im TypoScript angegeben haben.

Cleaning.txt

Diese Datei räumt erstmal gewaltig den HTML-Code auf den TYPO3 produziert. Es sorgt dafür das überflüssige Kommentare, die sonst im HTML auftauchen, verschwinden und optimiert den HTML-Code dahingehend, dass die Seite weites gehend Barrierefrei und „valide“ gestaltet werden kann.

Config.txt

Diese Datei ist das eigentliche Herz der Seite. Hier werden die in TV angelegten Platzhalter zugewiesen. Öffnet die Datei einfach mal mit einem Editor, die Zeilen sind dokumentiert. Ab hier sind dann Kenntnisse in TypoScript nötig. Es lässt sich aber alles relativ einfach nachvollziehen und mit ein bisschen ausprobieren steigt man wirklich sehr schnell dahinter. Am Ende dieses Artikels habe ich weiterführende Links eingefügt, die mehr Beispiele für TypoScript zeigen.

Jetzt wird es Zeit für die ersten Inhalte.

Inhalte einpflegen

Wir gehen jetzt im Seitenbaum auf unsere „Startseite“ und wählen das Modul „Seite“ aus (Web -> Seite). Ihr solltet dann in etwa folgendes sehen:

Bild zu TYPO3 Tutorial - Der Einstieg - TYPO3 Einführung

Wir sehen hier eine genaue Abbildung von unserem TV-Template. Wir haben hier zwei Spalten, „Inhalte“ und „Rechts“. In meiner Abbildung seht ihr bereits, dass ich in der „Inhalte“-Spalte Text mit Bild habe. Das ganze wollen wir jetzt natürlich nachholen. Ihr klickt einfach in der „Inhalte“-Spalte auf das Icon mit dem Plus () und wählt im nächsten Schritt „Text mit Bild“ aus. Wenn ihr euch jetzt mal 5 Minute nehmt und das folgende Formular ein wenig studiert, könnt ihr sehen wie simpel es ist, Inhalte ein zu pflegen.

Im Reiter „Allgemein“ vergeben wir zuerst eine Überschrift für unseren „Artikel“.

Scrollt nach ganz unten und setzt ein Häkchen in „Zweite Optionspalette anzeigen“. Dies ermöglicht euch, individueller euren Inhalt zu gestalten. Ihr habt dann mehr Optionen. Zum Beispiel könnt ihr dann bei den Überschriften zwischen verschiedenen Layouts wählen (<h1>,<h2>,<h3> etc.).

Danach wechseln wir auf den Reiter „Text“ und schreiben unsere Information in den WYSIWYG-Editor. Jetzt wechseln wir auf „Medien“ und können ein Bild auswählen, welches wir in den Artikel stellen wollen. Dazu können wir entweder die Festplatte durchsuchen oder wir klicken Rechts auf den Ordner bei dem Auswahlfeld und wählen ein bereits hoch geladenes Bild aus.

Alles was ihr irgendwann mal wieder auf der Seite verwenden wollt, solltet ihr immer in den „fileadmin“-Ordner innerhalb von TYPO3 speichern. In TYPO3 kann jederzeit darauf zugegriffen werden und in eure Inhalte eingepflegt werden.

Der „Medien“-Bereich setzt sich aus mehreren „Ebenen“ zusammen. Ganz oben ist die Bilder-Ebene, in der wir unser Bild ausgesucht haben. Darunter befindet sich die „Position“-Ebene, zu der wir jetzt kommen. In der „Position“-Ebene können wir die Position vom Bild wählen. Außerdem können wir einen Bilderrahmen hinzufügen oder (sofern vorhanden) mehrere Bilder Spaltenweise aufteilen. Direkt unter der „Position“-Ebene befindet sich die „Bildmaße“-Ebene. In dieser können wir die Größe des Bildes festlegen. Man kann entweder die Höhe und Breite fest angeben oder wir geben nur eine Höhe an und lassen das Bild proportional dann von der Breite anpassen, vollkommen automatisch. Das ganze geht natürlich auch anders herum. In der „Bild-Links“-Ebene können wir das Bild intern oder extern verlinken. Darüber hinaus können wir auch das Bild sich mit einem klick vergrößern lassen. Die restlichen Felder sind selbsterklärend und können ausprobiert werden!

Mit einem Klick auf die Diskette speichern wir den Datensatz ab und haben unseren ersten Inhalt in unsere Seite eingepflegt. Herzlichen Glückwunsch!

Wenn wir uns die Seite mal im Frontend anschauen, können wir uns das Ergebnis betrachten. Es sollte in etwa wie bei mir ausschauen:

Bild zu TYPO3 Tutorial - Der Einstieg - TYPO3 Einführung

Weiterführende Webseiten

Offizielle Webseiten

Communities

Blogs


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 7 Personen an der Seite "TYPO3 Tutorial - Der Einstieg - TYPO3 Einführung" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "TYPO3 Tutorial - Der Einstieg - TYPO3 Einführung" hier bearbeiten.