|
|
| Zeile 1: |
Zeile 1: |
| − | == Links ==
| + | Siehe: [[Fluid - Snippets]] |
| − | http://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/Index.html
| |
| − | | |
| − | == Beispiele ==
| |
| − | 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
| |
| − | <pre>
| |
| − | 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
| |
| − | }
| |
| − | </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: ' Frau')} XY, <br />
| |
| − | wir mö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> |</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
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | }
| |
| − | </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 |</li> || <li>B </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 |</li> || <li>B </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/
| |
