TYPO3-Workshop TypoScript und Templates

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

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

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

5
TypoScript Erstes Template

• Ausgangslage

6
Erstes Template erstellen

• Start-Seite im Seitenbaum wählen
• Web-Module Template
• Button Create Template for a new site

7
Template-Werkzeuge Pulldown-Menü

• Werkzeuge im Template-Modul
• Constant-Editor
• Info/Modify
• TypoScript Object Browser
• Template Analyzer

8
Hello-World-Template

• TypoScript-Template Hello-World
• Default PAGE objectpage PAGEpage.10
  TEXTpage.10.value HELLO WORLD!

9
Hello-World-Template

• TypoScript-Template Hello-World
• Default PAGE objectpage 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!)

10
PAGE

• PAGE
• TypoScript Objekt
• setup-Objekt
• startet Web-Präsentation einer Seite
  (Web-Ausgabe eines Datensatzes uid aus Tabelle
  pages)
• notwendig (ohne PAGE keine Ausgabe)
• Weitere Informationen siehe auch
• TSref
• typo3.org
• Dokumentation
• Core Documentation
• (tsref.de)

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

12
page.10TEXT

• page PAGE
• page.10 TEXT
• page.10.valueHallo 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

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

14
Content-Element HTML

• 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

page PAGE page.typeNum 0 page.10HTML page.10
.value ( lth1gtHallo HTMLlt/h1gt Dies ist
ein ... ltpgtInhalt wird mit TypoScript
erzeugt! lthrgt lth5gtTypo3lt/h5gt )
15
Ein Menü

• 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

• page.5 HMENU
• page.5.1TMENU
• page.5.1.wrap ltbrgtltbrgt
• page.5.1.NO.AtagBeforeWrap1
• page.5.1.NO.linkWrapnbsp nbsp

16
TypoScript am Beispiel Menü

• An Hand der MENU-Anweisungen werden
  TypoScript-Elemente vorgestellt
• Properties zusammenfassen
• lt Objekte kopieren
• lt Objekte referenzieren
• gt Objekte löschen

page.5 HMENU page.5.1TMENU page.5.1.wrap
ltbrgtltbrgt page.5.1.NO.AtagBeforeWrap1 page.5.1.NO.
linkWrap nbsp nbsp
17
TypoScript

• page.5 HMENU
• page.5.1TMENU
• page.5.1.wrap ltbrgtltbrgt
• page.5.1.NO.AtagBeforeWrap1
• 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.1TMENU page.5.1 wrap
ltbrgtltbrgt NO AtagBeforeWrap1
linkWrap nbsp nbsp
18
TypoScript Anweisungen kopieren lt

• temp.MeinMenu HMENU
• temp.MeinMenu.1 TMENU
• temp.MeinMenu.1
• wrap ltbrgtltbrgt
• NO
• AtagBeforeWrap1
• linkWrap nbsp nbsp
• page PAGE
• page.typeNum 0
• page.5 lt temp.MeinMenu

• Konzept
• TypoScript-Anweisungen werden an einer Stelle
  festgelegt und an andere Stellen kopiert
• lt kopiert einen Objekt-Pfad
• page.5 lt 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!

19
Objekt-Pfade referenzieren lt

• lib.MeinMenu HMENU
• lib.MeinMenu.1 TMENU
• lib.MeinMenu.1
• wrap ltbrgtltbrgt
• NO
• AtagBeforeWrap1
• linkWrap nbsp nbsp
• page PAGE
• page.typeNum 0
• page.5 lt lib.MeinMenu

• lt 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)

20
Objekt-Pfade löschen gt

• lib.MeinMenu HMENU
• lib.MeinMenu.1 TMENU
• lib.MeinMenu.1
• wrap ltbrgtltbrgt
• NO
• AtagBeforeWrap1
• linkWrap nbsp nbsp
• page PAGE
• page.typeNum 0
• lib.MeinMenu gt
• page.5 lt lib.MeinMenu

• lib.MeinMenu gt
• Objekt lib.Meinu ist ab der TypoScript-Zeile
  gelöscht.
• Das Menü wird in diesem Fall nicht angezeigt
  Demo-Anwendung
