[Workshop] Typo3-Workshop Teil III - Das Template

[steffenk]

Wir kommen nun zum wesentlichen Teil von Typo3 - das Erstellen eines Templates.

Damit Typo3 überhaupt Seiteninhalte anzeigen kann, muss es wissen, wie die Inhalte gerendert werden und wo sie platziert werden.
Das alles passiert im Template.

Das Template hat eine eigene Scriptsprache, das TypoScript (kurz TS). Mit dieser werden wir uns nun beschäftigen.
Wir sollten uns bewusst machen, das wir beim Template am offenen Herzen des Systems operieren, und das ohne Erfahrung - aber nur Mut, Typo3 hat
genügend lebenserhaltene Massnahmen am Start

Wir begeben uns also gut ausgeschlafen in die OP. Links wählen wir "Template" aus und im Seitenbaum wählen wir unsere dafür vorgesehene Seite root aus.
Wir sehen folgendes Bild:


Bevor wir jetzt auf "Create template for a new site" klicken, lassen wir unseren Blick nach rechts oben gleiten. Wir entdecken eine Selectbox mit dem Menü für die Template-Sektion. Hier steckt unser Tisch mit dem notwendigen OP-Besteck. Daher eine kurze Erklärung, was sich dahinter verbirgt:

Constant Editor - hier können wir Werte einstellen, die für die gesamte Seite gelten wie maximale Bildgrössen, Linkziele etc.
Info / Modify - Der Punkt ist wichtig, um das Template zu verändern
TypoScript Object Browser - Hier sind alle Objekte von Typo3 in einem Baum dargestellt mit ihren Werten, können auch an Ort und Stelle verändert werden. Wir werden das oft brauchen, um uns Eigenschaften anzuschauen
Template Analyzer - wichtiges Werkzeug, um Fehler im Template aufzuspüren, vergleichbar mit PHP Fehlermeldungen incl. Zeilenangabe
CSS Style - veraltetes Werkzeug, das wir nicht brauchen. Wir arbeiten direkt an unserer CSS-Datei.

Ok, das soll uns als info genügen - wir wollen uns in die Action stürzen, also Mundschutz auf, Handschuhe an und flux auf den grossen Button geklickt ...

Es öffnet sich ein wahrlich imposantes Formular mit vielen Eingabefeldern.
Wir schauen uns unerschrocken das Formular von oben nach unten an.

Gut, fangen wir einfach an. Wir tragen ins oberste Feld einen Namen fürs Template ein, z.b. Root, als Website-Titel nehmen wir z.B. Typo3-Workshop.

Das Constants-Feld lassen wir leer. Hier kommen die Definitionen und Einstellungen rein, die für die gesamte Site gelten. Da werden wir später Einträge ergänzen.

Der wichtigste Teil ist das Setup-Feld. hier steht ja schon was drin, das schauen wir uns später genauer an.

Das Feld Resources dient zur Aufnahme von Bildern oder Icons, wir binden unsere Files aber auf dem üblichen Weg ein und brauchen das nicht.

Unter Clear und Rootlevel ist alles angehakt, und das ist auch richtig so. Es bedeutet, das alle Seiten unterhalb dieses Templates die Eigenschaften erben. Will man diese Vererbung unterbrechen, so fügt man an diese Stelle ein neues Template ein und hakt dort die Felder an, damit wird alles für die folgenden Seiten unwirksam und es gilt das neue Template ab dem Punkt. Lassen wir die Haken im neuen template weg, so können wir nur geringfügige Änderungen eintragen, der Rest gilt von unserem Root-Template.

Include static: Hier sind einige vorgefertigte Templates, die aber alle nicht berauschend sind. Wir benötigen keins davon.

Include static (from extensions): Hier sehen wir nur eine Auswahl, die css_styled_content. Diese wählen wir an.
Dies ist quasi unsere Rendering-Engine und sorgt dafür, das alle Inhalte in div-Containern landen und nicht in Tabellen, wie das in der Content (Default) deer Fall ist. Da wir ein CSS-Layout haben möchten, ist das unsere erste Wahl.

Der Rest interessiert uns erstmal nicht, wir speichern das Template ab.

