TYPO3 Fluid - Snippets: Unterschied zwischen den Versionen
(Die Seite wurde neu angelegt: „Unix Timestamp for Humans <f:format.date = format="d.m.Y - H:i:s">@1362784580</f:format.date> Corp Text Text auf eine gewisse Länge abschneiden append wird dem …“) |
(kein Unterschied)
|
Version vom 23. Januar 2014, 16:52 Uhr
Unix Timestamp for Humans <f:format.date = format="d.m.Y - H:i:s">@1362784580</f:format.date>
Corp Text Text auf eine gewisse Länge abschneiden append wird dem abgekürztem Text am Ende eingefügt, wie z.B. ein Leerzeichen und drei Punkte um zu symbolisieren, dass der Text abgekürzt wurde. <f:format.corp maxCharacters="50" append=" ...">Hier folgt der TEXT</f:format.corp> ....... Texte direkt aus dem TypoScript Objekt holen TypoScript inhaltSpalteNormal < styles.content.get
HTML <f:cObject typoscriptObjectPath="inhaltSpalteNormal" />
Texte direkt aus dem TypoScript Objekt holen kombiniert TypoScript meinText = TEXT meinText {
wrap =
Hier steht der Text aus dem Template: "|"
# Ohne diese Einstellung würde die | nicht # mit dem Text aus dem Template ersezt werden current = 1
}
Template (View-Helper)
Hier gibt es zwei Varianten. Die eine per data-Attribut den Text übergeben und die Andere
zwischen den f:cObject-Tags.
<f:cObject typoscriptObjectPath="meinText" data="Das ist der Text aus dem Template"/>
oder
<f:cObject typoscriptObjectPath="meinText">
Das ist der Text aus dem Template
</f:cObject>
Querverweise auf interne Seiten, externe Adressen, E-Mail-Adressen oder Anchor
Springen zu einem Anchor-Punkt Section entspricht der ID eines Divs <f:link.page section="frame">Top</f:link.page>
Link auf eine interne Seite <f:link.page pageUid="3">Kontakt</f:link.page>
...wir können auch Parameter übergeben: <f:link.page pageUid="3" additionalParams="{name: 'wert'}">Kontakt</f:link.page>
Link auf eine externe Adresse <f:link.external url="http://www.typo3.org" target="_blank">Link zy TYPO3</f:link.external>
Link auf eine E-Mail-Adresse <f:link.email email="adresse@domain.com" />
Conditions
TypoScript partialAuswahl = TEXT partialAuswahl.value = 1
- FLUID Template definieren
fluidTemplate = FLUIDTEMPLATE fluidTemplate {
...
variables {
partial < partialAuswahl
}
}
Template (view-helper) Fluid kann im Moment nur nummerische Werte überprüfen, deswegen partialAuswahl.value = 1 und {partial} == 1
<f:if condition="{partial} == 1">
<f:then>
Partial {partial} ausgegeben.
</f:then>
<f:else>
Keine Partial-Angabe gefunden
</f:else>
</f:if>
Comment-View-Helper
Man kann im Fluid-Template Kommentare hinterlassen, ohne dass diese im Frontend ausgegeben werden.
<f:comment>
Das ist ein Comment für den Entwickler, der im Quelltext im Gegensatz zum HTML-Comment nicht zu sehen ist
</f:comment>
Inline Notation
TypoScript
anredeHerr = TEXT anredeHerr.value = 1
- FLUID Template definieren
fluidTemplate = FLUIDTEMPLATE fluidTemplate {
...
variables {
anredeHerr < anredeHerr
}
}
Template (View-Helper)
Sehr geehrte{f:if(condition: '{anredeHerr}', then: 'r Herr', else: ' Frau')} XY,
wir möchten Ihnen mitteilen, dass...
Doctype auf HTML 5 umstellen
page = PAGE page {
config{
# HTML 5
doctype = <!DOCTYPE html>
}
}
TEXT Object
Naviagtion 2. Stufe direkt anzeigen
- Navigation als Content Object Array (COA)
nav = COA nav {
wrap =
- |
10 = TEXT
10 {
value = Home
stdWrap.typolink.parameter = 1
wrap =
} 20 = HMENU 20 { 1 = TMENU # Hauptmenü 1. Stufe 1 { NO = 1 # stdwrap wendet die Eigenschaften auf den Text and # stdWrap2 wendet die Eigenschaften auf den kompletten a-Tag an NO.stdWrap2.wrap =
CUR = 1 CUR < .NO CUR.ATagParams = class="active" ACT = 1 ACT < .CUR } # Untermenü 2. Stufe /* 2 = TMENU # Alle Eigenschaften der Normal und Current Zustände übernommen 2 < .1 2 { NO.stdWrap2.wrap =
ACT < .NO CUR.ATagParams = class="active" CUR < .ACT } */ } # Wenn die 2. Stufe direkt angezeigt werden soll # ohne dass man zuerst auf den parent (1. Stufe) klikt 30 = HMENU 30 { special = directory value = 26 1 = TMENU 1 { NO = 1 NO.stdWrap2.wrap =
ACT < .NO ACT.ATagParams = class="act" CUR < .ACT } } } OPTION SPLIT Im folgenden sehen wir mit dem Option Split jedem Link noch einen Parameter übergeben Dem ersten hängen wir den Buchstaben A vorne , dann folgen zwei Pipe zeichen || gefolgt von noch einem
||
ACT < .NO CUR.ATagParams = class="active" CUR < .ACT } } Navigation So würde dann die Navigation im Frontend aussehen Home Über uns Kontakt A Seite 1 B Seite 2 B Seite 3 TypoScript Hier noch ein Beispiel wie man nur die ersten zwei Links berücksichtigen kann. Nach dem 2. LI-Tag folgen nochmals zwei Pipe Zeichen, welche den 3 und die folgende Links anspricht diesese werden nicht formatiert nur der 1. und 2. # Untermenü 2. Stufe 2 = TMENU # Alle Eigenschaften der Normal und Current Zustände übernommen 2 < .1 2 { NO.stdWrap2.wrap =
||
|| ACT < .NO CUR.ATagParams = class="active" CUR < .ACT } } Navigation Das sind nun die Auswirkungen der Navigation im Frontend Home Über uns Kontakt A Seite 1 B Seite 2 Seite 3 Weitere Informationen sind unter der Typo3 Referenz nachlesbar http://wiki.typo3.org/De:TSref/optionSplit Konstanten Für wiederkehrende Bezeichner wie Grafiken oder Textpassagen verwendet man im TypoScript am besten Konstanten Oberhalb der des Templates > setup klikt man auf Kostanten, darin definiert man: logoDatei = logo.png Im Template (setup) greift man wie folgt auf die Konstanten zu file = fileadmin/template_fluid/public/img/{$logoDatei} TypoScript Refferenz http://www.tsref.de/ http://typo3.org/documentation/document-library/core-documentation/doc_core_tsref/current/view/
