SlideShare ist ein Scribd-Unternehmen logo
Eine Website in einer Stunde mit TYPO3 bauen

TYPO3 hat den Ruf eines komplizierten CMS. Einerseits zurecht, denn es ist ein sehr mächtiges CMS mit
unzähligen Möglichkeiten. Jedoch kann man mit wenigen gezielten Erweiterungen und etwas Know-How
sehr schnell ein Projekt umsetzen. Hier wird gezeigt wie man in einer Stunde eine HTML-Vorlage einbindet
und die Website mit Navigation, wartbaren Inhalten und Volltextsuche erstellt.




Inhaltsverzeichnis
Eine Website in einer Stunde mit TYPO3 bauen................................................................................................ 1
Vorbereitungen.................................................................................................................................................... 2
Seiten anlegen....................................................................................................................................................   2
Erweiterungen laden und installieren.................................................................................................................. 3
Templavoila vorbereiten...................................................................................................................................... 4
Ordner für HTML-Dokumente anlegen und hochladen....................................................................................... 5
Eine Templavoila-Seitenvorlage erstellen........................................................................................................... 6
Die Seitenvorlage zuweisen.............................................................................................................................. 10
Typoscript Template erstellen............................................................................................................................ 11
Navigationen mit Typoscript erstellen............................................................................................................... 13
Inhalte einfügen................................................................................................................................................. 14
Volltextsuche einrichten..................................................................................................................................... 15
Ein Suchfeld auf allen Seiten............................................................................................................................ 17
Weitere Informationen....................................................................................................................................... 18




                                                                                                                                         WEBprofil – Gernot Ploiner e.U.
                                                                                                                       Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich
                                                                                                T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
Vorbereitungen

Bevor man mit diesem Handbuch zu arbeiten beginnt, sollte man folgendes vorbereiten:
    •   einen Webserver, idealerweise mit LAMP (Linux, Apache, MySQL, PHP). Genaue
        Serveranforderungen finden Sie auf typo3.org.
    •   TYPO3 fertig installieren und konfigurieren
        Alternativ gibt es auf www.mittwald.de ein kostenloses TYPO3 Testhosting für 30 Tage. Dies kann
        selbstverständlich auch kostengünstig angemeldet werden.
    •   Empfehlung: Deutsche Übersetzung für das Backend laden (Einloggen und dann unter
        Extensionmanager → Translations), ändern des Admin-Benutzer- und Installtoolpasswortes



Seiten anlegen

Zu allererst legt man ein paar Seiten im Seitenbaum an. Dies funktioniert im Modul Seite. Dort kann eine
neue Seite über das Kontextmenü oder klick auf das Seitensymbol oberhalb des Seitenbaumes und dann
mit Drag&Drop erstellt werden.
Man nennt die erste Seite Startseite. Danach legt man eine zweite Seite vom Typ System an und nennt
diese Vorlagen. Weitere Hauptmenüpunkte können nach Belieben unter der Startseite angelegt werden.




                                                                                                   WEBprofil – Gernot Ploiner e.U.
                                                                                  Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich
                                                              T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
Erweiterungen laden und installieren

Für dieses Projekt benötigen wir die folgenden TYPO3-Erweiterungen: templavoila (in Abhängigkeit
static_info_tables), indexed_search und um einen Bug in Templavoila 1.7.0 zu beheben phpmyadmin.
Die Extensions werden im Modul Erweiterungen und dort im Reiter Erweiterungen importieren auf den
eigenen Server geladen. Die Erweiterung indexed_search ist hier ausgenommen. Sie ist eine
Systemerweiterung und wurde bereits mit der TYPO3-Installation mitgeliefert.
Vor dem ersten Importvorgang muss die aktuelle Extensionliste vom typo3.org Server geladen werden. Dies
geschieht mit dem Icon rechts neben der Selectbox Bibliothek. Das Herunterladen kann ein paar Minuten
dauern. Danach kann jede benötigte Extension im Suchfeld gesucht und mit dem Icon am Zeilenanfang
importiert werden. In Folge kann die Erweiterung gleich installiert werden. Man braucht lediglich den
Schritten des Assistenten folgen.




                                                                                                    WEBprofil – Gernot Ploiner e.U.
                                                                                   Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich
                                                               T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
Templavoila vorbereiten

Nach der Installation muss noch eine Einstellung für Templavoila getätigt werden. Es muss in den
Seiteneigenschaften der Startseite die allgemeine Datensatzsammlung eingestellt werden (die Seite
System). Die erfolgt über das Kontextmenü der Startseite → Bearbeiten.
In Folge wird im Reiter Ressourcen die Seite gewählt. Weiters sollte im Reiter Verhalten die Checkbox Als
Anfang der Website benutzen aktiviert werden.




                                                                                                   WEBprofil – Gernot Ploiner e.U.
                                                                                  Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich
                                                              T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
Ordner für HTML-Dokumente anlegen und hochladen

Als nächster Schritt wird am Server ein Ordner für die HTML-Vorlagen samt CSS- und Bilddateien angelegt.
Dies geschieht in der Dateiliste. Dort wird über das Kontextmenü des Ordners fileadmin ein neuen
Unterordner mit dem Namen templates angelegt.
Danach wählt man diesen Ordner durch anklicken aus und lädt via Kontextmenü die Dateien vom lokalen PC
aus hoch.




                                                                                                  WEBprofil – Gernot Ploiner e.U.
                                                                                 Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich
                                                             T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
Eine Templavoila-Seitenvorlage erstellen

Nun ist alles vorbereitet um die erste Seitenvorlage zu erstellen. Man wählt dazu (immer noch in der
Dateiliste) über das Kontextmenü den Eintrag Templavoila. Danach erscheint die Maske zum Definieren von
dynamischen Feldern. Hiermit werden Bereiche der statischen HTML-Vorlage mit verschiedensten
Elementen ersetzt.




