37.49.33.84: Der Seiteninhalt wurde durch einen anderen Text ersetzt: „Siehe: Fluid - Snippets“

2014-12-11T09:30:11Z

Der Seiteninhalt wurde durch einen anderen Text ersetzt: „Siehe: Fluid - Snippets“

Änderungen zeigen

37.49.33.84 am 10. Dezember 2014 um 17:22 Uhr

2014-12-10T17:22:49Z

149.172.152.210 am 23. Januar 2014 um 16:00 Uhr

2014-01-23T16:00:26Z

Änderungen zeigen

149.172.152.210: Die Seite wurde neu angelegt: „Unix Timestamp for Humans @1362784580 Corp Text Text auf eine gewisse Länge abschneiden append wird dem …“

2014-01-23T15:52:50Z

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 …“

Neue Seite

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 = <ul>|</ul>

10 = TEXT
10 {
value = Home
stdWrap.typolink.parameter = 1
wrap = <li>|</li>
}

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 = <li>|</li>
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 = <li>    |</li>
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 = <li>    |</li>
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 <li> Tag welcher mit eine Kopie des ersten ist, jedoch mit einem B anfängt.
Das hat eine Auswirkung dass im Ersten Link der zweiten Stufe ein A vor dem Link angehängt wird
und jedem weiteren ein B

# Untermenü 2. Stufe
2 = TMENU
# Alle Eigenschaften der Normal und Current Zustände übernommen
2 < .1
2 {
NO.stdWrap2.wrap = <li>A    |</li> || <li>B    </li>
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 = <li>A    |</li> || <li>B    </li> ||
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/

← Nächstältere Version		Version vom 10. Dezember 2014, 17:22 Uhr
Zeile 1:		Zeile 1:
		+	== Links ==
		+	http://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/Index.html
		+
		+	== Beispiele ==
	Quellen:		Quellen:

TYPO3 Fluid - Snippets - Versionsgeschichte

37.49.33.84: Der Seiteninhalt wurde durch einen anderen Text ersetzt: „Siehe: Fluid - Snippets“

37.49.33.84 am 10. Dezember 2014 um 17:22 Uhr

149.172.152.210 am 23. Januar 2014 um 16:00 Uhr

149.172.152.210: Die Seite wurde neu angelegt: „Unix Timestamp for Humans @1362784580 Corp Text Text auf eine gewisse Länge abschneiden append wird dem …“