typo3-workshop typoscript und templates

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


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


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


TypoScript – Erstes Template

Ausgangslage

T. Kröckertskothen | April 2005 | Folie 5


Erstes Template erstellen

Start-Seite im Seitenbaum wählenWeb-Module TemplateButton

„Create Template for a new site“


Template-Werkzeuge – Pulldown-Menü

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



Hello-World-Template

TypoScript-Template Hello-World

# Default PAGE object:page = PAGEpage.10 = TEXTpage.10.value = HELLO WORLD!



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!“)



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)


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



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


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


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>

)


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


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.NO.linkWrap = |


TypoScript { }

page.5 = HMENU

page.5.1=TMENU



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


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!


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)


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.


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


Kommentare in TypoScript

# Dies ist ein Kommentar

// ebenfalls ein Kommentar

/*

Kommentar-Block

*/

# bisher keine Inhalts-Elemente ausgegeben!


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


Ziel: Text von Seiten ausgeben

Typo3-php-classes


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}


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"


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



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


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


HTML-Template

HTML-Templage (HTML-Vorlagen-Datei)

(fileadmin/vorlagen/homepage.html)

<html>

<head>

</head>

<body>



<h1>Demo-Site</h1>

###CONTENT###



</body>

</html>

Anmerkung:

fileadmin/vorlagen ist ein übliches Verzeichnis, im TLUH-Template liegen die Vorlagen in typo3conf/ext/... (im fileadmin also nicht sichtbar)


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 }}



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]


Konstanten

Konstanten (Contants) im „Constants“-Feld eines Templates definierte Werte

constante = wert

es gilt TypoScript-Syntax im „Setup“-Feld eingefügt

{$constante}


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


Werkzeuge zur Template-Bearbeitung

Überblick über die wichtigsten Werkzeuge zur Template-Bearbeitung

an Hand eines Standard-Templates


Template-Werkzeuge

Werkzeuge im Template-Module

Pull-down-Menü

Constant Editor Info/Modify TypoScript Objekt Browser (TSOB) Template Analyzer


TypoScript Object Browser (TSOB)

zeigt TypoScript-Objekte und Properties

Ändern, Hinzufügen von Properties Kontrolle und Anpassung bei der

TypoScript-Entwickling


Template Analyzer

Anzeigen der Template Hierarchie Quelltext


Admin-Panel

Admin-Panel – TypoScript


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)


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

typo3-workshop typoscript und templates

Documents