Nun wollen wir natürlich sehen, was dies für Auswirkungen hat: Wir klicken auf das kleine Lupensymbol am oberen Rand und bestaunen unsere neue Seite.
Dort steht in grossen Lettern: HELLO WORLD!
Was ist das ? Will Typo3 mit uns reden ? Wo kommt das her, das haben wir doch nirgends eingetragen ?

Wir wollen der Sache auf den Grund gehen und öffnen unser Template zum bearbeiten. Hier brauchen wir nicht auf "Click here to edit whole template record" zu gehen, uns interessiert nur der Teil aus dem Setup-Feld. Wir klicken also links neben Setup auf den Bleistift.


Im Setup steht folgendes:

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

Aha ! Hier steht also das Hello World. Aber was hat das zu bedeuten, wie funktioniert das ?

Dies ist der Einstieg in Typoscript, und damit wollen wir uns im Folgenden beschäftigen, da wir unsere Anweisungen in Typoscript formulieren müssen.

[steffenk]

Viele sind jetzt bestimmt erschrocken und denken: Muss ich jetzt etwa noch eine Programmiersprache lernen, hab ich nicht schon genug Last mit HTML, CSS, PHP etc. ?

Die Antwort lautet: Ja. Typoscript ist die Steuersprache in Typo3 und gehört unmittelbar dazu. Dafür brauch man kein PHP zu können, um mit Typo3 arbeiten zu können.
Aber ich kann Euch beruhigen - Typoscript (im Folgenden nur TS genannt) ist eine sehr einfache Sprache mit einem leicht verständlichen Syntax, und ist mit Scriptsprachen wie CSS zu vergleichen. Es wird Euch also nicht sehr schwer fallen, Typoscript zu erlernen.

Kommen wir also zum Syntax von TS

Wir haben es in TS mit Objekten zu tun, die Eigenschaften haben und zugewiesen bekommen. Daher lautet der Syntax zu einer Wertzuweisung:
Objekt = Objekttyp
oder
Objekt.Eigenschaft = Wert

Der Punkt ist also das Symbol für ein Kindobjekt.
Wir wollen uns das einmal an einem (nicht anwendbaren ) Beispiel verdeutlichen, einem Baum

01	Baum = Waldpflanze
02	Baum.wrap = <ganz viele Bäume> | <ganz viele Bäume>
03	Baum.Stammumfang = 6
04	Baum.höhe = 24
05	Baum.Kind = ÄSTE
06	Baum.Kind {
07		10 = Ast
08		10.Länge = 14
09		10.Baumansatz = 4
10		10.Zweige = 36
11	
12		20 = Ast
13		20.Länge = 9
14		20.Baumansatz = 7
15		20.Zweige = 25
16	}

Wir haben mit diesen 16 Zeilen einen ganzen Wald erzeugt, nur wie ?

In Zeile 1 definieren wir ein Objekt mit dem Namen Baum und weisen ihm den Typ "Waldpflanze" zu.
In Zeile 2 "packen wir den Baum ein" (wrap=einwickeln) und setzen links und rechts von ihm ganz viel Bäume hin. Beim Einpacken brauchen wir einen Platzhalter für unseren Baum, damit Typo3 weiss, wo er hinsoll - dafür steht die Pipe (|).

Zeile 3 und 4 definieren Eigenschaften unseres Baumes, hier gilt die (Web-)Standardmasseinheit Meter ()
Unser Baum hat aber Unterobjekte, diese definieren wir in Zeile 5. Der Objekttyp ÄSTE ist eine Ansammlung von Objekten, unser Baum hat ja auch ganz viele davon.
In Zeile 6 machen wir uns einer bequemen Schreibweise zu Nutze - statt immer wieder Baum.Kind... schreiben zu müssen, fassen wir die folgenden Zeilen zusammen mit der Verschachtelung {} - Doch Vorsicht, jede geöffnete Klammer muss auch wieder geschlossen werden, sonst verläuft sich Typo3.

Da wir eine Ansammlung von Unterobjekten haben, nehmen wir einfache Bezeichner (10,20,30,...). Dies hat den Vorteil, das Typo3 sie in aufsteigender Reihenfolge abarbeitet. Wir wählen auch absichtlich 10er-Schritte, so das wir bei Bedarf auch Elemente dazwischenschieben können (5,15,18,etc). Diese müssen nicht in der richtigen Reihenfolge dastehen, Typo3 erledigt das anhand der Zahlen automatisch.