In dieser Maske wird zuerst der Root-Knoten bestimmt. Dies ist der Bereich der für unsere Seitenvorlage
verwendet werden soll. Dies ist in der Regel der Inhalt des BODY-Tag, da das HTML-Gerüst herum (HTML /
HEAD / BODY) von TYPO3 generiert wird. Um dies zu bewerkstelligen, klickt man auf die Schaltfläche
Abbilden und wählt dann in der HTML-Vorschau den sichtbaren BODY-Tag durch Klick darauf aus. In Folge
bestimmt man, ob man den Inhalt des gewählten Tags (INNER), oder das HTML inklusive des Tags
(OUTER) in der Vorlage haben möchte. Mit Festlegen wird dies bestätigt.


                                                                                                   WEBprofil – Gernot Ploiner e.U.
                                                                                  Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich
                                                              T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
Danach werden dynamische Felder für Navigation, Subnavigation, Inhalt usw. angelegt. Also für all dies was
aus der HTML-Vorlage genommen werden soll und vom CMS befüllt werden soll.
Dazu füllt man das Eingabefeld mit einem eindeutigen Namen und bestätigt mit Add. In Folge befüllt man
das Formular mit Titel und wählt den Elementtyp.




                                                                                                  WEBprofil – Gernot Ploiner e.U.
                                                                                 Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich
                                                             T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
Für Navigationen verwendet man immer den Typ Typoscript-Objektpfad. Nach dem Bestätigen mit
Hinzufügen wechselt man im linken kleinen Menü auf TypoScript und bestätigt den Vorschlag lib.xxx mit
aktualisieren. Dies ist auch dann unbedingt notwendig, wenn der Objektpfad nicht verändert wird! Ansonsten
wird der Name nicht gesetzt und es wird keine Ausgabe auf der Website geben (hohe Fehlerquelle !!!)




Mit Abbilden wird nun zum Abschluss der HTML-Bereich in der Vorlage bestimmt, wo die Navigation platziert
werden soll. Dieses Abbilden funktioniert genau gleich wie beim Root Knoten zuvor. Hier wird allerdings der
HTML-Tag, welcher die Navigation umschließt, gewählt.
In Folge werden weitere Felder für Subnavigation und Inhaltsbereich angelegt. Für Inhaltsbereiche wählt
man die Voreinstellung: Seite – Inhaltselemente [Pos.: 0]




Zum Abschluss speichert man die Vorlage mit der Schaltfläche Speichern unter. Mit Titel DS/VO gibt man der
Vorlage einen sprechenden Namen, damit der Redakteur später weiß welche Vorlage er einstellt.
Mit der Schaltfläche DS/VO Erstellen wird die Vorlage endgültig gespeichert.
Achtung: Wird der Browser zuvor geschlossen geht die Arbeit verloren! Die Vorlagenerstellung ist bis zu
diesem Zeitpunkt nur in der Browsersession gespeichert.




                                                                                                   WEBprofil – Gernot Ploiner e.U.
                                                                                  Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich
                                                              T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
Da das HTML-Grundgerüst inkl. HEAD Bereich von TYPO3 generiert wird, fehlt nun die Einbindung von
CSS- und Javascript-Dateien. Dies wird nun nachgeholt. Dazu wechselt man in das Modul Templavoila. Im
Seitenbaum wird die Seite Vorlagen gewählt. Nun erscheinen rechts die angelegten Seitenvorlagen (derzeit
eine). Dort klickt man auf Abbildung aktualisieren.




In Folge kann man alle in der Vorlage existierenden Headerzeilen durch aktivieren der jeweiligen Checkbox
übernehmen. Mit Speichern und Zurück muss dieser Schritt noch bestätigt werden.




                                                                                                  WEBprofil – Gernot Ploiner e.U.
                                                                                 Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich
                                                             T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
Die Seitenvorlage zuweisen

Die Seitenvolrage ist nun fertig erstellt und gespeichert. Es können auf diesem Weg mehrere Vorlagen für
verschiedene Designs oder Bedürfnisse (verschiedene Inhaltsspalten und Strukturen) angelegt werden.
Was nun noch fehlt ist die Zuordnung zum Seitenbaum → Welche Vorlage soll wo verwendet werden.
Dies geschieht in den Seiteneigenschaften einer jeden Seite. Zuerst beginnt man am besten mit der
Startseite. Dort wählt man in den Seiteneigenschaften den Reiter Erscheinungsbild und stellt bei Vorlagen-
Design benutzen und Unterseiten – Vorlagen-Design benutzen die erstellte Vorlage ein. Natürlich ist dies je
nach belieben und ggf. auch auf weiteren Unterseiten Projektspezifisch zu definieren.




                                                                                                   WEBprofil – Gernot Ploiner e.U.
                                                                                  Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich
                                                              T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
Typoscript Template erstellen

Bisher haben wir nur im Backend gearbeitet. Eine Vorschau im Frontend liefert bisher immer nur
Fehlermeldungen. Damit die Ausgabe auch klappt, muss zwingend ein TypoScript Template erstellt werden.
Hier wird definiert was am Frontend ausgegeben werden soll. Ohne dieser Definition weiß TYPO3 nicht
welche Art der vielen Möglichkeiten für die Ausgabe verantwortlich ist.
Dazu wechselt man in das Modul Template. Im Seitenbaum wählt man danach die oberste Seite im
Seitenbaum – in diesem Beispiel ist das die Startseite. Dort wird mit Template für neue Seite erstellen ein
sogenanntes Typoscript Template erstellt.




Wechselt man oben in der Selectbox zu Info/Bearbeiten, muss noch mit Klick auf Vollständigen Template-
Datensatz bearbeiten ein vordefiniertes TypoScript für die Inhaltsausgabe eingebunden werden.




Dazu wählt man im Reiter Enthält in der obersten Selectbox den Eintrag CSS Styled Content aus. Dieser
wandert nach dem Klick nach links.




                                                                                                    WEBprofil – Gernot Ploiner e.U.
                                                                                   Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich
                                                               T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
Mit speichern und beenden (Diskette oben mit X Icon) wird diese Einstellung gespeichert.
Klickt man in Folge auf den Bleichstift neben Setup das Typoscript einsehen und bearbeiten.




