Regionales Rechenzentrum für Niedersachsen TYPO3-Workshop TypoScript und Templates RRZN Universität Hannover
Jan 19, 2016
Regionales Rechenzentrum für Niedersachsen
TYPO3-WorkshopTypoScript und Templates
RRZN Universität Hannover
Regionales Rechenzentrum für NiedersachsenT. Kröckertskothen | April 2005 | Folie 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
Regionales Rechenzentrum für NiedersachsenT. Kröckertskothen | April 2005 | Folie 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
Regionales Rechenzentrum für NiedersachsenT. Kröckertskothen | April 2005 | Folie 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
Regionales Rechenzentrum für Niedersachsen
TypoScript – Erstes Template
Ausgangslage
T. Kröckertskothen | April 2005 | Folie 5
Regionales Rechenzentrum für NiedersachsenT. Kröckertskothen | April 2005 | Folie 6
Erstes Template erstellen
Start-Seite im Seitenbaum wählenWeb-Module TemplateButton
„Create Template for a new site“
Regionales Rechenzentrum für Niedersachsen
Template-Werkzeuge – Pulldown-Menü
Werkzeuge im Template-Modul Constant-Editor Info/Modify TypoScript Object Browser Template Analyzer
T. Kröckertskothen | April 2005 | Folie 7
Regionales Rechenzentrum für Niedersachsen
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
Regionales Rechenzentrum für Niedersachsen
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
Regionales Rechenzentrum für NiedersachsenT. Kröckertskothen | April 2005 | Folie 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)
Regionales Rechenzentrum für Niedersachsen
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
Regionales Rechenzentrum für NiedersachsenT. Kröckertskothen | April 2005 | Folie 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
Regionales Rechenzentrum für NiedersachsenT. Kröckertskothen | April 2005 | Folie 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
Regionales Rechenzentrum für NiedersachsenT. Kröckertskothen | April 2005 | Folie 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.10=HTML
page.10.value (
<h1>Hallo HTML</h1>
Dies ist ein ...
<p>Inhalt wird mit TypoScript erzeugt!
<hr>
<h5>Typo3</h5>
)
Regionales Rechenzentrum für NiedersachsenT. Kröckertskothen | April 2005 | Folie 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= |
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
Regionales Rechenzentrum für NiedersachsenT. Kröckertskothen | April 2005 | Folie 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 = |
Regionales Rechenzentrum für NiedersachsenT. Kröckertskothen | April 2005 | Folie 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 = |
page.5 = HMENU
page.5.1=TMENU
page.5.1{
wrap = | <br><br>
NO {
AtagBeforeWrap=1
linkWrap = |
}
}
TypoScript Anweisungen für das HMENU lassen sich auch übersichtlicher formulieren
{ } fassen Wertzuweisungen für Properties eines Objekts zusammen
Regionales Rechenzentrum für NiedersachsenT. Kröckertskothen | April 2005 | Folie 18
TypoScript – Anweisungen kopieren <
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
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 NiedersachsenT. Kröckertskothen | April 2005 | Folie 19
Objekt-Pfade referenzieren =<
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
<= 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)
Regionales Rechenzentrum für NiedersachsenT. Kröckertskothen | April 2005 | Folie 20
Objekt-Pfade löschen >
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
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.
Regionales Rechenzentrum für NiedersachsenT. Kröckertskothen | April 2005 | Folie 21
Bedingungen
[browser = netscape]
page.5 =< lib.MeinMenu
[else]
page.5=TEXT
page.5.value = KEIN MENUE
[end]
[global]
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 NiedersachsenT. Kröckertskothen | April 2005 | Folie 22
Kommentare in TypoScript
# Dies ist ein Kommentar
// ebenfalls ein Kommentar
/*
Kommentar-Block
*/
# bisher keine Inhalts-Elemente ausgegeben!
Regionales Rechenzentrum für NiedersachsenT. Kröckertskothen | April 2005 | Folie 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
Regionales Rechenzentrum für NiedersachsenT. Kröckertskothen | April 2005 | Folie 24
Ziel: Text von Seiten ausgeben
Typo3-php-classes
Regionales Rechenzentrum für NiedersachsenT. Kröckertskothen | April 2005 | Folie 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 = PAGEpage.typeNum = 0page.10 = CONTENTpage.10{ table = tt_content select { pidInList = this orderBy=sorting }}
tt_content = COAtt_content{ 10 = TEXT 10.field = header 10.wrap = <h1> | </h1> 20 = TEXT 20.field = bodytext}
Regionales Rechenzentrum für NiedersachsenT. Kröckertskothen | April 2005 | Folie 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"
Regionales Rechenzentrum für Niedersachsen
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
Regionales Rechenzentrum für NiedersachsenT. Kröckertskothen | April 2005 | Folie 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
Regionales Rechenzentrum für Niedersachsen
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
Regionales Rechenzentrum für Niedersachsen
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
Regionales Rechenzentrum für Niedersachsen
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
Regionales Rechenzentrum für NiedersachsenT. Kröckertskothen | April 2005 | Folie 32
Anwendungs-Beispiele
Einfacher Tagtt_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-Nummerpage.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 NiedersachsenT. Kröckertskothen | April 2005 | Folie 33
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 NiedersachsenT. Kröckertskothen | April 2005 | Folie 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
Regionales Rechenzentrum für NiedersachsenT. Kröckertskothen | April 2005 | Folie 35
Werkzeuge zur Template-Bearbeitung
Überblick über die wichtigsten Werkzeuge zur Template-Bearbeitung
an Hand eines Standard-Templates
Regionales Rechenzentrum für NiedersachsenT. Kröckertskothen | April 2005 | Folie 36
Template-Werkzeuge
Werkzeuge im Template-Module
Pull-down-Menü
Constant Editor Info/Modify TypoScript Objekt Browser (TSOB) Template Analyzer
Regionales Rechenzentrum für NiedersachsenT. Kröckertskothen | April 2005 | Folie 37
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 NiedersachsenT. Kröckertskothen | April 2005 | Folie 38
Template Analyzer
Anzeigen der Template Hierarchie Quelltext
Regionales Rechenzentrum für NiedersachsenT. Kröckertskothen | April 2005 | Folie 39
Admin-Panel
Admin-Panel – TypoScript
Regionales Rechenzentrum für NiedersachsenT. Kröckertskothen | April 2005 | Folie 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 istZusä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 NiedersachsenT. Kröckertskothen | April 2005 | Folie 41
page.typeNum
Beispiel:Zwei Ausgabe-Typen für eine Seite
page = PAGEpage.typeNum = 0page.bodyTag = <BODY bgColor="{$bgCol}">page.10 = HTMLpage.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}
Aufrufhttp://domain/index.php?id=1&type=30