Jedes Kindelement bekommt wieder einen Objekttyp und Eigenschaften zugewiesen.

Damit haben wir auch schon das Wesentliche gelernt, war doch nicht schwer, oder ?

Wir haben noch einige Syntax-Zeichen, die ich hier erläutern möchte:

#dies ist ein Kommentar
//auch ein Kommentar
/* dies ist
ein
mehrzeiliger
lommentar
*/

Bei Kommentaren ist zu beachten, das es keine "Inline"-Kommentare gibt, also Kommentare müssen in eine extra Zeile.
Die Kommentare entsprechen übrigens PHP und Perl

Objekt >

Das Zeichen > löscht eine Objektdefinition

Objekt < Objekt2

Das Zeichen < kopiert ein Objekt. Wir könnten also unseren mühsam erstellten Baum in einer Zeile vervielfachen:

Baum2 < Baum

Hier gibt es noch das relative kopieren. Unsere Äaste sehen ja manchmal fast gleich aus, wir könnten also nach zeile 15 folgendes einschieben:

		30 < .20
		
		40 < .20
		40.Länge = 14

wir haben also inst Objekt 30 das Objekt 20 kopiert, da wir innerhalb der Klammern sind ist das dann .20
Also eigentlich nur eine Schreibabkürzung statt

30 < Baum.Kind.20

Es gibt noch die Möglichkeit, ein Objekt zu referenzieren mit

OBJEKT =< OBJEKT2

Wertzuweisungen dürfen keinen Zeilenumbruch enthalten, müssen also in einer Zeile sein.
Wenns trotzdem mehr wird, geht das mit (..)

Baum.Inschrift = Ich bin der schönste Baum im ganzen Wald
Baum.Inschrift (
	Diese Inschrift
	kann viel
	länger sein
	und sich über
	mehrere Zeilen
	erstrecken !
)

Dann gibt es den Zugriff auf Variablen, die in Konstanten definiert sind:

Baum.Inschrift = {$normale_inschrift}

Das setzt vorraus, das in Constants diese Variable definiert ist, z.B.

normale_inschrift = Ich bin ein ganz normaler Baum

Und für einfache Fallunterscheidung gibt es Conditions (Bedingungen):

[bedingung1]
...
[bedingung2]
...
[global]

Das entspricht dem Ausdruck:
Wenn Bedingung 1:
...
Oder wenn Bedingung2:
...
Ende

Somit haben wir alles an der Hand, was wir für Typoscript brauchen und können uns an die Praxis machen.

[steffenk]

Jetzt aber flux zur Praxis, wir wollen doch endlich was mit unsere geplanten Seite anfangen.

Wir haben uns ja bereits eine HTML-Vorlage gebastelt, die müssen wir öffnen und einige Modifikationen vornehmen.
Wir müssen ja Typo3 mitteilen, wohin was auf der Seite kommen soll. Dazu bedienen wir uns Platzhalter.

Es gibt 2 Platzhalter, Marker und Supparts.

Marker

Marker sind Variablen, die einfach im Template stehen, z.B.
###MARKER1### ###MARKER2### ###MARKER3###

Typo3 erkennt die Marker an den 3 Rauten vor und hinter dem Namen. Es muss keine Grossschreibweise genommen werden, aber zur besseren Erkennung hat sich das so eingebürgert.

Subparts
<!-- ###SUBPART### anfang -->
ds gfh dfg dfhgöshdfögökdhg köjshdgfh öksdg kjökjdög
<!-- ###SUBPART### Ende -->

Supparts bestehen immer aus 2 Teilen, dem Anfang und dem Ende. Sie stehen in HTML-Kommentaren, das anfang und ende ist nicht nötig und dient nur unserer Orientierung. Der Vorteil bei Subparts besteht darin, das sie bei Betrachtung der Vorlage im Browser nicht sichtbar sind und der Teil dazwischen angezeigt wird.
Wenn Typo3 diesen Suppart ersetzt, verschwindet alles zwischen den Subparts und wird von Typo3 ersetzt.