Diese 4 Zeilen werden automatisch von der Extension Templavoila eingefügt und sind dafür verantwortlich,
dass Templavoila für die Frontendausgabe konfiguriert ist.
Ab nun kann das Frontend begutachtet werden. Es fehlen aber immer noch die Navigationen. Dies ist der
nächste Schritt.
Falls die Frontendausgabe nicht funktioniert, kann dies am Cache liegen, der jederzeit Problemlos oben mit
dem gelben Blitz-Icon gelöscht werden kann.




                                                                                                  WEBprofil – Gernot Ploiner e.U.
                                                                                 Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich
                                                             T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
Navigationen mit Typoscript erstellen

Mit dem nachfolgenden TypoScript wird die beim Vorlagen-erstellen konfigurierte Hauptnavigation generiert.

Ausgenommen davon sind die ersten 3 Zeilen (config usw). Diese definieren den Doctype mit HTML5.

lib.field_navigation ist der Name der bei der Vorlagenerstellung in Templavoila vergeben wurde. Dieser wird
nun mit TypoScript befüllt. Eine ausführliche TypoScript-Dokumentation welche diese Zeilen erläutert findet
man unter:

http://typo3.org/documentation/document-library/ oder deutsch unter: http://www.typo3.net/tsref/




Auch die Subnavigation wird ähnlich beschrieben:




                                                                                                    WEBprofil – Gernot Ploiner e.U.
                                                                                   Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich
                                                               T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
Inhalte einfügen

Nun ist es an der Zeit die Website mit Content zu befüllen.
Dies geschieht mit dem Modul Seite. Hier wählt man im Seitenbaum die zu befüllende Seite und in Folge
klickt man auf das grüne Icon mit dem Plus-Symbol im Hauptbereich.




Nun kann man aus verschiedenen Elementen wählen (Experimentieren erlaubt ;-)




Ein angelegter Inhalt kann so aussehen:




                                                                                                   WEBprofil – Gernot Ploiner e.U.
                                                                                  Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich
                                                              T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
Volltextsuche einrichten

Die Volltextsuche indexed_search ist bereits mit an Board und muss nur noch installiert werden. Dies erledigt
man unter Erweiterungen im Reiter Verfügbare Erweiterungen.




Nach der Installation ist eine neue Seite im Seitenbaum nötig, auf der das Suchergebnis angezeigt wird.
Diese Seite wird in den Seiteneigenschaften im Menü versteckt angezeigt, damit man sie nicht direkt (leer)
aufrufen kann.




                                                                                                   WEBprofil – Gernot Ploiner e.U.
                                                                                  Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich
                                                              T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
Diese Seite wird in Folge mit einem Inhaltselement vom Typ Allgemeines Plugin befüllt.




Damit die Suche aktiviert wird (genauer gesagt das indizieren), ist eine weiter Typoscript-Zeile erforderlich:
page.config.index_enable = 1




Nun muss zum indizieren das Frontend (jede einzelne Seite) aufgerufen werden. Dann kann die Suche
schon verwendet werden.




                                                                                                     WEBprofil – Gernot Ploiner e.U.
                                                                                    Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich
                                                                T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
Ein Suchfeld auf allen Seiten.

Bisher ist die Suche noch eine eigene (versteckte) Seite. Um ein Suchfeld auf allen Seiten (Menüpunkten)
anzubieten, legt man ein neues Typoscript-Objektpfad Feld in der Seitenvorlage an.
Eine Vorlage kann unter Templavoila → Vorlagen → Abblidung aktualisieren und in Folge DS/VO
modifizieren bearbeitet werden.




Hier legt man ein neues Feld (field_suche) vom Typ TypoScript-Objektpfad an – genauso wie beim Erstellen
der Vorlage.
Zuletzt wird nochmals das TypoScript erweitert, welches das Formular-HTML ausgibt:




                                                                                                  WEBprofil – Gernot Ploiner e.U.
                                                                                 Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich
                                                             T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
Weitere Informationen

Wenn Sie mehr über TYPO3 lernen möchten, besuchen Sie unsere Website www.typo3kurse.de. Wir bieten
laufend Kurse in Deutschland, Österreich und in der Schweiz an. Für Einsteiger, TypoScript Neulinge oder
TYPO3-Extensionprogrammierer.
Unter www.typo3kurse.de/gutschein erhalten Sie bis 23.09.2012 einen EUR 50,00 Gutschein, den Sie bis
Jahresende für alle Kurse bei uns buchen können.
Bei weiteren Fragen stehen wir Ihnen jederzeit zur Verfügung. Gerne stehen wir Ihnen bei TYPO3-Projekten
zur Seite – kontaktieren Sie uns über unsere Firmenwebsite www.webprofil.at


Wir hoffen Ihnen einen guten Einblick in dieses mächtige CMS gegeben zu haben.
Vielen Dank für Ihre Aufmerksamkeit.
Gernot Ploiner




                                                                                                  WEBprofil – Gernot Ploiner e.U.
                                                                                 Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich
                                                             T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com

Weitere ähnliche Inhalte

Andere mochten auch

Actividad evaluactiva
Actividad evaluactiva Actividad evaluactiva
Actividad evaluactiva
saragonzalezalzate
 
Jesús de nazaret
Jesús de nazaretJesús de nazaret
Jesús de nazaret
luisacayo
 
Yeye
YeyeYeye
Yeye
JENIFER
 
Ratgeber für Investoren - Doing Business in Poland
Ratgeber für Investoren - Doing Business in Poland Ratgeber für Investoren - Doing Business in Poland
Ratgeber für Investoren - Doing Business in Poland
JP Weber sp. z o.o.
 
2014 NJ Tech Talent
2014 NJ Tech Talent 2014 NJ Tech Talent
2014 NJ Tech Talent kazeco
 
HALCON VIAGENS ENTRONCAMENTO
HALCON VIAGENS ENTRONCAMENTOHALCON VIAGENS ENTRONCAMENTO
HALCON VIAGENS ENTRONCAMENTO
Halcon Viagens Entroncamento
 
Méndez mika 1º 3 trabajo final
Méndez mika 1º 3 trabajo finalMéndez mika 1º 3 trabajo final
Méndez mika 1º 3 trabajo final
PabloPereira
 
