page.10=TEXT

TYPO3-Workshop
TypoScript und Templates
RRZN Universität Hannover
Regionales Rechenzentrum für Niedersachsen
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
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 2
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
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 3
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
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 4
TypoScript – Erstes Template
Ausgangslage
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 5
Erstes Template erstellen
 Start-Seite im Seitenbaum wählen
 Web-Module Template
 Button
„Create Template for a new site“
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 6
Template-Werkzeuge – Pulldown-Menü
Werkzeuge im Template-Modul
 Constant-Editor
 Info/Modify
 TypoScript Object Browser
 Template Analyzer
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 7
Hello-World-Template
TypoScript-Template Hello-World
# Default PAGE object:
page = PAGE
page.10 = TEXT
page.10.value = HELLO WORLD!
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 8
Hello-World-Template
TypoScript-Template Hello-World
# Default PAGE object:
page = PAGE
page.10 = TEXT
page.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!“)
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 9
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)
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 10
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
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 11
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
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 12
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
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 13
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
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 14
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>
)
Ein Menü
 Position 5 wird ein HMENU (ContentObject vom Typ HMENU) gesetzt
 HMENU ist ein Array von MENUObjekten
 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
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 15
page.5 = HMENU
page.5.1=TMENU
page.5.1.wrap = | <br><br>
page.5.1.NO.AtagBeforeWrap=1
page.5.1.NO.linkWrap=  |  
TypoScript am Beispiel Menü
An Hand der MENU-Anweisungen
werden TypoScript-Elemente
vorgestellt:
{ }
<
=<
>
Properties zusammenfassen
Objekte kopieren
Objekte referenzieren
Objekte löschen
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 16
page.5 = HMENU
page.5.1=TMENU
page.5.1.wrap = | <br><br>
page.5.1.NO.AtagBeforeWrap=1
page.5.1.NO.linkWrap =   |  
TypoScript { }
TypoScript Anweisungen für das HMENU
lassen sich auch übersichtlicher
formulieren
{ } fassen Wertzuweisungen für
Properties eines Objekts
zusammen
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 17
page.5 = HMENU
page.5.1=TMENU
page.5.1.wrap = | <br><br>
page.5.1.NO.AtagBeforeWrap=1
page.5.1.NO.linkWrap =   |  
page.5 = HMENU
page.5.1=TMENU
page.5.1{
wrap = | <br><br>
NO {
AtagBeforeWrap=1
linkWrap =   |  
}
}
TypoScript – Anweisungen kopieren <
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!
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 18
temp.MeinMenu = HMENU
temp.MeinMenu.1 = TMENU
temp.MeinMenu.1 {
wrap = | <br><br>
NO {
AtagBeforeWrap=1
linkWrap =   |  
}
}
page = PAGE
page.typeNum = 0
page.5 < temp.MeinMenu
Objekt-Pfade referenzieren =<
<= referenziert einen Objekt-Pfad
 Identische Objekt-Pfade können an
mehreren Stellen im TypoScript-Code
verwendet werden
 temp darf nicht für referenzierte ObjektPfade verwendet werden (da vom
Parser entfernt)
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 19
lib.MeinMenu = HMENU
lib.MeinMenu.1 = TMENU
lib.MeinMenu.1 {
wrap = | <br><br>
NO {
AtagBeforeWrap=1
linkWrap =   |  
}
}
page = PAGE
page.typeNum = 0
page.5 <= lib.MeinMenu
Objekt-Pfade löschen >
lib.MeinMenu >
 Objekt lib.Meinu ist ab der TypoScriptZeile 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.
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 20
lib.MeinMenu = HMENU
lib.MeinMenu.1 = TMENU
lib.MeinMenu.1 {
wrap = | <br><br>
NO {
AtagBeforeWrap=1
linkWrap =   |  
}
}
page = PAGE
page.typeNum = 0
lib.MeinMenu >
page.5 < lib.MeinMenu
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
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 21
[browser = netscape]
page.5 =< lib.MeinMenu
[else]
page.5=TEXT
page.5.value = KEIN MENUE
[end]
[global]
Kommentare in TypoScript
# Dies ist ein Kommentar
// ebenfalls ein Kommentar
/*
Kommentar-Block
*/
#
bisher keine Inhalts-Elemente ausgegeben!
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 22
Inhaltselemente darstellen
Ziel:
 Inhaltselemente von Seiten ausgeben
Schritte
 einfaches Template für die Ausgabe von TextElementen
 statische Templates einsetzen
 content (default) nutzen
 Template-Hierarchie
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 23
Ziel: Text von Seiten ausgeben
Typo3-php-classes
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 24
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!
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 25
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
}
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"
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 26
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
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 27
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ührt
der Array wird von entsprechenden php-Dateien ausgewertet
 Wirkung der TypoScript-Objekte (Arrays) wird von der php-Datei (Typo3Core, Extension) festgelegt (nicht von TypoScript)
 Information und Hilfe TSRef, Extension-Dokumentation
 TypoScript property lookup
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 28
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
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 29
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)
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 30
HTML-Template in TypoScript
TypoScript
page = PAGE
page.10 = TEMPLATE
page.10 {
template=FILE
template.file=fileadmin/vorlagen/homepage.html
workOnSubpart = DOCUMENT_BODY
marks {
CONTENT < styles.content.get
}
}
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 31
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]
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 32
Konstanten
Konstanten (Contants)
 im „Constants“-Feld eines Templates definierte Werte
constante = wert
 es gilt TypoScript-Syntax
 im „Setup“-Feld eingefügt
{$constante}
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 33
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
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 34
Werkzeuge zur Template-Bearbeitung
Überblick über die wichtigsten Werkzeuge zur Template-Bearbeitung
an Hand eines Standard-Templates
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 35
Template-Werkzeuge
Werkzeuge im Template-Module
Pull-down-Menü




Constant Editor
Info/Modify
TypoScript Objekt Browser (TSOB)
Template Analyzer
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 36
TypoScript Object Browser (TSOB)
 zeigt TypoScript-Objekte und
Properties
 Ändern, Hinzufügen von Properties
 Kontrolle und Anpassung bei der
TypoScript-Entwickling
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 37
Template Analyzer
 Anzeigen der Template Hierarchie
 Quelltext
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 38
Admin-Panel
Admin-Panel – TypoScript
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 39
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)
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 40
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
Regionales Rechenzentrum für Niedersachsen
T. Kröckertskothen | April 2005 | Folie 41