Der Einsatz dieser Variablen ist also Geschmackssache, ich benutze im Folgenden die Marker, hier sehen wir auf der Seite auch immer die Marker, die noch nicht angesprochen werden.
Damit Typo3 überhaupt weiss, welcher Teil der Vorlage zu benutzen ist, muss dieser Teil mit Subparts gekennzeichnet sein.

Hier ist unsere Vorlage, nun mit Markern und dem Subpart ausgestattet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="../css/site.css" media="screen,projection">
<title></title>

</head>

<body>
<!-- ###DOKUMENT### start -->
<div id="komplett">
	<div id="header">###LOGO###</div>
	<div id="menuline">###TOPMENU###</div>
	<div id="left">###LINKS###</div>
	<div id="content">###INHALT###</div>
	<div id="footer">###FOOTER###</div>
</div>
<!-- ###DOKUMENT### end -->
</body>
</html>

Wir speichern die Vorlage wieder. Nun wollen wir die Vorlage auch benutzen. Uns fällt auf, das der Arbeitsbereich von Typo3 innerhalb der Body-Tags ist, der Header wird also von typo3 erzeugt.

Wir begeben uns also wieder in unser BE und öffnen das Setup-Feld unseres Templates.
Dort steht immer noch folgendes:

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

Wir erkennen, es gibt in Typo3 den Objekttyp PAGE. Dies ist wohl mit der wichtigste Objekttyp, da sich alles auf die Seite bezieht.
Ein Unterobjekt hat den Objekttyp TEXT und kann über value einen Wert zugewiesen bekommen. Dies ist wohl das einfachste Objekt von Typo3.

Wir wollen aber keinen statischen Text haben sondern natürlich unsere Vorlage benutzen. Hier die einfache Einbindung:

page = PAGE
page {
	bodyTag = <body>
	includeCSS {  
    	file1 = fileadmin/css/site.css
	}
	
	10 = TEMPLATE
	10 {
    	template = FILE
    	template.file = fileadmin/templates/template.html

    	workOnSubpart = DOKUMENT
		marks {
		
		
		}
	}
}

Wir haben also eine Seite (page) definiert.
Dieser Seite haben wir einen leeren bodytag zugewiesen (defaultmässig schreibt Typo3 nämlich <body bgcolor="#FFFFFF">)
Dann haben wir die CSS-Datei zugewiesen. Hier haben wir den Syntax mit includeCSS gewählt, damit wir später einfach weitere CSS-Dateien einbinden können (file2 =, file3 = etc.)

Das Unterobjekt 10 wird zum Template. Diesem Template wird unsere Vorlage zugewiesen, der Arbeitsbereich (workOnSubpart) und ein noch leere Raum für die Marker (marks)

Wir speichern unser Template und klicken auf die Lupe. Jetzt müssten wir folgendes zu sehen bekommen:


Ah, es funktioniert, wir haben unsere Vorlage erfolgreich eingebunden

Bevor wir dazu übergehen, unsere Marker anzusprechen, mach ich erst mal Schluss für heute und bin gespannt auf Eure Erfolgsmeldungen.

Wir können natürlich auf die Schnelle mal ausprobieren, ob die Marker auch richtig angesprochen werden. Hierzu schreiben wir folgendes innerhalb von
marks { ... } :

INHALT = TEXT
INHALT.value = <h1>Meine erste Typo3-Seite</h1><p>Ach wie schön, das es doch so einfach funktioniert !</p>

Dieser Text müsste nun in unserem Inhaltsbereich erscheinen - es scheint alles wunderbar zu funktionieren

Viel Spass beim Nachbauen, jetzt seid Ihr dran.
-------------------------------------------------------------------------------------------------------------------------------------------------------------------
Status der Teilnehmer - Teil III
- Nele
- Stefan_G
- Nicolas
- Danis
- fettmme
- DSB
- miraculix
- lipsum
- Schneeschaufel
- SonKite
- steff11
- [jacky]
- heatseeker
- flo.s
- andywarhol
- 321
- schuminator
- UweB
- Minnemann
- max.m
- Scriff
- mark.S
- mpenke

[Scriff]