Recuperatorio tp1
Recuperatorio tp1Recuperatorio tp1
Recuperatorio tp1
Patricia Ferrer
 
Beneficios
BeneficiosBeneficios
Beneficios
Ez Success
 
Sant jordia les brases
Sant jordia les brasesSant jordia les brases
Sant jordia les brasesada
 
Diapositivas de matematicas1
Diapositivas de matematicas1Diapositivas de matematicas1
Diapositivas de matematicas1
davidmonsaoso29
 
Notre classe
Notre classeNotre classe
Notre classe
School
 
Chequeo Medico (Con Musica)
Chequeo Medico (Con Musica)Chequeo Medico (Con Musica)
Chequeo Medico (Con Musica)
cirorojas
 
Proyecto 2 sustentación
Proyecto 2 sustentaciónProyecto 2 sustentación
Proyecto 2 sustentación
annie249
 
Presentación del proyecto
Presentación del proyectoPresentación del proyecto
Presentación del proyecto
tania1701
 
Webs de vocabulario - Mis cosas favoritas
Webs de vocabulario - Mis cosas favoritasWebs de vocabulario - Mis cosas favoritas
Webs de vocabulario - Mis cosas favoritas
Mtra.
 
Las aves
Las avesLas aves
Las aves
chony82
 

Andere mochten auch (20)

Actividad evaluactiva
Actividad evaluactiva Actividad evaluactiva
Actividad evaluactiva
 
Car accidents no comment
Car accidents no commentCar accidents no comment
Car accidents no comment
 
Blogue mauricie
Blogue mauricieBlogue mauricie
Blogue mauricie
 
Jesús de nazaret
Jesús de nazaretJesús de nazaret
Jesús de nazaret
 
Yeye
YeyeYeye
Yeye
 
Ratgeber für Investoren - Doing Business in Poland
Ratgeber für Investoren - Doing Business in Poland Ratgeber für Investoren - Doing Business in Poland
Ratgeber für Investoren - Doing Business in Poland
 
2014 NJ Tech Talent
2014 NJ Tech Talent 2014 NJ Tech Talent
2014 NJ Tech Talent
 
Le patrimoine
Le patrimoineLe patrimoine
Le patrimoine
 
HALCON VIAGENS ENTRONCAMENTO
HALCON VIAGENS ENTRONCAMENTOHALCON VIAGENS ENTRONCAMENTO
HALCON VIAGENS ENTRONCAMENTO
 
Méndez mika 1º 3 trabajo final
Méndez mika 1º 3 trabajo finalMéndez mika 1º 3 trabajo final
Méndez mika 1º 3 trabajo final
 
Recuperatorio tp1
Recuperatorio tp1Recuperatorio tp1
Recuperatorio tp1
 
Beneficios
BeneficiosBeneficios
Beneficios
 
Sant jordia les brases
Sant jordia les brasesSant jordia les brases
Sant jordia les brases
 
Diapositivas de matematicas1
Diapositivas de matematicas1Diapositivas de matematicas1
Diapositivas de matematicas1
 
Notre classe
Notre classeNotre classe
Notre classe
 
Chequeo Medico (Con Musica)
Chequeo Medico (Con Musica)Chequeo Medico (Con Musica)
Chequeo Medico (Con Musica)
 
Proyecto 2 sustentación
Proyecto 2 sustentaciónProyecto 2 sustentación
Proyecto 2 sustentación
 
Presentación del proyecto
Presentación del proyectoPresentación del proyecto
Presentación del proyecto
 
Webs de vocabulario - Mis cosas favoritas
Webs de vocabulario - Mis cosas favoritasWebs de vocabulario - Mis cosas favoritas
Webs de vocabulario - Mis cosas favoritas
 
Las aves
Las avesLas aves
Las aves
 

Ähnlich wie Eine Website in einer Stunde mit TYPO3 bauen, Gernot Ploiner

Backendlayout mit FLUID-Templates
Backendlayout mit FLUID-TemplatesBackendlayout mit FLUID-Templates
Backendlayout mit FLUID-Templates
Marcus Schwemer
 
Typo3 4.3 Die Neuerungen im Überblick
Typo3 4.3 Die Neuerungen im ÜberblickTypo3 4.3 Die Neuerungen im Überblick
Typo3 4.3 Die Neuerungen im Überblick
die.agilen GmbH
 
XING learningZ Event: Umfangreiche Dokumente effizient formatieren
XING learningZ Event: Umfangreiche Dokumente effizient formatierenXING learningZ Event: Umfangreiche Dokumente effizient formatieren
XING learningZ Event: Umfangreiche Dokumente effizient formatieren
Digicomp Academy AG
 
TYPO3 CMS 6.1 - Die Neuerungen - typovision GmbH
TYPO3 CMS 6.1 - Die Neuerungen - typovision GmbHTYPO3 CMS 6.1 - Die Neuerungen - typovision GmbH
TYPO3 CMS 6.1 - Die Neuerungen - typovision GmbH
die.agilen GmbH
 
TYPO3: Extension news
TYPO3: Extension newsTYPO3: Extension news
TYPO3: Extension news
NicolaiSch
 
TYPO3 CMS 7.5 - Die Neuerungen - pluswerk
TYPO3 CMS 7.5 - Die Neuerungen - pluswerkTYPO3 CMS 7.5 - Die Neuerungen - pluswerk
TYPO3 CMS 7.5 - Die Neuerungen - pluswerk
die.agilen GmbH
 
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerkTYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
die.agilen GmbH
 
XPages - The Basics
XPages - The BasicsXPages - The Basics
XPages - The Basics
Ulrich Krause
 
TYPO3 CMS 7.4 - Die Neuerungen - pluswerk
TYPO3 CMS 7.4 - Die Neuerungen - pluswerkTYPO3 CMS 7.4 - Die Neuerungen - pluswerk
TYPO3 CMS 7.4 - Die Neuerungen - pluswerk
die.agilen GmbH
 
Dnug35 ak-dev.071111-basic
Dnug35 ak-dev.071111-basicDnug35 ak-dev.071111-basic
Dnug35 ak-dev.071111-basic
Ulrich Krause
 
