Bearbeiten von „TYPO3 Fluid - Snippets“

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="&nbsp; ...">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
<pre>
meinText = TEXT
meinText {
  wrap = <p>Hier steht der Text aus dem Template:&nbsp;<b>"|"</b></p>
  # Ohne diese Einstellung würde die | nicht
  # mit dem Text aus dem Template ersezt werden
  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"/>

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

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
<pre> 
partialAuswahl = TEXT
partialAuswahl.value = 1

# FLUID Template definieren
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>
      Partial {partial} ausgegeben.
    </f:then>
  
    <f:else>
        Keine Partial-Angabe gefunden
    </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

# FLUID Template definieren
fluidTemplate = FLUIDTEMPLATE
fluidTemplate {
  ...
  variables {
    anredeHerr < anredeHerr
  }
}
</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 {
  config{
    # HTML 5
    doctype = <!DOCTYPE html>
  }
}
</pre>

TEXT Object

Naviagtion 2. Stufe direkt anzeigen
<pre>
# 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>&nbsp;&nbsp;&nbsp;&nbsp;|</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>&nbsp;&nbsp;&nbsp;&nbsp;|</li>
      ACT < .NO
      ACT.ATagParams = class="act"
      CUR < .ACT
    }
  }
  
  
}
</pre>



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
<pre>
    # Untermenü 2. Stufe
    2 = TMENU
    # Alle Eigenschaften der Normal und Current Zustände übernommen
    2 < .1
    2 {
      NO.stdWrap2.wrap = <li>A&nbsp;&nbsp;&nbsp;&nbsp;|</li> || <li>B&nbsp;&nbsp;&nbsp;&nbsp;</li>
      ACT < .NO
      CUR.ATagParams = class="active"
      CUR < .ACT
    }
  }
</pre>
Navigation
So würde dann die Navigation im Frontend aussehen
<pre>
Home
Über uns
Kontakt
  A Seite 1
  B Seite 2
  B Seite 3
</pre>

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.

<pre>
    # Untermenü 2. Stufe
    2 = TMENU
    # Alle Eigenschaften der Normal und Current Zustände übernommen
    2 < .1
    2 {
      NO.stdWrap2.wrap = <li>A&nbsp;&nbsp;&nbsp;&nbsp;|</li> || <li>B&nbsp;&nbsp;&nbsp;&nbsp;</li> ||
      ACT < .NO
      CUR.ATagParams = class="active"
      CUR < .ACT
    }
  }
</pre>

Navigation
Das sind nun die Auswirkungen der Navigation im Frontend

<pre>
Home
Über uns
Kontakt
  A Seite 1
  B Seite 2
  Seite 3
</pre>
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/