typo3-workshop typoscript und templates
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
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