jo..supa..is net wirklich schwerr.alles prima bis jetzt.
muss man mit supartsanweisungen dasmachen oder reichen marks aus? und wo sind da die vor und nachteile bei der sache?
wie kann dann später der user inhalte in die schon bestehende seite eingeben ,oder kommt das noch später?

[steffenk]

immer langsam Scriff

Die Inhalte kommen dann als nächstes, das ist nicht mehr kompliziert - dieser Teil ist die grösste Hürde.

Vorteile von Subparts vs Marker:
Man kann mit Subparts eine vorhandene Seite kennzeichnen, ohne das diese Inhalte verloren gehen. So kann man innerhalb der Subparts sein Menü reinschreiben und unabhängig von Typo3 die CSS anpassen und die Vorlage im Browser betrachten.

[Scriff]

aha..hab ich jetzt nicht verstanden wo da der vorteil ist
ist es den auch möglich eigene phpscripte in den inhalt reinzuschreiben , oder auf eine bestimmte externe seite umzuleiten ?

[steffenk]

ist alles möglich, ja sogar simpel ...

man merkt, Du brennst schon auf die Fortsetzung - lassen wir die anderen erst noch zu Wort kommen

[Scriff]

alles klar.
versteh nur net ganz warum das mit den supparts dann zum bearbeiten ohne typo3 besser ist als nur mit marks.

[steffenk]

ok, ich versuche es zu erklären.

Der Designer der Seite hat mit Typo3 nichts zu tun, er will z.B. das Menü stylen. Dieses menü steht zwischen 2 subparts und enthält ein testmenü:

<ul>
<li id="activmenu">1. Punkt</li>
<li>2. Punkt</li>
<li>3. Punkt</li>
<li>4. Punkt</li>
</ul>

Der Designer kann nun die fileadmin/templates/template.html im Browser aufrufen und sieht das Testmenü, kann daran das CSS fertigstellen.

In Typo3 wird dieses Testmenü nicht dargestellt und mit dem Inhalt des entsprechenden Markers gefüllt.

[Scriff]

ahja verstehe , somit beschreiben die supparts einen abschnitt das dieser für designer markiert ist und die designer besser wissen was sie genau bearbeiten müssen.

ohne diese suppartmakierung können sich die designer also net richtig zurechtfinden...ist das so richtig ?

sollte man also immer mit supparts arbeiten.

[steffenk]

ja genau - die Designer brauchen ja alle zu stylenden Elemente. Subparts sind für diesen Zweck ideal.
Wenn man alles selber macht, ist es egal, es hängt einfach von der bevorzugten Arbeitsmethode ab.

[Nicolas]

Darf ich auch mal versuchen zu erklären?
Also, hier meine Version:
Subparts werden ja durch HTML Kommentare eingefügt. Das heißt, der Browser interpretiert diese nicht. Typo3 aber erkennt die Kommentare, und ersetzt alles was zwischen dem Start-Subpart (<!-- ###SUBPART_XYZ### START -->) und dem Stop-Subpart (<!-- ###SUBPART_XYZ### STOP -->) steht, durch eigenen Quellcode. Und damit wären wir wieder bei den Designern: Denn zwischen den Subparts könnte z.B ein Beispielmenü eingebaut sein, oder Beispielcontent. In der HTML Vorlage werden diese Beispiele angezeigt. Typo3 ersetzt aber beim Rendern dann die Beispiele.
Wenn man hingegen mit Markern arbeitet, so könnte ein Designer in der Vorlage sein Menü nicht testen, da dort dann nämlich immer nur ###MARKER_XYZ### angezeigt wird.
War das verständlich? Hoffe es ist noch ein bisschen klarer geworden, und St@eff.en ist mir nicht böse weil ich mal kurz dazwischen gefunkt habe...

[Scriff]

ahja ..auch gut erklärt....
somit ist es eigentlich sch... egal was zwischen den supparts steht da dies eh von typo3 ersetzt wird und für den designer sein inhaltz aber denoch anzeigt.

was aber wenn zwischen den supparts marker sitzen ?

[steffenk]

Sehr hypotetisch Auch unsinnig - man muss sich für eine Art entscheiden. Im TS gibt man an, was man anspricht.
mit marks spricht man Marker an, mit subparts spricht man Subparts an.

[Scriff]

wann gehts den weiter ? ohen gleich druck zu machen