• gt wird benötigt, um in Template-Hierarchien
  übergeordnete Objekt-Pfade sicher zu bereinigen
  und durch eigene Werte zu ersetzen.

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 lt lib.MeinMenu
• else
• page.5TEXT
• page.5.value KEIN MENUE
• end
• global

22
Kommentare in TypoScript

• Dies ist ein Kommentar
• // ebenfalls ein Kommentar
• /
• Kommentar-Block
• /
• bisher keine Inhalts-Elemente ausgegeben!

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

24
Ziel Text von Seiten ausgeben
Typo3-php-classes
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 orderBysorting
tt_content COA tt_content 10 TEXT
10.field header 10.wrap lth1gt lt/h1gt 20
TEXT 20.field bodytext
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"

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 lt styles.content.get
• die rechte Spalte
• page.40 lt styles.content.getRight

28
Bemerkungen zu TypoScript

• TypoScript ist nur eine Syntax
• Folgendes ist zulässig (aber wirkungslos) (Objekt
  bla mit Properties)
• bla zui
• bggelb
• tzum123
• 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-Dokumentati
  on
• TypoScript property lookup

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

30
HTML-Template

• HTML-Templage (HTML-Vorlagen-Datei)
• (fileadmin/vorlagen/homepage.html)
• lthtmlgt
• ltheadgt
• lt/headgt
• ltbodygt
• lt!-- DOCUMENT_BODY begin --gt
• lth1gtDemo-Sitelt/h1gt
• CONTENT
• lt!-- DOCUMENT_BODY end --gt
• lt/bodygt
• lt/htmlgt
• Anmerkung
• fileadmin/vorlagen ist ein übliches Verzeichnis,
  im TLUH-Template liegen die Vorlagen in
  typo3conf/ext/... (im fileadmin also nicht
  sichtbar)

31
HTML-Template in TypoScript

• TypoScript
• page PAGEpage.10 TEMPLATEpage.10
    templateFILE  template.filefileadmin/vorlag
  en/homepage.html   workOnSubpart
  DOCUMENT_BODY  marks     CONTENT lt
  styles.content.get  

32
Anwendungs-Beispiele

• Einfacher Tag
• tt_content.text.20.parseFunc.tags.orange TEXT
• tt_content.text.20.parseFunc.tags.orange
• current 1
• wrap ltfont colororangegtlt/fontgt
• Interner Bereich mit Zugangsregeln über IP-Nummer
• page.10.subparts.SUB_CONTENT.10 gt
• IP 130.75.5.
• page.10.subparts.SUB_CONTENT.10 COA
• page.10.subparts.SUB_CONTENT.10
• 10 lt styles.content.get
• globals

33
Konstanten

• Konstanten (Contants)
• im Constants-Feld eines Templates definierte
  Werte
• constante wert
• es gilt TypoScript-Syntax
• im Setup-Feld eingefügt
• constante

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

35
Werkzeuge zur Template-Bearbeitung

• Überblick über die wichtigsten Werkzeuge zur
  Template-Bearbeitung
• an Hand eines Standard-Templates

36
Template-Werkzeuge

• Werkzeuge im Template-Module
• Pull-down-Menü
• Constant Editor
• Info/Modify
• TypoScript Objekt Browser (TSOB)
• Template Analyzer

37
TypoScript Object Browser (TSOB)

• zeigt TypoScript-Objekte und Properties
• Ändern, Hinzufügen von Properties
• Kontrolle und Anpassung bei der
  TypoScript-Entwickling

38
Template Analyzer

• Anzeigen der Template Hierarchie
• Quelltext

39
Admin-Panel

• Admin-Panel TypoScript

40
typnum id und type

• Jede Seite wird aufgerufen mit
• http//domain/index.php?idxx
• wobei xx die Seiten-ID der Seite in Typo3 ist
• Zusätzlicher Parameter kann type sein
• http//domain/index.php?idxxtypen
• 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)

41
page.typeNum

• Beispiel
• Zwei Ausgabe-Typen für eine Seite
• page PAGE
• page.typeNum 0
• page.bodyTag ltBODY bgColor"bgCol"gt
• page.10 HTML
• page.10.value zf
• page.10.value.case upper
• zweiteAusgabe PAGE
• BEACHTE SYNTAX
• zweiteAusgabe
• typeNum 30
• bodyTag ltBODY bgColoryellowgt
• 10 TEXT
• 10.value Ausgabe mit typeNum 30