Bearbeiten von „TYPO3 Fluid - Snippets“

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="&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
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
}


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: '&nbsp;Frau')} XY, <br />
  wir m&ouml;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>&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
    }
  }
  
  
}




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&nbsp;&nbsp;&nbsp;&nbsp;|</li> || <li>B&nbsp;&nbsp;&nbsp;&nbsp;</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&nbsp;&nbsp;&nbsp;&nbsp;|</li> || <li>B&nbsp;&nbsp;&nbsp;&nbsp;</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/