Contao und CSS
Contao und CSS Contao und CSS
Contao und CSS
Peter Müller
 
Handbuch Energiekostenverwaltung TSEnergie 5
Handbuch Energiekostenverwaltung TSEnergie 5Handbuch Energiekostenverwaltung TSEnergie 5
Handbuch Energiekostenverwaltung TSEnergie 5
Thomas Schoessow
 
FMK2014: Ein Warenwirtschaftssystem, das mit Scannern, Waagen und Mitarbeiter...
FMK2014: Ein Warenwirtschaftssystem, das mit Scannern, Waagen und Mitarbeiter...FMK2014: Ein Warenwirtschaftssystem, das mit Scannern, Waagen und Mitarbeiter...
FMK2014: Ein Warenwirtschaftssystem, das mit Scannern, Waagen und Mitarbeiter...
Verein FM Konferenz
 
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerkTYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
die.agilen GmbH
 
FCE ohne TemplaVoila
FCE ohne TemplaVoilaFCE ohne TemplaVoila
FCE ohne TemplaVoila
Tobias Liegl
 
IHRE IBM LOTUS NOTES-DATEN AN JEDEM ORT ZU JEDER ZEIT 3/3
IHRE IBM LOTUS NOTES-DATEN AN JEDEM ORT ZU JEDER ZEIT 3/3IHRE IBM LOTUS NOTES-DATEN AN JEDEM ORT ZU JEDER ZEIT 3/3
IHRE IBM LOTUS NOTES-DATEN AN JEDEM ORT ZU JEDER ZEIT 3/3
We4IT Group
 
Medien Kombinat Meet Magento 05022009
Medien Kombinat Meet Magento 05022009Medien Kombinat Meet Magento 05022009
Medien Kombinat Meet Magento 05022009dasmedienkombinatde
 
Communote 3.0 - Quick Start Guide
Communote 3.0 - Quick Start GuideCommunote 3.0 - Quick Start Guide
Communote 3.0 - Quick Start Guide
Communote GmbH
 
SQL Developer 4.x - Tipps für "faule" Entwickler
SQL Developer 4.x - Tipps für "faule" EntwicklerSQL Developer 4.x - Tipps für "faule" Entwickler
SQL Developer 4.x - Tipps für "faule" Entwickler
syntegris information solutions GmbH
 

Ähnlich wie Eine Website in einer Stunde mit TYPO3 bauen, Gernot Ploiner (20)

Backendlayout mit FLUID-Templates
Backendlayout mit FLUID-TemplatesBackendlayout mit FLUID-Templates
Backendlayout mit FLUID-Templates
 
Typo3 4.3 Die Neuerungen im Überblick
Typo3 4.3 Die Neuerungen im ÜberblickTypo3 4.3 Die Neuerungen im Überblick
Typo3 4.3 Die Neuerungen im Überblick
 
XING learningZ Event: Umfangreiche Dokumente effizient formatieren
XING learningZ Event: Umfangreiche Dokumente effizient formatierenXING learningZ Event: Umfangreiche Dokumente effizient formatieren
XING learningZ Event: Umfangreiche Dokumente effizient formatieren
 
TYPO3 CMS 6.1 - Die Neuerungen - typovision GmbH
TYPO3 CMS 6.1 - Die Neuerungen - typovision GmbHTYPO3 CMS 6.1 - Die Neuerungen - typovision GmbH
TYPO3 CMS 6.1 - Die Neuerungen - typovision GmbH
 
TYPO3: Extension news
TYPO3: Extension newsTYPO3: Extension news
TYPO3: Extension news
 
TYPO3 CMS 7.5 - Die Neuerungen - pluswerk
TYPO3 CMS 7.5 - Die Neuerungen - pluswerkTYPO3 CMS 7.5 - Die Neuerungen - pluswerk
TYPO3 CMS 7.5 - Die Neuerungen - pluswerk
 
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerkTYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
 
XPages - The Basics
XPages - The BasicsXPages - The Basics
XPages - The Basics
 
TYPO3 CMS 7.4 - Die Neuerungen - pluswerk
TYPO3 CMS 7.4 - Die Neuerungen - pluswerkTYPO3 CMS 7.4 - Die Neuerungen - pluswerk
TYPO3 CMS 7.4 - Die Neuerungen - pluswerk
 
Dnug35 ak-dev.071111-basic
Dnug35 ak-dev.071111-basicDnug35 ak-dev.071111-basic
Dnug35 ak-dev.071111-basic
 
Contao und CSS
Contao und CSS Contao und CSS
Contao und CSS
 
Handbuch Energiekostenverwaltung TSEnergie 5
Handbuch Energiekostenverwaltung TSEnergie 5Handbuch Energiekostenverwaltung TSEnergie 5
Handbuch Energiekostenverwaltung TSEnergie 5
 
FMK2014: Ein Warenwirtschaftssystem, das mit Scannern, Waagen und Mitarbeiter...
FMK2014: Ein Warenwirtschaftssystem, das mit Scannern, Waagen und Mitarbeiter...FMK2014: Ein Warenwirtschaftssystem, das mit Scannern, Waagen und Mitarbeiter...
FMK2014: Ein Warenwirtschaftssystem, das mit Scannern, Waagen und Mitarbeiter...
 
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerkTYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
 
FCE ohne TemplaVoila
FCE ohne TemplaVoilaFCE ohne TemplaVoila
FCE ohne TemplaVoila
 
IHRE IBM LOTUS NOTES-DATEN AN JEDEM ORT ZU JEDER ZEIT 3/3
IHRE IBM LOTUS NOTES-DATEN AN JEDEM ORT ZU JEDER ZEIT 3/3IHRE IBM LOTUS NOTES-DATEN AN JEDEM ORT ZU JEDER ZEIT 3/3
IHRE IBM LOTUS NOTES-DATEN AN JEDEM ORT ZU JEDER ZEIT 3/3
 
Medien Kombinat Meet Magento 05022009
Medien Kombinat Meet Magento 05022009Medien Kombinat Meet Magento 05022009
Medien Kombinat Meet Magento 05022009
 
