Template Voila Tutorial German

Template Voila Tutorial German
Extension Key: doc_tv_de
Copyright 2000­2002, Andreas Jonderko, <[email protected]>
This document is published under the Open Content License
available from http://www.opencontent.org/opl.shtml
The content of this document is related to TYPO3 ­ a GNU/GPL CMS/Framework available from www.typo3.com
Table of Contents
Template Voila Tutorial German................1
Einführung......................................................................1
Was macht es?...........................................................1
Erweiterung................................................................1
Installation......................................................................2
Seitenstruktur.............................................................2
Erweiterungen............................................................2
Sysordner...................................................................3
Allgemeine Datensatzsammlung:...............................4
Erstellen des TypoScript Template Eintrag.................5
Erstellen des “Template Object”.................................7
Datenstruktur (DS) und Templateobjekt (TO)..............8
Datenstruktur (DS) erzeugen......................................9
Inhaltskontainer........................................................10
Hauptmenü...............................................................11
Untermenü links........................................................11
Speichern der Datenstruktur und des
Templateobjektes.....................................................11
Inhalt anlegen...............................................................15
Die Menüs.....................................................................15
Hauptmenu...............................................................15
Untermenu................................................................16
Bekannte Probleme......................................................16
To­Do list.......................................................................16
Einführung
Was macht es?
Dieses Tutorial beschäftigt sich mit der Installation und der Nutzung von der Erweiterung TemplateVoila.
Ich gehe davon aus, das Sie Typo3 in der Deutschen Sprache nutzen. Ansonsten empfehle ich Ihnen die Erweiterung
German language pack (csh_de) zu installieren.
Man kann dieses Tutorial als eine Erweiterung von dem Dokument “Futuristic Template Building“ sehen.
Erweiterung
Diese Erweiterung besteht aus einer Dokumentation (manual.sxw) und einem Template. (Ordner templates)
Wenn Sie diese Erweiterung über den Extension Manager installieren, vergessen Sie nicht das Häckchen bei Include "doc/manual.sxw", if any Template Voila Tutorial German ­ 1
zu machen. Nach der Installation ist die Erweiterung in folgendem Ordner zu erreichen:
[....]/typo3conf/ext/doc_tv_de
Template Voila Tutorial German ­ 2
Installation
Für die Installation benötigen wir eine bereits bestehende Seitenstruktur und zusätzliche Erweiterungen.
Seitenstruktur
Erstellen Sie zuerst folgende Seitenstruktur in Typo3:
Erweiterungen
Diese Erweiterungen müssen im Extension Repository installieren werden um TemplateVoila richtig zu nutzen:
Gehen Sie zum Ext Manager und wählen Sie im Menü: Import extensions from online repository
Danach geben Sie einfach die nachfolgend aufgelisteten Erweirungsnamen in das Look up Feld ein.
css_styled_content
static_info_tables
templavoila
Template Voila Tutorial German ­ 3
Bei TemplateVoila müssen Sie noch zusätzlich den “Enable Page Template Selector” einschalten.
Template Voila Tutorial German ­ 4
Nachdem Sie die Erweiterungen installiert und den gesamten Cache geleert haben, sollten Sie dieses Web Menü sehen.
Falls Sie es nicht in dieser Form sehen, dann loggen Sie sich neu ein, oder leeren Sie den Cache erneut.
Sysordner
Gehen Sie auf WEB­>SEITE und klicken Sie das Symbol von RootElement an. In dem auftauchendem Menü wählen Sie
Neu aus. Es spielt keine Rolle wo man diese neuerstellte Seite platziert. Es ist nur wichtig das man sie später richtig
verbindet.
Erstellen Sie nun eine neue Seite und definieren Sie sie als einen SysOrdner. Diese Seite speichert die TemplateVoila Daten.
Die Seitenstruktur sollte so aussehen:
Template Voila Tutorial German ­ 5
Allgemeine Datensatzsammlung:
Wir müssen jetzt unserer Wurzelseite beibringen wo sich ihre gewünschten Templatedateien befinden. Dazu gehen Sie auf WEB­>SEITE und auf das “RootElement “. Drücken Sie auf der rechten Seite auf den Stift um den Seitenheader zu
bearbeiten. Weiter unten finden die Allgemeine Datensatzsammlung, mir der wir den Speicherort von TV definieren werden : Wählen Sie den gerade erstellten SysOrdner aus (TemplateVoila).
Template Voila Tutorial German ­ 6
Erstellen des TypoScript Template Eintrag
Als nächstes müssen wir einen “Wurzel Template Eintrag” erstellen. Dieser Templateeintrag kann für alle Unterseiten
genutzt werden. Man kann auch andere Templateeinträge erstellen, und somit verschiede Designs auf anderen Seiten
anbieten.
Markieren Sie hierzu die Seite “RootElement” und gehen Sie im Menü auf Web­> Template
Auf der rechten Seite erscheint eine Meldung das noch kein Template existiert.
Klicken Sie auf “Create template for a new site” um ein Template zu erstellen.
Im Setup befindent sich bereits 6 Zeilen, die wir ändern müssen.
Drücken Sie auf den Stift links neben dem Setup.
Template Voila Tutorial German ­ 7
Hier ändern wir den Standard SETUPCODE.
Standard:
# Default PAGE object:
page = PAGE
page.10 = TEXT
page.10.value = HELLO WORLD!
Ändern wir zu:
# Default PAGE object:
page = PAGE
page.typeNum = 0
page.10 = USER
page.10.userFunc = tx_templavoila_pi1­>main_page
Somit bringen wir Typo3 bei, dass unser Template über die Erweiterung TemplateVoila gesteuert wird.
Wir müssen jetzt noch die Erweiterung CSS Styled Content in unser Template einbinden indem wir auf “Click here to edit
whole template record” klicken.
Im Feld “Include static (from extension)” fügen Sie das Objekt CSS Styled Content hinzu und speichern ab.
Template Voila Tutorial German ­ 8
Erstellen des “Template Object”
Bevor wir das Template Objekt erstellen können, sollten sie die Templatedateien bereits irgendwo in das Verzeichniss
Fileadmin/”irgendwo hier” kopiert haben. Wenn Sie diese Erweiterung installieren werden die Dateien in ihre lokale Typo3 Installation in das Verzeichniss /typo3conf/ext/doc_tv_de kopiert.
In unserem Beispiel kopieren wir den templates Ordner:
/typo3conf/ext/doc_tv_de/templates nach /fileadmin/templates
Gehen Sie über Datei­>Dateiliste­> dann auf das Verzeichnis fileadmin/templates/
Auf der rechten Seite sehen Sie die Auflistung:
meinTemplate.html
style.css
Gehen sie mit der Maus auf das HTML Symbol und Klicken Sie darauf. Es erscheint ein Menü in dem Sie auf TemplateVoila
klicken müssen.
Um ihr Template schonmal zu begutachten können Sie auf Preview klicken.
Template Voila Tutorial German ­ 9
In diesem Menü erstellen wir eine Datenstruktur (Data Structure ­> DS) und diese Datenstruktur verbinden wir zusammen mit
den HTML Elementen und speichern diese Informationen in einem Templateobjekt (Template Object ­> TO).
Datenstruktur (DS) und Templateobjekt (TO)
Sie können mehr technische Informationen über Datenstrukturen und Templateobjekte in dem Dokument “TYPO3 Core API”
und in der Dokumentation von TemplateVoila nachlesen.
Um eine kurzen Überblick über die Unterschiede zwischen DS und TO zu erklären:
•
Eine Datenstruktur (DS) sagt welche “Felder” (fields) wir mit dem HTML Template verbinden können.
•
Ein Templateobjekt (TO) sagt welche HTML Elemente zu welchen “Feldern” (fields) verbunden sind.
Mit diesen Definitionen sehen wir das ein TO immer auf ein DS verweist. Dieser “sagt” dem TO, welche Felder wie und in
welcher Hierarchie verbunden sind. Das bedeutet auch das Sie mehrere TOs haben können, die auf das gleiche DS
verweisen ­> mehrere Templates für die gleichen Daten.
Template Voila Tutorial German ­ 10
Datenstruktur (DS) erzeugen
In unserem Tutorial werden brauchen wir folgende Felder:
•
ROOT für die Definition der gesamten Seite – und das ist der <body> Tag.
•
Hauptmenu: Wir definieren einen Kontainer für das Menü oben. Stufe 1
•
Untermenü: Wir definieren einen Kontainer für das Unternenü links. Stufe 2 und 3.
•
Inhalt: Wir definieren einen Inhaltskontainter.
Diese Datenstrukturen können auch selbst geschrieben werden wenn Sie die Syntax der DS XML, <T3DataStructure>
kennen. Der Vorteil von TemplateVoila ist, dass wir mit einfachen Klicks und genau das ersparen können, und kinderleicht
eine Datenstruktur bzw. ein Templateobjekt erstellen können.
Als erstes verbinden (map) wir das Element ROOT mit dem <body> Tag.
Drücken Sie auf den Knopf MAP (verbinden) und markieren Sie in der Vorschau den <body> Tag.
Danach werden Sie gefragt wie das Element verbunden werden soll.
•
INNER (Exclude tag) Bedeutet: der jeweils ausgewählte Tag (in unserem Fall gerade der <body> Tag) stehen gelassen
wird und das Element innerhalb des <body> Tags verbunden werden soll.
•
OUTER (Include tag) Bedeutet genau das umgekehrete, der aktuell ausgewählte Tag (in unserem Fall <body>) wir nicht
mit in das Element aufgenommen. Unser Element würde vor dem <body'> beginnen und nach dem <body> enden. (Sehr
schlecht bei dem <body> Tag ) :)
So wir lassen ihn auf INNER und drücken SET. •
TIP: drücken Sie immer auf Preview (Vorschau) um ihre Änderung zu überprüfen.
Template Voila Tutorial German ­ 11
Template Voila Tutorial German ­ 12
Inhaltskontainer
Gehen Sie in das Feld: [Enter new fieldname] und geben Sie einen Namen für den Inhalt an. Eine gute Angewohnheit ist es
immer den Präfix field_ zu verwenden. In unserem Fall geben wir field_inhalt an und drücken ADD.
In diesem Untermenü definieren Sie den Feldtypen, Titel etc. an.
•
Titel: Der Titel des Elements
•
Mapping instructions: Anweisung wie man das Feld verbindet.
•
Sample Data: Beispielinhalt, nachdem Sie das Element verbunden haben, sehen Sie diesen Inhalt in dem Element.
•
Editing Type: Der Typ, in unserem Fall wählen wir “Content Elements” für den Inhalt an.
•
[Advanced Mapping rules: Hier kann man die erweiterten Einstellungen für das Verbinden machen. Wie z.b. *:inner würde
dem Element nur die Möglichkeit geben als INNER verbunden zu werden. Für dieses Tutorial ist diese Einstellunge nicht
wichtig.
Drücken Sie auf ADD um das Element zu erstellen. Wir müssen jetzt nur noch das Feld mit dem HTML verbinden. Wir
drücken wieder auf MAP und markieren die DIV­Box:
Setzen Sie wieder das Element auf INNER und drücken SET. Wir wollen auch in diesem Fall das der Inhalt, der später
reinkommt, IN der DIV­Box landet und nicht ausserhalb.
•
TIP: drücken Sie immer auf Preview (Vorschau) um ihre Änderung zu überprüfen.
Sie sehen nun, das der Inhalt des Templates gegen den Inhalt [Hier kommt der Inhalt] ausgetauscht wurde.
Template Voila Tutorial German ­ 13
Hauptmenü
Das Hauptmenü wird im Prinzip genau so erstellt wie das Inhaltselement, mit dem Unterschied das wir den “Editing Type”
auf TypoScript Object Path setzen. 1. field_Hauptmenu ­> ADD
2. Title: Hauptmenu
1. Sample Data: [Hier kommt das Hauptmenu]
2. Editing Type: TypoScript Object Path
Drücken Sie auf ADD. Es erscheint ein neues Feld “Object Path”: das ist der Name des Typoscipt Objektes welches uns
unser Menü zaubern soll.
Tragen Sie dort lib.HauptMenu ein und drücken auf UPDATE.
3. Nun verbinden wir das Element wieder mit unserer DIV­Box.
1. Drücken Sie auf MAP, markieren Sie die <div> Box für das Hauptmenu und setzen das Element wieder auf INNER.
•
TIP: Halten Sie ihre Maus länger über den Tags, somit wird die Bezeichnung bzw. die ID sichtbar, oder schalten Sie von
Mode: Exploded Visual auf Mode: HTML Source um den Quellcode direkt zu markieren.
Untermenü links
Wiederholen Sie die Schritte vom “Hauptmenu”. Ändern Sie nur den Feldnamen auf field_submenu und den Object Path auf
lib.SubMenu. Beim verbinden, markieren Sie das obere <UL> Element. (<ul id="Navigation">) und setzen es wieder auf
INNER.
Speichern der Datenstruktur und des Templateobjektes
Drücken Sie auf SAVE und Sie kommen zum folgenden Menü:
Beim erstmaligen Erstellen des TO und DS tragen Sie den Titel sowie den Typ Page Template ein.
Store in PID: Hier sollten Sie den SysOrdner auswählen wo das TO / DS gespeichert werden soll.
Wenn Sie später Änderungen an Ihrem Template vornehmen, nutzen Sie den unteren Bereich um Ihr bereits bestehendes
TO/DS zu aktualisieren ­> Vorsicht ist hier geboten, denn alle Änderungen die sie per Hand an dem TO / DS vorgenommen
haben gehen dadurch verloren!
Drücken Sie anschließend auf CREATE TO and DS um die Einträge zu erstellen.
Sie sollten folgende Meldung bei Erfolg ganz oben sehen:
Data Structure (uid 2) and Template Record (uid 2) was saved in PID "26" Template Voila Tutorial German ­ 14
Sie können sich die Einträge anschauen indem Sie auf Web­> Liste gehen und den SysOrdner TemplateVoila auswählen.
Wenn Sie nun versuche sich die Seite (über Web­>Anzeigen ­> RootElement Seite auswählen) anzuschauen bekommen
Sie immer noch eine Fehlermeldung.
Template Voila Tutorial German ­ 15
Das liegt daran, das wir noch nicht das Template auf den Seiten ausgewählt haben.
Gehen Sie nun auf Web­>Seite­>RootElement­> Stift um den Seitenheader zu bearbeiten.
Sie finden dort neue Felder:
Wählen Sie bei beiden Feldern Ihr neuerstelltes Template aus und speichern Ihr Dokument ab.
Es kommen 2 Neue Felder:
Template Voila Tutorial German ­ 16
Tragen Sie in allen 4 Feldern ihr Template ein und speichern das Dokument ab.
Wenn Sie sich jetzt die Seite anschauen (Web­>Anzeigen RootElement auswählen) wird zwar die Seite angezeigt, bloss
ohne Formatierungen. Das Liegt daran das wir unsere CSS Datei (style.css) noch nicht eingebunden haben.
Gehen Sie hierzu über Web­>Liste TemplateVoila zu ihren Templateeinträgen.
Drücken Sie auf das Symbol Templateobjekt TO und schliesslich auf TemplateVoila.
Sie sehen den Bereich “Adding parts from HTML header” in dem man im <head> Bereich definierte Objekte/Tags einbinden
kann. In unserem Fall befindet sich hier auch die CSS Datei für unsere Formatierungen. Markieren Sie alle 3 und drücken
SAVE.
... und Voila die Seite sollte sich fast so wie auf dem Originaltemplate präsentieren.
Uns fehlen nur noch die Menüs, aber als erstes fügen wir einen neuen Dummy­Inhalt ein, um zu überprüfen ob er richtig
dargestellt wird.
Template Voila Tutorial German ­ 17
Inhalt anlegen
Wichtig:
•
Wenn Sie einen Inhalt erstellen, MÜSSEN Sie ihn über das Web­>TV Seite Modul erstellen. Die herkömliche Methode
(Web­>Seite) wird Ihren Inhalt nicht anzeigen!
Markieren Sie Ihre Seite z.b. (RootElement) und gehen Sie auf Web­>TV Seite > Hier können Sie nun Ihren Inhalt erstellen. Des Weiteren finden Sie hier auch Übersetzungen etc. zu Ihrer Seite.
Die Menüs
Hauptmenu
Die beiden Menüs die wir als TypoScript Object Path gesetz haben, müssen wir nun definieren.
Klicken Sie ihr RootElement an, und gehen Sie auf Web­> Template. Drücken Sie den Stift neben dem Setup an um den
Templatequelltext zu bearbeiten.
Das Hauptmenu lib.HauptMenu soll nur die Erste Ebene darstellen, und wurde extra auf das minimum runtergeschraubt. Das
gestalten von Menüs ist ein riesiges Thema und würde dieses Tutorial sprengen. Schauen Sie sich dazu die Tutorials über
Menüs im Internet an.
Fügen Sie folgenden Quellcode vor der bereits existierenden PAGE Definition ein!
###########################################
# Hauptmenu
###########################################
lib.HauptMenu = HMENU
# First level menu­object, textual
lib.HauptMenu.1 = TMENU
lib.HauptMenu.1 {
# Normal state properties
NO.allWrap = | &nbsp;
NO.stdWrap.htmlSpecialChars = 1
# Enable active state and set properties:
ACT = 1
ACT.stdWrap.htmlSpecialChars = 1
ACT.allWrap = | &nbsp;
}
Template Voila Tutorial German ­ 18
Untermenu
Das besondere an dem Untermenu ist, dass wir es über die CSS Datei steuern (<UL> und <LI>).
Fügen Sie diesen Quellcode ebenfalls vor der PAGE Definition ein.
###########################################
# Untermenu
###########################################
lib.SubMenu = HMENU
lib.SubMenu.entryLevel = 1
# First level menu­object, textual
lib.SubMenu.1 = TMENU
lib.SubMenu.1 {
NO.linkWrap = |
NO.doNotShowLink = 1
NO.before.cObject = TEXT
NO.before.cObject.field = alias//uid
NO.before.cObject.dataWrap = <LI><A href="?id=|" title="{field:title}">
NO.after.cObject = TEXT
NO.after.cObject.field = nav_title//title
NO.after.cObject.wrap = | </a></LI>
NO.RO=1
ACT.linkWrap = |
ACT.doNotShowLink = 1
ACT.before.cObject = TEXT
ACT.before.cObject.field = alias//uid
ACT.before.cObject.dataWrap = <LI><A href="?id=|" title="{field:title}">
ACT.after.cObject = TEXT
ACT.after.cObject.field = nav_title//title
ACT.after.cObject.wrap = | </a></LI>
}
#2nd Level ##################################################################
# Second level menu­object, textual
lib.SubMenu.2 = TMENU
lib.SubMenu.2 {
# Abstand zum nächsten Menüpunkt
wrap = <ul> | </ul>
NO.linkWrap = |
NO.doNotShowLink = 1
NO.before.cObject = TEXT
NO.before.cObject.field = alias//uid
NO.before.cObject.dataWrap = <LI><A href="?id=|" title="{field:title}">
NO.after.cObject = TEXT
NO.after.cObject.field = nav_title//title
NO.after.cObject.wrap = | </a></LI>
NO.RO=1
ACT.linkWrap = |
ACT.doNotShowLink = 1
ACT.before.cObject = TEXT
ACT.before.cObject.field = alias//uid
ACT.before.cObject.dataWrap = <LI><A href="?id=|" title="{field:title}">
ACT.after.cObject = TEXT
ACT.after.cObject.field = nav_title//title
ACT.after.cObject.wrap = | </a></LI>
}
Bekannte Probleme
Bis jetzt noch nicht :)
To­Do list
Das Tutorial ist “auf die schnelle” entstanden, so das sich Fehler einschleichen konnten. Ausserdem wurde bei dem Tutorial
mehr Wert auf die Erklärung von TemplateVoila als auf die “schöne” Gestaltung gelegt. Vielleicht findet sich jemand der eine
bessere HTML Vorlage und einen ausgeprägteren CSS Code für den Anfang liefert.
Template Voila Tutorial German ­ 19