Template Voila Tutorial German

Transkript

1 Template Voila Tutorial German Extension Key: doc_tv_de Copyright , Andreas Jonderko, This document is published under the Open Content License available from The content of this document is related to TYPO3 a GNU/GPL CMS/Framework available from 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

2 zu machen. Nach der Installation ist die Erweiterung in folgendem Ordner zu erreichen: [...]/typo3conf/ext/doc_tv_de Template Voila Tutorial German 2

3 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

4 Bei TemplateVoila müssen Sie noch zusätzlich den Enable Page Template Selector einschalten. Template Voila Tutorial German 4

5 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

6 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

7 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

8 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

9 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

10 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

11 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

12 Template Voila Tutorial German 12

13 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

14 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

15 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

16 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

17 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

18 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 = NO.stdWrap.htmlSpecialChars = 1 # Enable active state and set properties: ACT = 1 ACT.stdWrap.htmlSpecialChars = 1 ACT.allWrap = } Template Voila Tutorial German 18

19 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