ELO tipps und tricks nr 1 idnetsolutions
ELO tipps und tricks nr 1 idnetsolutionsELO tipps und tricks nr 1 idnetsolutions
ELO tipps und tricks nr 1 idnetsolutions
 
Communote 3.0 - Quick Start Guide
Communote 3.0 - Quick Start GuideCommunote 3.0 - Quick Start Guide
Communote 3.0 - Quick Start Guide
 
SQL Developer 4.x - Tipps für "faule" Entwickler
SQL Developer 4.x - Tipps für "faule" EntwicklerSQL Developer 4.x - Tipps für "faule" Entwickler
SQL Developer 4.x - Tipps für "faule" Entwickler
 

Mehr von DeveloperConference

Eine Website in einer Stunde mit TYPO3 bauen
Eine Website in einer Stunde mit TYPO3 bauenEine Website in einer Stunde mit TYPO3 bauen
Eine Website in einer Stunde mit TYPO3 bauen
DeveloperConference
 
Leichtgewichtige API-Dokumentation – Ein Paradoxon?
Leichtgewichtige API-Dokumentation – Ein Paradoxon?Leichtgewichtige API-Dokumentation – Ein Paradoxon?
Leichtgewichtige API-Dokumentation – Ein Paradoxon?
DeveloperConference
 
Lutz Prechelt - Keynote: "Meine Plattform ist besser als Deine Plattform???"
Lutz Prechelt - Keynote: "Meine Plattform ist besser als Deine Plattform???"Lutz Prechelt - Keynote: "Meine Plattform ist besser als Deine Plattform???"
Lutz Prechelt - Keynote: "Meine Plattform ist besser als Deine Plattform???"DeveloperConference
 
Developer Conference Hamburg 2012
Developer Conference Hamburg 2012Developer Conference Hamburg 2012
Developer Conference Hamburg 2012DeveloperConference
 

Mehr von DeveloperConference (6)

Eine Website in einer Stunde mit TYPO3 bauen
Eine Website in einer Stunde mit TYPO3 bauenEine Website in einer Stunde mit TYPO3 bauen
Eine Website in einer Stunde mit TYPO3 bauen
 
Leichtgewichtige API-Dokumentation – Ein Paradoxon?
Leichtgewichtige API-Dokumentation – Ein Paradoxon?Leichtgewichtige API-Dokumentation – Ein Paradoxon?
Leichtgewichtige API-Dokumentation – Ein Paradoxon?
 
Ruby on Rails
Ruby on RailsRuby on Rails
Ruby on Rails
 
Hdc2012 cordova-präsi
Hdc2012 cordova-präsiHdc2012 cordova-präsi
Hdc2012 cordova-präsi
 
Lutz Prechelt - Keynote: "Meine Plattform ist besser als Deine Plattform???"
Lutz Prechelt - Keynote: "Meine Plattform ist besser als Deine Plattform???"Lutz Prechelt - Keynote: "Meine Plattform ist besser als Deine Plattform???"
Lutz Prechelt - Keynote: "Meine Plattform ist besser als Deine Plattform???"
 
Developer Conference Hamburg 2012
Developer Conference Hamburg 2012Developer Conference Hamburg 2012
Developer Conference Hamburg 2012
 

