TYPO3 Fluid - Snippets: Unterschied zwischen den Versionen

Version vom 23. Januar 2014, 17:00 Uhr

Quellen:

http://itype3.blogspot.de/2013/03/fluid-template.html

Unix Timestamp for Humans

<f:format.date = format="d.m.Y - H:i:s">@1362784580</f:format.date>

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 = <p>Hier steht der Text aus dem Template: <b>"|"</b></p>
  # 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)

<p>
  Sehr geehrte{f:if(condition: '{anredeHerr}', then: 'r Herr', else: ' Frau')} XY, <br />
  wir möchten Ihnen mitteilen, dass...
</p>

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

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 diese 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/

TYPO3 Fluid - Snippets: Unterschied zwischen den Versionen

Version vom 23. Januar 2014, 17:00 Uhr

Navigationsmenü

Ansichten

Meine Werkzeuge

Navigation

Suche

Werkzeuge

@@ Zeile 1: / Zeile 1: @@
-Unix Timestamp for Humans
+Quellen:
-<f:format.date = format="d.m.Y - H:i:s">@1362784580</f:format.date>
-Corp Text
+http://itype3.blogspot.de/2013/03/fluid-template.html
-Text auf eine gewisse Länge abschneiden
+'''Unix Timestamp for Humans'''
+ <f:format.date = format="d.m.Y - H:i:s">@1362784580</f:format.date>
+'''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="&nbsp; ...">Hier folgt der TEXT</f:format.corp>
+ <f:format.corp maxCharacters="50" append="&nbsp; ...">Hier folgt der TEXT</f:format.corp>
-.......
-Texte direkt aus dem TypoScript Objekt holen
+'''Texte direkt aus dem TypoScript Objekt holen'''
 TypoScript
-inhaltSpalteNormal < styles.content.get
+ inhaltSpalteNormal < styles.content.get
 HTML
-<f:cObject typoscriptObjectPath="inhaltSpalteNormal" />
+ <f:cObject typoscriptObjectPath="inhaltSpalteNormal" />
 Texte direkt aus dem TypoScript Objekt holen kombiniert
 TypoScript
+<pre>
 meinText = TEXT
 meinText {
@@ Zeile 23: / Zeile 27: @@
    current = 1
 }
+</pre>
 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"/>
+ <f:cObject typoscriptObjectPath="meinText" data="Das ist der Text aus dem Template"/>
 oder
+<pre>
 <f:cObject typoscriptObjectPath="meinText">
    Das ist der Text aus dem Template
 </f:cObject>
+</pre>
 Querverweise auf interne Seiten, externe Adressen, E-Mail-Adressen oder Anchor
@@ Zeile 41: / Zeile 45: @@
 Springen zu einem Anchor-Punkt
 Section entspricht der ID eines Divs
-<f:link.page section="frame">Top</f:link.page>
+ <f:link.page section="frame">Top</f:link.page>
 Link auf eine interne Seite
-<f:link.page pageUid="3">Kontakt</f:link.page>
+ <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>
+ <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>
+ <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" />
+ <f:link.email email="adresse@domain.com" />
@@ Zeile 59: / Zeile 63: @@
 TypoScript
+<pre>
 partialAuswahl = TEXT
 partialAuswahl.value = 1
@@ Zeile 65: / Zeile 70: @@
 fluidTemplate = FLUIDTEMPLATE
 fluidTemplate {
    ...
    variables {
      partial < partialAuswahl
    }
 }
+</pre>
 Template (view-helper)
 Fluid kann im Moment nur nummerische Werte überprüfen, deswegen partialAuswahl.value = 1 und {partial} == 1
+<pre>
 <f:if condition="{partial} == 1">
      <f:then>
@@ Zeile 86: / Zeile 89: @@
      </f:else>
 </f:if>
+</pre>
 Comment-View-Helper
 Man kann im Fluid-Template Kommentare hinterlassen, ohne dass diese im Frontend ausgegeben werden.
+<pre>
 <f:comment>
      Das ist ein Comment für den Entwickler, der im Quelltext
      im Gegensatz zum HTML-Comment nicht zu sehen ist
 </f:comment>
+</pre>
 Inline Notation
 TypoScript
+<pre>
 anredeHerr = TEXT
 anredeHerr.value = 1
@@ Zeile 112: / Zeile 115: @@
    }
 }
+</pre>
 Template (View-Helper)
+<pre>
 <p>
    Sehr geehrte{f:if(condition: '{anredeHerr}', then: 'r Herr', else: '&nbsp;Frau')} XY, <br />
    wir m&ouml;chten Ihnen mitteilen, dass...
 </p>
+</pre>
 Doctype auf HTML 5 umstellen
+<pre>
 page = PAGE
 page {
@@ Zeile 129: / Zeile 132: @@
    }
 }
+</pre>
 TEXT Object
 Naviagtion 2. Stufe direkt anzeigen
+<pre>
 # Navigation als Content Object Array (COA)
 nav = COA
@@ Zeile 198: / Zeile 199: @@
 }
+</pre>
@@ Zeile 208: / Zeile 209: @@
 Das hat eine Auswirkung dass im Ersten Link der zweiten Stufe ein A vor dem Link angehängt wird
 und jedem weiteren ein B
+<pre>
      # Untermenü 2. Stufe
 = TMENU
@@ Zeile 220: / Zeile 221: @@
      }
    }
+</pre>
 Navigation
 So würde dann die Navigation im Frontend aussehen
+<pre>
 Home
 Über uns
@@ Zeile 230: / Zeile 231: @@
    B Seite 2
    B Seite 3
+</pre>
 TypoScript
@@ Zeile 236: / Zeile 237: @@
 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.
+diese werden nicht formatiert nur der 1. und 2.
+<pre>
      # Untermenü 2. Stufe
 = TMENU
@@ Zeile 250: / Zeile 251: @@
      }
    }
+</pre>
 Navigation
 Das sind nun die Auswirkungen der Navigation im Frontend
+<pre>
 Home
 Über uns
@@ Zeile 262: / Zeile 263: @@
    B Seite 2
    Seite 3
+</pre>
 Weitere Informationen sind unter der Typo3 Referenz nachlesbar
 http://wiki.typo3.org/De:TSref/optionSplit
@@ Zeile 274: / Zeile 275: @@
 Oberhalb der des Templates > setup klikt man auf Kostanten, darin definiert man:
-logoDatei = logo.png
+ logoDatei = logo.png
 Im Template (setup) greift man wie folgt auf die Konstanten zu
-file = fileadmin/template_fluid/public/img/{$logoDatei}
+ file = fileadmin/template_fluid/public/img/{$logoDatei}