1 / 41

TYPO3-Workshop TypoScript und Templates

TYPO3-Workshop TypoScript und Templates. RRZN Universität Hannover. Templates und TypoScript. Ziele dieses Kapitels Einführung der Begriffe Template und TypoScript TypoScript an Hand einfacher Templates TypoScript Syntax Kennlernen der Werkzeuge zur Template-Berarbeitung Template-Analyzer

aden
Download Presentation

TYPO3-Workshop TypoScript und Templates

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. TYPO3-WorkshopTypoScript und Templates RRZN Universität Hannover

  2. Templates und TypoScript • Ziele dieses Kapitels • Einführung der Begriffe Template und TypoScript • TypoScript an Hand einfacher Templates • TypoScript Syntax • Kennlernen der Werkzeuge zur Template-Berarbeitung • Template-Analyzer • TypoScript Object Browser (TCO) • Template Record Editor • Ausgangslage: • Site mit wenigen Seiten und ohne Template T. Kröckertskothen | April 2005 | Folie 2

  3. Templates in Typo3 • steuern die Web-Darstellung von Seiten • ohne Template keine Web-Seite • steuern die Web-Darstellung von Seiten • Konfiguration mit TypoScript • hierarchisch geordnet • Datensatz in der Tabelle sys_template • sind keine HTML-Dateien T. Kröckertskothen | April 2005 | Folie 3

  4. TypoScript • TYPO3-spezifische Syntax zur Beschreibung von Daten • hierarchische Struktur in ASCII-Text • wird in einen mehrdimensionalen PHP-Array übersetzt (TS-Parser)„TypoScript is parsed that means it is transformed into a PHP array!“ • ermöglicht die Konfiguration von php-Dateien in Typo3 • TypoScript ist zu finden in • Page TSConfig • User TSConfig • TypoScript Templates T. Kröckertskothen | April 2005 | Folie 4

  5. TypoScript – Erstes Template • Ausgangslage T. Kröckertskothen | April 2005 | Folie 5

  6. Erstes Template erstellen • Start-Seite im Seitenbaum wählen • Web-Module Template • Button „Create Template for a new site“ T. Kröckertskothen | April 2005 | Folie 6

  7. Template-Werkzeuge – Pulldown-Menü • Werkzeuge im Template-Modul • Constant-Editor • Info/Modify • TypoScript Object Browser • Template Analyzer T. Kröckertskothen | April 2005 | Folie 7

  8. Hello-World-Template • TypoScript-Template Hello-World • # Default PAGE object:page = PAGEpage.10 = TEXTpage.10.value = HELLO WORLD! T. Kröckertskothen | April 2005 | Folie 8

  9. Hello-World-Template • TypoScript-Template Hello-World • # Default PAGE object:page = PAGEpage.10 = TEXTpage.10.value = HELLO WORLD! • Zeile 1: Kommentar • Zeile 2: Objekt vom Typ PAGE mit der Bezeichnung page • page.10 Property cObj vom Typ TEXT • Die Nummer legt die Reihenfolge der cObj-Elemente auf der Seite fest • Zeile 3: page.10.value Property value des ObjektsTEXT (Text erhält den Wert „HELLO WORLD!“) T. Kröckertskothen | April 2005 | Folie 9

  10. PAGE • PAGE • TypoScript Objekt • „setup“-Objekt • startet Web-Präsentation einer Seite (Web-Ausgabe eines Datensatzes uid aus Tabellepages) • notwendig (ohne PAGE keine Ausgabe) • Weitere Informationen siehe auch • TSref • typo3.org • Dokumentation • Core Documentation (tsref.de) T. Kröckertskothen | April 2005 | Folie 10

  11. TypoScript-Elemente • Erste Übersicht über TypoScript-Elemente (Details folgen): • Data types • Conditions • Functions • setup-Objekte • PAGE • config • ... • Content-Objects • TEXT • HTML • HMENU • IMAGE • ... • Menu Objects T. Kröckertskothen | April 2005 | Folie 11

  12. page.10=TEXT page = PAGE page.10 = TEXT page.10.value=Hallo cObject • erste Formulierung Objekt vom Typ TEXT wird an die Position 10 auf die Seite gesetzt Wert ist Hallo cObject • präziser formuliert (siehe TSref) PAGE hat die Property 1,2,3, … zulässiger Datentyp ist cObject (Content Object) die Nummer legt die Reihenfolge der Content-Objekte auf der Seite fest T. Kröckertskothen | April 2005 | Folie 12

  13. Content Objects (cObject) • Konfigurieren die Darstellung von Inhaltselementen auf der Web-Seite • Inhaltselemente werden aus Tabellen geladen oder in TypoScript erzeugt • Beispiele für Content Objects (siehe TSref) • TEXT • HTML • CONTENT • HMENU • FORM • PHP_SCRIPT • … • Werte für die Darstellung werden durch Properties des jeweiligen Content Object festgelegt T. Kröckertskothen | April 2005 | Folie 13

  14. Content-Element HTML page = PAGE page.typeNum = 0 page.10=HTML page.10.value ( <h1>Hallo HTML</h1> Dies ist ein ... <p>Inhalt wird mit TypoScript erzeugt! <hr> <h5>Typo3</h5> ) • Content-Element HTML an Position 10 • Hinweis zur Syntax: • Runder Klammern • ( • eine Zeile • noch eine Zeile • ) • fassen mehrere Zeilen zusammen • und weisen diesen einem Wert zu T. Kröckertskothen | April 2005 | Folie 14

  15. Ein Menü • page.5 = HMENU • page.5.1=TMENU • page.5.1.wrap = | <br><br> • page.5.1.NO.AtagBeforeWrap=1 • page.5.1.NO.linkWrap=&nbsp; | &nbsp; • Position 5 wird ein HMENU (Content-Object vom Typ HMENU) gesetzt • HMENU ist ein Array von MENU-Objekten • MENUE-Objekte sind z.B. GMENU, TMENU, IMGMENU, … • An Position1 von HMENU wird ein TMENU gesetzt • wrap umschließt das aktuelle Elemente mit Werten| bezeichnet das aktuelle Element T. Kröckertskothen | April 2005 | Folie 15

  16. TypoScript am Beispiel Menü • An Hand der MENU-Anweisungen werden TypoScript-Elemente vorgestellt: • { } Properties zusammenfassen • < Objekte kopieren • =< Objekte referenzieren • > Objekte löschen page.5 = HMENU page.5.1=TMENU page.5.1.wrap = | <br><br> page.5.1.NO.AtagBeforeWrap=1 page.5.1.NO.linkWrap = &nbsp; | &nbsp; T. Kröckertskothen | April 2005 | Folie 16

  17. TypoScript { } • page.5 = HMENU • page.5.1=TMENU • page.5.1.wrap = | <br><br> • page.5.1.NO.AtagBeforeWrap=1 • page.5.1.NO.linkWrap = &nbsp; | &nbsp; TypoScript Anweisungen für das HMENU lassen sich auch übersichtlicher formulieren { } fassen Wertzuweisungen für Properties eines Objekts zusammen page.5 = HMENU page.5.1=TMENU page.5.1{ wrap = | <br><br> NO { AtagBeforeWrap=1 linkWrap = &nbsp; | &nbsp; } } T. Kröckertskothen | April 2005 | Folie 17

  18. TypoScript – Anweisungen kopieren < • temp.MeinMenu = HMENU • temp.MeinMenu.1 = TMENU • temp.MeinMenu.1 { • wrap = | <br><br> • NO { • AtagBeforeWrap=1 • linkWrap = &nbsp; | &nbsp; • } • } • page = PAGE • page.typeNum = 0 • page.5 < temp.MeinMenu Konzept: • TypoScript-Anweisungen werden an einer Stelle festgelegt und an andere Stellen kopiert < kopiert einen Objekt-Pfad page.5 < temp.MeinMenu temp.MeinMenu wird nach page.5 kopiert top-level-Pfade mit der Bezeichnung temp (und styles) werden vom Parser nach dem Kopieren gelöscht! T. Kröckertskothen | April 2005 | Folie 18

  19. Objekt-Pfade referenzieren =< • lib.MeinMenu = HMENU • lib.MeinMenu.1 = TMENU • lib.MeinMenu.1 { • wrap = | <br><br> • NO { • AtagBeforeWrap=1 • linkWrap = &nbsp; | &nbsp; • } • } • page = PAGE • page.typeNum = 0 • page.5 <= lib.MeinMenu <=referenziert einen Objekt-Pfad • Identische Objekt-Pfade können an mehreren Stellen im TypoScript-Code verwendet werden • temp darf nicht für referenzierte Objekt-Pfade verwendet werden (da vom Parser entfernt) T. Kröckertskothen | April 2005 | Folie 19

  20. Objekt-Pfade löschen > • lib.MeinMenu = HMENU • lib.MeinMenu.1 = TMENU • lib.MeinMenu.1 { • wrap = | <br><br> • NO { • AtagBeforeWrap=1 • linkWrap = &nbsp; | &nbsp; • } • } • page = PAGE • page.typeNum = 0 • lib.MeinMenu > • page.5 < lib.MeinMenu lib.MeinMenu > • Objekt lib.Meinu ist ab der TypoScript-Zeile gelöscht. Das Menü wird in diesem Fall nicht angezeigt – Demo-Anwendung • > wird benötigt, um in Template-Hierarchien übergeordnete Objekt-Pfade sicher zu bereinigen und durch eigene Werte zu ersetzen. T. Kröckertskothen | April 2005 | Folie 20

  21. Bedingungen Bedingungen werden durch [bedingung] eingeleitet [else] Verzweigung [end] Ende der Bedinugung [global] setzt alle Bedingungen zurück kehrt zur obersten (globalen) TypoScript-Ebene zurück Es gibt Bedingungen für • Browser • Betriebssysteme • Zeiten • Sprachen • IP-Adressen • …. • siehe TSRef • [browser = netscape] • page.5 =< lib.MeinMenu • [else] • page.5=TEXT • page.5.value = KEIN MENUE • [end] • [global] T. Kröckertskothen | April 2005 | Folie 21

  22. Kommentare in TypoScript • # Dies ist ein Kommentar • // ebenfalls ein Kommentar • /* • Kommentar-Block • */ • # bisher keine Inhalts-Elemente ausgegeben! T. Kröckertskothen | April 2005 | Folie 22

  23. Inhaltselemente darstellen • Ziel: • Inhaltselemente von Seiten ausgeben • Schritte • einfaches Template für die Ausgabe von Text-Elementen • statische Templates einsetzen • content (default) nutzen • Template-Hierarchie T. Kröckertskothen | April 2005 | Folie 23

  24. Ziel: Text von Seiten ausgeben Typo3-php-classes T. Kröckertskothen | April 2005 | Folie 24

  25. Text von Seite ausgeben – TypoScript • cObject vom Typ CONTENT • Mit Property table wird die Tabelle festgelegt (Inhaltselemente einer Seite sind Datensätze in der Tabelle tt_content) • select-Anweisung für DB-Abfrage wird spezifiziert • tt_content wird als COA (Content Object Array) festgelegt • Positition 10 header-Feld des Text-Records • Positions 20 bodytext-Feld • Anmerkungen: • Es werden nur Text-Elemente des Seite angezeigt! • Für solche Standard-Anwendungen gibt es fertige statische Templates! page = PAGE page.typeNum = 0 page.10 = CONTENT page.10{ table = tt_content select { pidInList = this orderBy=sorting } } tt_content = COA tt_content{ 10 = TEXT 10.field = header 10.wrap = <h1> | </h1> 20 = TEXT 20.field = bodytext } T. Kröckertskothen | April 2005 | Folie 25

  26. statische Templates – content (default) • Satz vorgefertigter Templates in Typo3 („preset chunks of TypoScript code“) • werden in der Liste „Include statics“ im Template-Record-Editor aufgeführt • sind nicht änderbar („read only“) • CSS styled content • Ausgabe der Inhalte mit "CSS-Rendering" T. Kröckertskothen | April 2005 | Folie 26

  27. Inhalte mit style.content.get einfügen • Einfügen von Inhalt in eine Seite • # Default PAGE object: • page = PAGE • page.10 = TEXT • page.10.value = Inhalt: • page.30 < styles.content.get • # die rechte Spalte • page.40 < styles.content.getRight T. Kröckertskothen | April 2005 | Folie 27

  28. Bemerkungen zu TypoScript • TypoScript ist nur eine Syntax • Folgendes ist zulässig (aber wirkungslos) (Objekt bla mit Properties) bla = zui{ bg=gelb tzum=123 tzum { 1 = rt } • TypoScript wird vom Parser in einen php-Array überführtder Array wird von entsprechenden php-Dateien ausgewertet • Wirkung der TypoScript-Objekte (Arrays) wird von der php-Datei (Typo3-Core, Extension) festgelegt (nicht von TypoScript) • Information und Hilfe TSRef, Extension-Dokumentation • TypoScript property lookup T. Kröckertskothen | April 2005 | Folie 28

  29. HTML-Vorlagen und CSS • Aufbau einer Web-Site allein mit TypoScript-Template möglich aber nicht sinnvoll • Konzept: • HTML-Design-Vorlagen (HTML-Templates)und CSS • mit TypoScript werden nur die dynamischen Elemente (Inhalte, Menüs, Fußzeilen, etc.) gesteuert. • Vorteil u.a.: • Design-Vorlage und TypoScript können getrennt voneinander bearbeitet werden T. Kröckertskothen | April 2005 | Folie 29

  30. HTML-Template • HTML-Templage (HTML-Vorlagen-Datei) • (fileadmin/vorlagen/homepage.html) • <html> • <head> • </head> • <body> • <!-- ###DOCUMENT_BODY### begin --> • <h1>Demo-Site</h1> • ###CONTENT### • <!-- ###DOCUMENT_BODY### end --> • </body> • </html> • Anmerkung: • fileadmin/vorlagen ist ein übliches Verzeichnis, im TLUH-Template liegen die Vorlagen in typo3conf/ext/... (im fileadmin also nicht sichtbar) T. Kröckertskothen | April 2005 | Folie 30

  31. HTML-Template in TypoScript • TypoScript • page = PAGEpage.10 = TEMPLATEpage.10 {  template=FILE  template.file=fileadmin/vorlagen/homepage.html   workOnSubpart = DOCUMENT_BODY  marks {    CONTENT < styles.content.get  }} T. Kröckertskothen | April 2005 | Folie 31

  32. Anwendungs-Beispiele • Einfacher Tag tt_content.text.20.parseFunc.tags.orange = TEXT tt_content.text.20.parseFunc.tags.orange { current = 1 wrap = <font color=orange>|</font> } • Interner Bereich mit Zugangsregeln über IP-Nummer page.10.subparts.SUB_CONTENT.10 > [IP= 130.75.5.*] page.10.subparts.SUB_CONTENT.10 = COA page.10.subparts.SUB_CONTENT.10 { 10 < styles.content.get } [globals] T. Kröckertskothen | April 2005 | Folie 32

  33. Konstanten • Konstanten (Contants) • im „Constants“-Feld eines Templates definierte Werte constante = wert • es gilt TypoScript-Syntax • im „Setup“-Feld eingefügt {$constante} T. Kröckertskothen | April 2005 | Folie 33

  34. Template-Strukturen • Rootlevel-Templates • im Template-Record ist Rootlevel aktiviert • Konfiguration gilt innerhalb der gesamten Rootline – bis Werte in Sublevel-Templates überschrieben oder ergänzt werden • Sublevel-Templates • innerhalb einer Rootline mit bestehenden Rootlevel-Template • überschrieben/ergänzen bestehenden Template-Record • Basis-Templates • enthalten TypoScript (und andere Template-Record-Konfigurationen) • werden in Rootleve-Templates/Sublevel-Templates eingebunden • schaffen Ordnung im TypoScript-Code • Template on next level • Template für die nächste Ebene T. Kröckertskothen | April 2005 | Folie 34

  35. Werkzeuge zur Template-Bearbeitung • Überblick über die wichtigsten Werkzeuge zur Template-Bearbeitung • an Hand eines Standard-Templates T. Kröckertskothen | April 2005 | Folie 35

  36. Template-Werkzeuge • Werkzeuge im Template-Module • Pull-down-Menü • Constant Editor • Info/Modify • TypoScript Objekt Browser (TSOB) • Template Analyzer T. Kröckertskothen | April 2005 | Folie 36

  37. TypoScript Object Browser (TSOB) • zeigt TypoScript-Objekte und Properties • Ändern, Hinzufügen von Properties • Kontrolle und Anpassung bei der TypoScript-Entwickling T. Kröckertskothen | April 2005 | Folie 37

  38. Template Analyzer • Anzeigen der Template Hierarchie • Quelltext T. Kröckertskothen | April 2005 | Folie 38

  39. Admin-Panel • Admin-Panel – TypoScript T. Kröckertskothen | April 2005 | Folie 39

  40. typnum – &id und &type • Jede Seite wird aufgerufen mit • http://domain/index.php?id=xx • wobei xx die Seiten-ID der Seite in Typo3 ist • Zusätzlicher Parameter kann type sein: • http://domain/index.php?id=xx&type=n • n ist der Wert für den Ausgabetyp der Seite • Der Ausgabetyp wird mit der PAGE-Propertyp typeNum festgelegt • Standard-Wert ist 0 (und kann beim Aufruf entfallen) T. Kröckertskothen | April 2005 | Folie 40

  41. page.typeNum • Beispiel: • Zwei Ausgabe-Typen für eine Seite • page = PAGE • page.typeNum = 0 • page.bodyTag = <BODY bgColor="{$bgCol}"> • page.10 = HTML • page.10.value = {$zf} • page.10.value.case = upper • zweiteAusgabe = PAGE • # BEACHTE SYNTAX {} • zweiteAusgabe{ • typeNum = 30 • bodyTag = <BODY bgColor=yellow> • 10 = TEXT • 10.value = Ausgabe mit typeNum 30 • } • Aufruf • http://domain/index.php?id=1&type=30 T. Kröckertskothen | April 2005 | Folie 41

More Related