Eine Website in einer Stunde mit TYPO3 bauen, Gernot Ploiner

  • 1. Eine Website in einer Stunde mit TYPO3 bauen TYPO3 hat den Ruf eines komplizierten CMS. Einerseits zurecht, denn es ist ein sehr mächtiges CMS mit unzähligen Möglichkeiten. Jedoch kann man mit wenigen gezielten Erweiterungen und etwas Know-How sehr schnell ein Projekt umsetzen. Hier wird gezeigt wie man in einer Stunde eine HTML-Vorlage einbindet und die Website mit Navigation, wartbaren Inhalten und Volltextsuche erstellt. Inhaltsverzeichnis Eine Website in einer Stunde mit TYPO3 bauen................................................................................................ 1 Vorbereitungen.................................................................................................................................................... 2 Seiten anlegen.................................................................................................................................................... 2 Erweiterungen laden und installieren.................................................................................................................. 3 Templavoila vorbereiten...................................................................................................................................... 4 Ordner für HTML-Dokumente anlegen und hochladen....................................................................................... 5 Eine Templavoila-Seitenvorlage erstellen........................................................................................................... 6 Die Seitenvorlage zuweisen.............................................................................................................................. 10 Typoscript Template erstellen............................................................................................................................ 11 Navigationen mit Typoscript erstellen............................................................................................................... 13 Inhalte einfügen................................................................................................................................................. 14 Volltextsuche einrichten..................................................................................................................................... 15 Ein Suchfeld auf allen Seiten............................................................................................................................ 17 Weitere Informationen....................................................................................................................................... 18 WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  • 2. Vorbereitungen Bevor man mit diesem Handbuch zu arbeiten beginnt, sollte man folgendes vorbereiten: • einen Webserver, idealerweise mit LAMP (Linux, Apache, MySQL, PHP). Genaue Serveranforderungen finden Sie auf typo3.org. • TYPO3 fertig installieren und konfigurieren Alternativ gibt es auf www.mittwald.de ein kostenloses TYPO3 Testhosting für 30 Tage. Dies kann selbstverständlich auch kostengünstig angemeldet werden. • Empfehlung: Deutsche Übersetzung für das Backend laden (Einloggen und dann unter Extensionmanager → Translations), ändern des Admin-Benutzer- und Installtoolpasswortes Seiten anlegen Zu allererst legt man ein paar Seiten im Seitenbaum an. Dies funktioniert im Modul Seite. Dort kann eine neue Seite über das Kontextmenü oder klick auf das Seitensymbol oberhalb des Seitenbaumes und dann mit Drag&Drop erstellt werden. Man nennt die erste Seite Startseite. Danach legt man eine zweite Seite vom Typ System an und nennt diese Vorlagen. Weitere Hauptmenüpunkte können nach Belieben unter der Startseite angelegt werden. WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  • 3. Erweiterungen laden und installieren Für dieses Projekt benötigen wir die folgenden TYPO3-Erweiterungen: templavoila (in Abhängigkeit static_info_tables), indexed_search und um einen Bug in Templavoila 1.7.0 zu beheben phpmyadmin. Die Extensions werden im Modul Erweiterungen und dort im Reiter Erweiterungen importieren auf den eigenen Server geladen. Die Erweiterung indexed_search ist hier ausgenommen. Sie ist eine Systemerweiterung und wurde bereits mit der TYPO3-Installation mitgeliefert. Vor dem ersten Importvorgang muss die aktuelle Extensionliste vom typo3.org Server geladen werden. Dies geschieht mit dem Icon rechts neben der Selectbox Bibliothek. Das Herunterladen kann ein paar Minuten dauern. Danach kann jede benötigte Extension im Suchfeld gesucht und mit dem Icon am Zeilenanfang importiert werden. In Folge kann die Erweiterung gleich installiert werden. Man braucht lediglich den Schritten des Assistenten folgen. WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  • 4. Templavoila vorbereiten Nach der Installation muss noch eine Einstellung für Templavoila getätigt werden. Es muss in den Seiteneigenschaften der Startseite die allgemeine Datensatzsammlung eingestellt werden (die Seite System). Die erfolgt über das Kontextmenü der Startseite → Bearbeiten. In Folge wird im Reiter Ressourcen die Seite gewählt. Weiters sollte im Reiter Verhalten die Checkbox Als Anfang der Website benutzen aktiviert werden. WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  • 5. Ordner für HTML-Dokumente anlegen und hochladen Als nächster Schritt wird am Server ein Ordner für die HTML-Vorlagen samt CSS- und Bilddateien angelegt. Dies geschieht in der Dateiliste. Dort wird über das Kontextmenü des Ordners fileadmin ein neuen Unterordner mit dem Namen templates angelegt. Danach wählt man diesen Ordner durch anklicken aus und lädt via Kontextmenü die Dateien vom lokalen PC aus hoch. WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  • 6. Eine Templavoila-Seitenvorlage erstellen Nun ist alles vorbereitet um die erste Seitenvorlage zu erstellen. Man wählt dazu (immer noch in der Dateiliste) über das Kontextmenü den Eintrag Templavoila. Danach erscheint die Maske zum Definieren von dynamischen Feldern. Hiermit werden Bereiche der statischen HTML-Vorlage mit verschiedensten Elementen ersetzt. In dieser Maske wird zuerst der Root-Knoten bestimmt. Dies ist der Bereich der für unsere Seitenvorlage verwendet werden soll. Dies ist in der Regel der Inhalt des BODY-Tag, da das HTML-Gerüst herum (HTML / HEAD / BODY) von TYPO3 generiert wird. Um dies zu bewerkstelligen, klickt man auf die Schaltfläche Abbilden und wählt dann in der HTML-Vorschau den sichtbaren BODY-Tag durch Klick darauf aus. In Folge bestimmt man, ob man den Inhalt des gewählten Tags (INNER), oder das HTML inklusive des Tags (OUTER) in der Vorlage haben möchte. Mit Festlegen wird dies bestätigt. WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  • 7. Danach werden dynamische Felder für Navigation, Subnavigation, Inhalt usw. angelegt. Also für all dies was aus der HTML-Vorlage genommen werden soll und vom CMS befüllt werden soll. Dazu füllt man das Eingabefeld mit einem eindeutigen Namen und bestätigt mit Add. In Folge befüllt man das Formular mit Titel und wählt den Elementtyp. WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  • 8. Für Navigationen verwendet man immer den Typ Typoscript-Objektpfad. Nach dem Bestätigen mit Hinzufügen wechselt man im linken kleinen Menü auf TypoScript und bestätigt den Vorschlag lib.xxx mit aktualisieren. Dies ist auch dann unbedingt notwendig, wenn der Objektpfad nicht verändert wird! Ansonsten wird der Name nicht gesetzt und es wird keine Ausgabe auf der Website geben (hohe Fehlerquelle !!!) Mit Abbilden wird nun zum Abschluss der HTML-Bereich in der Vorlage bestimmt, wo die Navigation platziert werden soll. Dieses Abbilden funktioniert genau gleich wie beim Root Knoten zuvor. Hier wird allerdings der HTML-Tag, welcher die Navigation umschließt, gewählt. In Folge werden weitere Felder für Subnavigation und Inhaltsbereich angelegt. Für Inhaltsbereiche wählt man die Voreinstellung: Seite – Inhaltselemente [Pos.: 0] Zum Abschluss speichert man die Vorlage mit der Schaltfläche Speichern unter. Mit Titel DS/VO gibt man der Vorlage einen sprechenden Namen, damit der Redakteur später weiß welche Vorlage er einstellt. Mit der Schaltfläche DS/VO Erstellen wird die Vorlage endgültig gespeichert. Achtung: Wird der Browser zuvor geschlossen geht die Arbeit verloren! Die Vorlagenerstellung ist bis zu diesem Zeitpunkt nur in der Browsersession gespeichert. WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  • 9. Da das HTML-Grundgerüst inkl. HEAD Bereich von TYPO3 generiert wird, fehlt nun die Einbindung von CSS- und Javascript-Dateien. Dies wird nun nachgeholt. Dazu wechselt man in das Modul Templavoila. Im Seitenbaum wird die Seite Vorlagen gewählt. Nun erscheinen rechts die angelegten Seitenvorlagen (derzeit eine). Dort klickt man auf Abbildung aktualisieren. In Folge kann man alle in der Vorlage existierenden Headerzeilen durch aktivieren der jeweiligen Checkbox übernehmen. Mit Speichern und Zurück muss dieser Schritt noch bestätigt werden. WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  • 10. Die Seitenvorlage zuweisen Die Seitenvolrage ist nun fertig erstellt und gespeichert. Es können auf diesem Weg mehrere Vorlagen für verschiedene Designs oder Bedürfnisse (verschiedene Inhaltsspalten und Strukturen) angelegt werden. Was nun noch fehlt ist die Zuordnung zum Seitenbaum → Welche Vorlage soll wo verwendet werden. Dies geschieht in den Seiteneigenschaften einer jeden Seite. Zuerst beginnt man am besten mit der Startseite. Dort wählt man in den Seiteneigenschaften den Reiter Erscheinungsbild und stellt bei Vorlagen- Design benutzen und Unterseiten – Vorlagen-Design benutzen die erstellte Vorlage ein. Natürlich ist dies je nach belieben und ggf. auch auf weiteren Unterseiten Projektspezifisch zu definieren. WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  • 11. Typoscript Template erstellen Bisher haben wir nur im Backend gearbeitet. Eine Vorschau im Frontend liefert bisher immer nur Fehlermeldungen. Damit die Ausgabe auch klappt, muss zwingend ein TypoScript Template erstellt werden. Hier wird definiert was am Frontend ausgegeben werden soll. Ohne dieser Definition weiß TYPO3 nicht welche Art der vielen Möglichkeiten für die Ausgabe verantwortlich ist. Dazu wechselt man in das Modul Template. Im Seitenbaum wählt man danach die oberste Seite im Seitenbaum – in diesem Beispiel ist das die Startseite. Dort wird mit Template für neue Seite erstellen ein sogenanntes Typoscript Template erstellt. Wechselt man oben in der Selectbox zu Info/Bearbeiten, muss noch mit Klick auf Vollständigen Template- Datensatz bearbeiten ein vordefiniertes TypoScript für die Inhaltsausgabe eingebunden werden. Dazu wählt man im Reiter Enthält in der obersten Selectbox den Eintrag CSS Styled Content aus. Dieser wandert nach dem Klick nach links. WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  • 12. Mit speichern und beenden (Diskette oben mit X Icon) wird diese Einstellung gespeichert. Klickt man in Folge auf den Bleichstift neben Setup das Typoscript einsehen und bearbeiten. Diese 4 Zeilen werden automatisch von der Extension Templavoila eingefügt und sind dafür verantwortlich, dass Templavoila für die Frontendausgabe konfiguriert ist. Ab nun kann das Frontend begutachtet werden. Es fehlen aber immer noch die Navigationen. Dies ist der nächste Schritt. Falls die Frontendausgabe nicht funktioniert, kann dies am Cache liegen, der jederzeit Problemlos oben mit dem gelben Blitz-Icon gelöscht werden kann. WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  • 13. Navigationen mit Typoscript erstellen Mit dem nachfolgenden TypoScript wird die beim Vorlagen-erstellen konfigurierte Hauptnavigation generiert. Ausgenommen davon sind die ersten 3 Zeilen (config usw). Diese definieren den Doctype mit HTML5. lib.field_navigation ist der Name der bei der Vorlagenerstellung in Templavoila vergeben wurde. Dieser wird nun mit TypoScript befüllt. Eine ausführliche TypoScript-Dokumentation welche diese Zeilen erläutert findet man unter: http://typo3.org/documentation/document-library/ oder deutsch unter: http://www.typo3.net/tsref/ Auch die Subnavigation wird ähnlich beschrieben: WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  • 14. Inhalte einfügen Nun ist es an der Zeit die Website mit Content zu befüllen. Dies geschieht mit dem Modul Seite. Hier wählt man im Seitenbaum die zu befüllende Seite und in Folge klickt man auf das grüne Icon mit dem Plus-Symbol im Hauptbereich. Nun kann man aus verschiedenen Elementen wählen (Experimentieren erlaubt ;-) Ein angelegter Inhalt kann so aussehen: WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  • 15. Volltextsuche einrichten Die Volltextsuche indexed_search ist bereits mit an Board und muss nur noch installiert werden. Dies erledigt man unter Erweiterungen im Reiter Verfügbare Erweiterungen. Nach der Installation ist eine neue Seite im Seitenbaum nötig, auf der das Suchergebnis angezeigt wird. Diese Seite wird in den Seiteneigenschaften im Menü versteckt angezeigt, damit man sie nicht direkt (leer) aufrufen kann. WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  • 16. Diese Seite wird in Folge mit einem Inhaltselement vom Typ Allgemeines Plugin befüllt. Damit die Suche aktiviert wird (genauer gesagt das indizieren), ist eine weiter Typoscript-Zeile erforderlich: page.config.index_enable = 1 Nun muss zum indizieren das Frontend (jede einzelne Seite) aufgerufen werden. Dann kann die Suche schon verwendet werden. WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  • 17. Ein Suchfeld auf allen Seiten. Bisher ist die Suche noch eine eigene (versteckte) Seite. Um ein Suchfeld auf allen Seiten (Menüpunkten) anzubieten, legt man ein neues Typoscript-Objektpfad Feld in der Seitenvorlage an. Eine Vorlage kann unter Templavoila → Vorlagen → Abblidung aktualisieren und in Folge DS/VO modifizieren bearbeitet werden. Hier legt man ein neues Feld (field_suche) vom Typ TypoScript-Objektpfad an – genauso wie beim Erstellen der Vorlage. Zuletzt wird nochmals das TypoScript erweitert, welches das Formular-HTML ausgibt: WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  • 18. Weitere Informationen Wenn Sie mehr über TYPO3 lernen möchten, besuchen Sie unsere Website www.typo3kurse.de. Wir bieten laufend Kurse in Deutschland, Österreich und in der Schweiz an. Für Einsteiger, TypoScript Neulinge oder TYPO3-Extensionprogrammierer. Unter www.typo3kurse.de/gutschein erhalten Sie bis 23.09.2012 einen EUR 50,00 Gutschein, den Sie bis Jahresende für alle Kurse bei uns buchen können. Bei weiteren Fragen stehen wir Ihnen jederzeit zur Verfügung. Gerne stehen wir Ihnen bei TYPO3-Projekten zur Seite – kontaktieren Sie uns über unsere Firmenwebsite www.webprofil.at Wir hoffen Ihnen einen guten Einblick in dieses mächtige CMS gegeben zu haben. Vielen Dank für Ihre Aufmerksamkeit. Gernot Ploiner WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com