Nl:TSref/45MinutesTypoScript
From TYPO3Wiki
| 45 Minuten TypoScript |
|
||||
Contents |
Typoscript een Rondleiding
Deze inleiding in TypoScript is een eerste stap. De actuele versie is 0.5, wat betekent dat wij ons bewust zijn, dat er noch wat ontbreekt en verbeterd kan worden. Maar wij denken dat het in dit stadium al kan helpen. En omdat wij deze inleiding in de Wiki hebben geplaatst, staat het een ieder vrij opmerkingen, aanwijzingen en vragen toe te voegen. Dit wordt dan in de volgende versies weer verwerkt.
Aan deze inleiding hebben de volgende personen een substantieele bijdrage geleverd:
1. Susanne Moog 3. Martin Holtz
verder hebben de volgende personen aanwijzingen, toevoegingen en correcties geleverd:
1. Daniel Brüßler 2. M4rtijn 3. Kees van der Hall 4. en vele anderen
Inhoud inlezen
Nog niets te vertalen.
Een Menu maken
In bewerking. ** Wij hebben tot nu toe geleerd, hoe de inhoud van een pagina weergegeven kan worden. Er ontbreekt nog de voor een website noodzakelijke navigatie.
Hiervoor biedt Typo3 een speciaal Menu-Object HMENU (H voor hierarchisch). Op basis van dit Menu kunnen verschillende vormen van menu's opgebouwd worden.
Het menu moet als een niet numerieke lijst opgebouwd worden:
<XML> :<ul> <li>auf der 1. Ebene</li> <li>auf der 1. Ebene <ul> <li>auf der 2.Ebene</li> </ul> </li> <li>auf der 1. Ebene</li> </ul>
Om niet het overzicht te verliezen, maken we in een nieuwe Sysfolder een Extensie-Sjabloon.
Binnen in dit sjabloon definiëren wij een nieuw Object, die wij later in de Hoofd-Sjabloon kunnen invoegen. Zo kunnen verschillende Objecten eenvoudiger uit elkaar gehouden worden en eenvoudig voor andere projecten gebruikt worden. De extensie Sjabloon wordt in de Hoofd Sjabloon onder "Include basis template:" ingevoegd.
Üblicherweise werden diese Objekte als Unterobjekte von "lib" definiert. Es könnte aber auch jede beliebige und noch nicht verwendete Bezeichnung genommen werden.
<De:TS> :lib.textmenu = [[De:TSref/HMENU|HMENU]] lib.textmenu { # wir definieren die erste Menüebene als Textmenü 1 = TMENU # Wir definieren den ''No''rmalzustand 1.NO.allWrap = <li>|</li> # Wir definieren den ''Act''iven Zustand 1.ACT = 1 1.ACT.wrapItemAndSub = <li>|</li> # Die ganze Menü-Ebene schachteln wir in ein UL 1.wrap = <ul class="ebene1">|</ul> # Die zweite Ebene soll genau so angelegt werden. # innerhalb der geschweiften Klammer können wir # Objekte auch kopieren, in dem wir mit dem # "." anzeigen, dass das Objekt innerhalb der # Klammer existiert. 2 < .1 2.wrap = <ul class="ebene2">|</ul> 3 < .1 3.wrap = <ul class="ebene3">|</ul> }
Das Objekt HMENU ist ein Objekt, das es ermöglicht die unterschiedlichsten Menüs zu erzeugen. Für jede Ebene kann ein beliebiges Menü-Objekt verwendet werden, dass das Rendering der Ebene übernimmt. So ist es möglich in der ersten Ebene eine Grafisches Menü (GMENU) zu erzeugen und in der zweiten und dritten Ebene ein Textmenü (TMENU) zu erzeugen. Die erste Menü-Ebene wird also über die 1 definiert, die zweite über die 2 usw. Natürlich dürfen keine Lücken existieren - wenn die dritte Ebene nicht definiert ist, wird auch die vierte Ebene nicht erzeugt.
Auf jeder Menü-Ebene können für die verschiedene Menü-Zustände (NO="normal", ACT="Seiten in der Rootline, d.h. aktuelle Seite und deren Eltern-, Großeltern, Ur... usw.-Seiten", CUR="aktuelle Seite" etc.) unterschiedliche Definitionen konfiguriert werden. Dabei ist darauf zu achten, dass außer dem normalen Zustand ("NO") alle anderen Zustände explizit aktiviert werden müssen (z.B ACT=1).
Nun können wir dieses Menü verwenden und es in unsere neue Seite einzufügen:
<De:TS> :page.5 < lib.textmenu
Inhoud in een Sjabloon toevoegen
Nog niets te vertalen.
css_styled_content gebruiken
Dat we de definities van de verschillende Content Elementen van Typo3 zelf kunnen programmeren, hebben we reeds gezien. Css_styled_content neemt met zijn 2000 regels TypoScript veel werk uit handen. Het is de moeite waard, ook al is het in het begin nog niet zo duidelijk, om TypoScript nader te bekijken: Wij moeten in Typo3 op de pagina staan, waar de Setup-Sjabloon is ingevuld. Dan kiezen bij de module "Slabloon" de "Template Analyzer" uit de keuzebox. Er verschijnt een lijst met actieve en ingevoegde Typoscript-Sjablonen. Deze worden een voor een van boven naar beneden door Typo3 verwerkt en intern tot een grote Configuratie tabel samengevoegd. Met een Klik op "EXT:css_styled_content/static/" wordt de inhoud van het Sjabloon getoond. Eerst zie je de Constanten en daarna de TypoSript Setup. De Extensie css_styled_content zet op alle mogelijke plaatsen een Klasse bij het HTML element. Dit heeft als voordeel, dat het niet meer nodig is, om dit zelf te maken, maar meestal is het voldoende om uit te zoeken welke Klasse welk effect heeft en deze met behulp van CSS aan te passen.
Voorbeeld: <div class="csc-textpic-imagewrap">...
De benoemingen van de Klassen zijn eenvoudig en - wanneer de Typo3 internals bekend zijn - intuitieef. Alle Klassen beginnen met "csc" en dat staat voor "css_styled_content". Dit wordt bijvoorbeeld gevolgd door "textpic", dat weer het TypoScript Element "textpic" (Text met plaatje) betekent. "imagewrap" betekent dat de Div-Container een plaatje omsluit (wrapt).
Wat er allemaal gebeurd, kan men eenvoudig reconstrueren, als je op een lege pagina een enkel element toevoegt en dan de broncode toepast. In de regel worden bijvoorbeeld de Kopregels doorgenummerd, zodat de eerst kopregel apart behandeld kan worden. Bij tabellen worden de Klassen "even" en "oneven" toegevoegd, zodat het eenvoudig wordt, de tabel van zebra strepen te voorzien. Op dezelfde manier de onderscheidende spaties gebruikt worden. Voor HTML puristen betekent het helaas, dat op veel plaatsen CSS klassen toegevoegd worden, die in het actuele project niet gebruikt zullen worden. Om deze overbodige af te komen, moet bijna de gehele css_styled_content-Extension veranderd worden.
- Klaar **--Kees 14:19, 14 July 2008 (CEST)
COA Typoscript Objekte
to translate yet
TypoScript Funkties:
Nog niets te vertalen.
imgResource
When it's published, then put the link here and change the {{publish|reviewerSignature=--~~~~}} tag to {{stable}} .
Die Funktionen für den Datentyp „imgResource“ beziehen sich auf die Modifikation von Bildern, wie ihr Name schon vermuten lässt. Das Objekt IMAGE besitzt die Eigenschaft "file" die vom DatenTyp „imgResource“ ist.
Sie ermöglichen zum Beispiel ein Bild in der Größe zu verändern,
<TS> :temp.meinBild = IMAGE temp.meinBild { file = toplogo.gif file.width = 200 file.height = 300 }
Maximalgrößen (oder Mindestgrößen) anzugeben,
temp.meinBild = IMAGE temp.meinBild { file = toplogo.gif # für Maxmialgrößen file.maxW = 200 file.maxH = 300 # für Mindestgrößen file.minW = 100 file.minH = 120 }
und sogar die direkte Angabe eines ImageMagick-Befehls:
<TS> :temp.meinBild = IMAGE temp.meinBild { file = toplogo.gif file.params = -rotate 90 }
Eines der bekanntesten und schönsten Beispiele für die Benutzung von imgResource ist das Einfügen von dynamischen Bildern aus dem Media-Feld in den Seiteneigenschaften. Dies hat den Vorteil, dass Redakteure die Bilder ändern können ohne TypoScript zu nutzen und gleichzeitig auch zum Beispiel Header-Bilder für verschiedene Bereiche über ein wenig TypoScript realisiert werden können:
temp.dynamischerHeader = IMAGE temp.dynamischerHeader { file { # Pfad zu Importdateien definieren import = uploads/media/ import { # wenn kein Bild auf Seite, dann suche rekursiv bis Bild gefunden data = level:-1, slide # Feld angeben, in welchem das Bild definiert ist field = media # angeben, die wievielte Datei in dem Feld abgerufen wird listNum = 0 } }
Der Pfad „uploads/media/“ ist der Pfad, in dem die Dateien landen, die man in den Seiteneigenschaften unter „Dateien“ hochladen kann. Der Teil innerhalb der geschweiften Klammern von „import“ besteht komplett aus stdWrap-Funktionen, die hier genutzt werden, um anzugeben, von wo und welches Bild genau importiert werden soll. Letztlich liefert stdWrap hier den Dateinamen des Bildes der dann aus dem Import-Pfad (uploads/media) importiert werden soll.
imageLinkWrap
When it's published, then put the link here and change the {{publish|reviewerSignature=--~~~~}} tag to {{stable}} .
Mit Hilfe der Funktion „imageLinkWrap“ erzeugt man einen Link um das Bild auf das PHP-Skript „showpic.php“. Das Skript öffnet das Bild in einem neuen Fenster mit festlegbaren Parametern, wie Fensterhintergrund, Bildgröße etc. Diese Funktion kann genutzt werden um „Klick-Vergrößern“ für Bilder zu erzeugen (d.h. Ich habe ein kleines Bild (Thumbnail) und nach einem Klick auf dieses öffnet sich ein neues Fenster mit dem Bild in Originalgröße.).
<TS> :temp.meinBild = IMAGE temp.meinBild { file = toplogo.gif imageLinkWrap = 1 imageLinkWrap { # ImageLinkWrap aktivieren enable = 1 # Body-Tag für neues Fenster definieren bodyTag = <body class=“BildOriginal“> # Das Bild umschließen (hier schließt ein Klick auf das Bild das geöffnete Fenster) wrap = <''a href="javascript:close();"> | </a> # Breite des Bildes (m ermöglicht proportionales Skalieren) width = 800m # Höhe des Bildes height = 600 # Ein neues Fenster für das Bild erstellen JSwindow = 1 # Für jedes weitere Bild neue Fenster öffnen (statt immer im gleichen Fenster) JSwindow.newWindow = 1 # Padding (Rand) des neuen Fensters JSwindow.expand = 17,20 } }
numRows
to translate yet
select
to translate yet
split
to translate yet
if
to translate yet
typolink
When it's published, then put the link here and change the {{publish|reviewerSignature=--~~~~}} tag to {{stable}} .
Typolink ist die TYPO3-Funktion mit deren Hilfe man alle möglichen Arten von Links generieren kann. Wann immer möglich sollten Links mit dieser Funktion generiert werden, da diese dann in TYPO3 „registriert“ sind – dies ist die Voraussetzung dafür, dass z.B. realURL aus den Links suchmaschinenfreundliche Pfade generiert oder dafür, dass bei E-Mail-Adressen der Spamschutz klappt. Wann immer ihr also versucht sein solltet ein <a href=“...“> zu nutzen – tut es nicht.
Die Funktionsweise von typolink ist im Wesentlichen sehr einfach. Typolink verlinkt den angegebenen Text je nach definierten Parametern. Ein Beispiel:
<TS> :temp.link = TEXT temp.link { # das ist der verlinkte Text value = Beispiellink # hier kommt die typolink-Funktion typolink { # wohin soll verlinkt werden? parameter = http://www.example.com/ # mit welchem Target? (_blank wie hier öffnet neues Fenster) extTarget = _blank # eine zusätzliche Klasse für den Link, damit man ihn auch stylen kann ATagParams = class="linkclass" } }
Das obige Beispiel generiert diesen HTML-Code: <a class="linkclass" target="_blank" href="http://www.example.com/" >Beispiellink</a>
Typolink arbeitet fast wie ein wrap - der Inhalt der z.B. über value vorgegeben wird, wird durch das öffnende und schließende a-Tag gewrapped. Wenn value leer ist, also kein Inhalt vorhanden ist, wird automatisch ein Text erzeugt. Bei einem Link auf eine Seite wird der Seitentitel verwendet, bei eine Externen URL wird die URL ausgegeben.
Das Beispiel kann man jedoch abkürzen, da einem der „parameter“-Tag der typolink-Funktion schon etwas Denkarbeit abnimmt. Hier beispielhaft die kurze Variante, die haargenau den gleichen Link erzeugt, wie die obenstehende:
<TS> :temp.link2 = TEXT temp.link2 { # wieder der verlinkte Text value = Beispiellink # der Parameter mit der Zusammenfassung der oberen Parameter (Erklärung folgt unten) typolink.parameter = www.example.com _blank linkclass }
Der „parameter“-Teil der typolink-Funktion analysiert die Eingabe auf bestimmte Zeichen und wandelt anhand der gefundenen Zeichen die jeweiligen Abschnitte um. Zunächst wird die Parameter-Folge an den Leerzeichen aufgeteilt. Findet er dann wie im Beispiel im ersten Abschnitt einen Punkt „.“ (ggf. vor einem Slash) generiert er einen externen Link, findet er den Punkt „.“ nach einem Slash „/“ generiert er einen Dateilink, bei einem „@“ würde er einen E-Mail-Link generieren, bei einem einfachen Integer-Wert „51“ einen Link zur Seite mit der ID 51. Durch Voranstellen des Rautezeichen „#“ erreicht man einen Link auf ein bestimmtes Content-Element (z.B. #234 für einen Link auf das Content-Element mit der ID #234 auf der aktuellen Seite, 51#234 für das Content-Element auf der Seite mit der ID 51).
Der zweite Teil des Paramters beschreibt das Target (Ziel) für den Link. Normalerweise wird dies – wie im oberen längeren Beispiel gezeigt – durch extTarget (für externe Links) oder target (für interne Links) gesetzt, kann aber über diesen zweiten Parameter überschrieben werden.
Der dritte Teil wird automatisch in ein Klassenattribut für den Link umgewandelt.
Soll jetzt aber nur das Klassenattribut aber nicht das target gesetzt werden, muss an Stelle des targets trotzdem etwas eingesetzt werden, da die Funktion sonst nicht erkennt, dass die Klasse an dritter Stelle steht. Möchte man also kein target, weil man das Standardtarget nutzen möchte, sondern nur die Klasse sieht die Zeile so aus (mit einem Divis „-“ als Trenner):
typolink.parameter = www.example.com – linkclass
Mit Hilfe der typolink-Funktion und des target-Attributs ist es auch möglich, Links in Javascript-Popups zu öffnen:
temp.link = TEXT temp.link { # der Linktext value = Popup-Fenster öffnen typolink { # 1. Parameter = PageID der Zielseite, 2. Parameter = Größe des Javascript-Popups parameter = 10 500x400 # Das title-Tag des Links title = Hier klicken um Popup zu öffnen # die Parameter für das JS-Window JSwindow_params = menubar=0, scrollbars=0, toolbar=0, resizable=1 } }
Zu beachten ist auch, dass viele Eigenschaften von typolink vom Typ value/stdWrap sind. D.h. es können Werte berechnet werden oder aus der Datebank gelesen werden.
<TS> :lib.stdheader > lib.stdheader = TEXT lib.stdheader { field = header typolink.parameter.field = header_link wrap = <h2>|</h2> }
Die Überschrift wird ausgegeben, dabei wird ein Link gesetzt auf das Ziel das im Feld header_link angegeben ist. Die erste Zeile löscht dabei die Default-Einstellung der css_styled_content.
encapsLines
When it's published, then put the link here and change the {{publish|reviewerSignature=--~~~~}} tag to {{stable}} .
EncapsLines als Abkürzung von „encapsulate lines“ oder deutsch „Zeilen einkapseln“ ist eine TypoScript-Funktion mit deren Hilfe definiert werden kann, wie einzelne Zeilen des Inhalts umschlossen werden. Also ob zum Beispiel wenn nichts definiert wird, ein <p> oder ein <div> um das Element kommen soll, oder ob automatisiert alle Vorkommnisse von <b> mit <strong> ersetzt werden sollen.
Ein einfaches Beispiel:
Im RTE haben wir diesen Text angegeben:
Ein einfacher Text ohne alles. <div class=“myclass“>Ein Text mit einem DIV-Tag drum rum.</div>
Im TypoScript haben wir jetzt diese Definition:
encapsLines { # definiere, welche Tags als umschließende Tags gewertet werden encapsTagList = div,p # Zeilen, die nicht bereits mit Tags der encapsTagList umschlossen sind, werden mit <p>-Tags umschlossen wrapNonWrappedLines = <p>|</p> # ersetze alle DIV-Tags mit P-Tags remapTag.DIV = P # falls eine Zeile leer sein sollte, gib ein kodiertes Leerzeichen aus innerStdWrap_all.ifEmpty = }
Das Ergebnis sieht als HTML-Code so aus:
<p>Ein einfacher Text ohne alles.</p> <p> </p> <p class=“myclass“>Ein Text mit einem DIV-Tag drum rum.</p>
Bei den meisten TYPO3-Projekten wird man diese Funktion selten im eigenen Code antreffen. Da sie aber einige Standardeinstellungen der Erweiterung css_styled_content vornimmt, wird man schon häufiger in die Verlegenheit kommen, diese Funktion anzupassen. Daher hier ein Beispiel aus der Standardkonfiguration von css_styled_content um die Funktionsweise zu verdeutlichen:
lib.parseFunc_RTE { nonTypoTagStdWrap.encapsLines { # Umschließende Tags encapsTagList = div,p,pre,h1,h2,h3,h4,h5,h6 # alle DIV-Tags in <p> umwandeln remapTag.DIV = P # alle noch nicht umschlossenen Zeilen mit <p> wrappen nonWrappedTag = P # Leerzeilen mit kodiertem Leerzeichen ersetzen innerStdWrap_all.ifBlank = # hier wird die – häufig beklagte – Klasse bodytext gesetzt addAttributes.P.class = bodytext # addAttributes nur einsetzen, wenn noch kein Attribut vorhanden addAttributes.P.class.setOnly=blank } }
Vergleicht man das untere mit dem oberen Beispiel fällt auf, dass es scheinbar zwei Parameter gibt, die das gleiche tun. Zum Einen „wrapNonWrappedLines“, zum Anderen „nonWrappedTag“. Der Unterschied liegt darin, dass „nonWrappedTag“ mittels addAttributes erweitert werden kann, während bei „wrapNonWrappedLines“ der komplette Wrapping-Tag angegeben werden muss. Wenn schon umschlossene Zeilen zum Beispiel mit <p class=“blubb“>|</p> gewrappt sind, und „wrapNonWrappedLines“ auf <p>|</p> steht, ergibt das im Ergebnis eine Mischung aus P-Tags mit und ohne Klasse, statt einem einheitlichen Bild.
Hier nochmal deutlich dargestellt: Um das häufig lästige class=“bodytext“ zu entfernen, ist daher nichts weiter nötig, als folgende Zeile.
<TS> :lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class >
filelink
to translate yet
parseFunc
When you have proofed that the content is good enough for www.typo3.org, please change the {{review}} tag to {{publish|reviewerSignature=--~~~~}} .to translate yet
tags
When you have proofed that the content is good enough for www.typo3.org, please change the {{review}} tag to {{publish|reviewerSignature=--~~~~}} .
to translate yet
HTMLparser
to translate yet
stdWrap richtig nutzen
to translate yet
Grundsätzliche Anmerkungen / Hinweise
to translate yet
