Snippets + Wiki

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Du befindest dich hier: Home » typo3 » templating » fluidtemplate
Zuletzt angesehen: • cobject
typo3:templating:fluidtemplate

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

Link zu der Vergleichsansicht

Beide Seiten, vorherige ÜberarbeitungVorherige Überarbeitung
Nächste Überarbeitung		Vorherige Überarbeitung
typo3:templating:fluidtemplate [2013/12/28 19:26] – admintypo3:templating:fluidtemplate [2021/03/02 19:54] (aktuell) – Condition für alternatives Fluid-Layout admin
Zeile 10: Zeile 10:
 ===== Beispiel für ein simples Fluidtemplate ===== ===== Beispiel für ein simples Fluidtemplate =====
  
-==== Typoscript ====+==== TypoScript ====
 <code typoscript> <code typoscript>
 lib.mainMenu = HMENU lib.mainMenu = HMENU
Zeile 23: Zeile 23:
   10 = FLUIDTEMPLATE   10 = FLUIDTEMPLATE
   10 {   10 {
-    file = fileadmin/fluid/Resources/Private/Templates/2-columns.html +    file = EXT:templates/Resources/Private/Templates/2-columns.html 
-    layoutRootPath = fileadmin/fluid/Resources/Private/Layouts/ +    layoutRootPath = EXT:templates/Resources/Private/Layouts/ 
-    partialRootPath = fileadmin/fluid/Resources/Private/Partials/+    partialRootPath = EXT:templates/Resources/Private/Partials/
          
     variables {     variables {
Zeile 39: Zeile 39:
         [...]         [...]
       }       }
 +    }
   }   }
 } }
Zeile 44: Zeile 45:
 ==== Ein erstes Template ==== ==== Ein erstes Template ====
 Beispiel für ein zweispaltiges Template\\ Beispiel für ein zweispaltiges Template\\
-//fileadmin/fluid/Resources/Private/Templates/2columns.html//+//EXT:templates/Resources/Private/Templates/2columns.html//
 <code html> <code html>
 <!-- Einfügen des Layouts (Dateiname ohne Endung) --> <!-- Einfügen des Layouts (Dateiname ohne Endung) -->
-<f:layout name="defaultLayout" />+<f:layout name="DefaultLayout" />
  
 <f:section name="body"> <f:section name="body">
Zeile 65: Zeile 66:
 ==== Das Layout ==== ==== Das Layout ====
 Beispiel für ein grundlegendes Layout\\ Beispiel für ein grundlegendes Layout\\
-//fileadmin/fluid/Resources/Private/Layouts/defaultLayout.html//+//EXT:templates/Resources/Private/Layouts/DefaultLayout.html//
 <code html> <code html>
 <div id="wrapper"> <div id="wrapper">
Zeile 82: Zeile 83:
 ---- ----
 ===== Einbindung eines HTML-Templates abhängig vom BackendLayout ===== ===== Einbindung eines HTML-Templates abhängig vom BackendLayout =====
-Verknüpfung der HTML-Templates (z.B. zwei- und dreispaltig) mit den (zuvor angelegten) BackendLayouts. Wenn in der aktuellen Seite kein Template/BackendLayout eingebunden ist, nutze das Template der darüber liegenden Seite. Falls bis zum root kein Template zu finden ist, nutze den default-Wert.+ 
 +==== TYPO3 4.5 bis TYPO3 7.4 ==== 
 + 
 +Zu den HTML-Templates werden passende BackendLayouts angelegt, welche auf den Seiten im Backend eingebunden werden können. Im zweiten Teil des //cObjects// ''CASE'' werden sie einander zugeordnet.\\ 
 +Im Key des //cObjects// ''CASE'' wird ausgelesen, welches BackendLayout einer Seite zugewiesen wurde. Falls der aktuellen Seite kein BackendLayout zugewiesen wurde, soll das Template der darüber liegenden Seite genutzt werden. Falls bis zum root kein BackendLayout zu finden ist, wird der default-Wert genutzt.
 <code typoscript> <code typoscript>
 page.10 = FLUIDTEMPLATE page.10 = FLUIDTEMPLATE
Zeile 89: Zeile 94:
   file.cObject {   file.cObject {
     key {     key {
-    # -1 = aktuelle Seite | backend_etc = Feld in der Datenbank | slide = am rootPath entlang nach oben suchen+      # -1 = aktuelle Seite | backend_etc = Feld in der Datenbank | slide = am rootPath entlang nach oben suchen
       data = levelfield:-1, backend_layout_next_level, slide       data = levelfield:-1, backend_layout_next_level, slide
       override {       override {
-      data = TSFE:page|backend_layout+        data = TSFE:page|backend_layout 
 +      }
     }     }
 +    # Nummerierung = ID des BackendLayouts!
 +    1 = TEXT
 +    1.value = EXT:templates/Resources/Private/Templates/Template-9-3.html
 +    2 = TEXT
 +    2.value = EXT:templates/Resources/Private/Templates/Template-6-6.html
 +    default = TEXT
 +    default.value = EXT:templates/Resources/Private/Templates/DefaultTemplate.html
   }   }
-  # Nummerierung = ID des BackendLayouts! 
-  4 = TEXT 
-  4.value = fileadmin/fluid/Resources/Private/Templates/3columns.html 
-  3 = TEXT 
-  3.value = fileadmin/fluid/Resources/Private/Templates/2columns.html 
-  default = TEXT 
-  default.value = fileadmin/fluid/Resources/Private/Templates/3columns.html 
 } }
 </code> </code>
 +
 +==== ab TYPO3 7.5 ====
 +
 +In dieser Version wurde die Option ''pagelayout'' eingeführt, um die Zuweisung von Templates mit Backend-Layouts zu vereinfachen:
 +
 +<code typoscript>
 +page.10 = FLUIDTEMPLATE
 +page.10 {
 +  file.stdWrap.cObject = CASE
 +  file.stdWrap.cObject {
 +    key.data = pagelayout
 +    # Nummerierung = ID des BackendLayouts!
 +    1 = TEXT
 +    1.value = EXT:templates/Resources/Private/Templates/Template-9-3.html
 +    2 = TEXT
 +    2.value = EXT:templates/Resources/Private/Templates/Template-6-6.html
 +    default = TEXT
 +    default.value = EXT:templates/Resources/Private/Templates/DefaultTemplate.html
 +  }
 +}
 +</code>
 +
 +----
 +
 +===== BackendLayouts über Page TSconfig =====
 +
 +<code typoscript>
 +mod.web_layout.BackendLayouts {
 +  1 {
 +    title = Layout 3-1 (Standard)
 +    config {
 +      backend_layout {
 +        colCount = 3
 +        rowCount = 1
 +        rows {
 +          1 {
 +            columns {
 +              1 {
 +                name = Hauptspalte
 +                colspan = 2
 +                colPos = 0
 +              }
 +              2 {
 +                name = rechte Spalte
 +                colPos = 2
 +              }
 +            }
 +          }
 +        }
 +      }
 +    }
 +    icon = EXT:templates/Resources/Public/Images/BackendLayouts/BELayout_9-3.png
 +  }
 +}
 +</code>
 +
 +Zu beachten ist, dass BackendLayouts aus der TSconfig das Präfix ''%%pagets__%%'' erhalten, um nicht mit manuell erstellten Layouts zu kollidieren.
 +
 +<code typoscript>
 +page.10 = FLUIDTEMPLATE
 +page.10 {
 +  file.stdWrap.cObject = CASE
 +  file.stdWrap.cObject {
 +    key.data = pagelayout
 +    // Nummerierung = ID des BackendLayouts!
 +    pagets__1 = TEXT
 +    pagets__1.value = EXT:templates/Resources/Private/Templates/Template-9-3.html
 +    pagets__2 = TEXT
 +    pagets__2.value = EXT:templates/Resources/Private/Templates/Template-6-6.html
 +    default = TEXT
 +    default.value = EXT:templates/Resources/Private/Templates/DefaultTemplate.html
 +  }
 +}
 +</code>
 +
 +----
 +
 +===== Eigene Fluid-Settings =====
 +
 +**TypoScript:**
 +<code typoscript>
 +page.10 = FLUIDTEMPLATE
 +page.10 {
 +    settings {
 +        mySetting = 0
 +    }
 +
 +    # etc.
 +}
 +
 +
 +[globalVar = TSFE:id=17]
 +page.10.settings.mySetting = 1
 +[global]
 +</code>
 +
 +**Fluid-Template:**
 +<code html>
 +<f:if condition="settings.mySetting">do something</f:if>
 +</code>
 +
 +----
 +
 +===== Assets (Stylesheets, JavaScripts) mit Fluid einbinden =====
 +
 +Ab TYPO3 8.6 kann man Fluid verwenden, um benötigte Assets z.B. über eine Extension in der Seite zu ergänzen. Es sind praktische Alternativen zum TypoScript-Setup ''includeJSFooter'' etc.
 +
 +**Fluid-Template:**
 +<code html>
 +<f:section name="HeaderAssets">
 +    <!-- zusätzliche Inhalte im <head> -->
 +</f:section>
 +
 +<f:section name="FooterAssets">
 +    <!-- zusätzliche Inhalte vor </body> -->
 +</f:section>
 +</code>
 +
 +Quelle: [[https://docs.typo3.org/c/typo3/cms-core/master/en-us/Changelog/8.6/Feature-79413-AutorenderAssetSectionsInFluidTemplateContentObject.html|TYPO3 Changelog #79413]]
 +
 +----
 +
 +===== Einem Fluid Partial zusätzliche Argumente übergeben =====
 +
 +<code html>
 +<f:alias map="{footerClassList: 'c-site-footer  c-site-footer--dark'}">
 +    <f:render partial="Site/Footer" arguments="{_all}"/>
 +</f:alias>
 +</code>
 +
 +Quelle: [[https://stackoverflow.com/a/44584209/5157290|Claus Fassing auf StackOverflow]]
 +
 +----
 +
 +===== Inhaltsspalte (colPos) in Fluid auf Inhalt prüfen =====
 +
 +Das folgende Snippet rendert einen Teil des Fluid-Templates nur, wenn die angegebene Inhaltsspalte auch Inhalt besitzt (der nicht deaktiviert ist). Praktisch z.B. für ''<aside>'' Bereiche, die nicht auf jeder Unterseite enthalten sind.
 +
 +**Voraussetzung:** das TypoScript-Objekt [[https://docs.typo3.org/c/typo3/cms-fluid-styled-content/master/en-us/Installation/InsertingContentPageTemplate/Index.html|lib.dynamicContent]] muss vorhanden sein! Dies ist kein Teil des TYPO3-Kerns und muss selbst ergänzt werden.
 +
 +Die Vorgehensweise mit ''cObject'' und Variablenzuweisung hat zudem den Vorteil, dass nur eine Datenbankabfrage erfolgen muss.
 +
 +<code html>
 +{f:cObject(typoscriptObjectPath: 'lib.dynamicContent', data: {colPos: 0}) -> f:variable(name: 'content')}
 +<f:if condition="{content}">
 +    <aside class="optional-stuff">
 +        // Render stuff
 +    </aside>
 +</f:if>
 +</code>
 +
 +Quelle: [[https://stackoverflow.com/a/53652375/|Claus Due auf StackOverflow]]
 +
 +----
 +
 +===== Condition für alternatives Fluid-Layout =====
 +
 +Eine ''f:if''-Condition kann problemlos innerhalb des ''name''-Arguments verwendet werden. Eine Condition um den ''f:layout''-Viewhelper herum würde aber nicht funktionieren.
 +
 +<code html>
 +<f:layout name="{f:if(condition: '{data.someData} == 123', then: 'SpecialLayout', else: 'Default')}" />
 +</code>
 +
 +Quelle: [[https://stackoverflow.com/a/53300737/|Rudy Gnodde auf StackOverflow]]
  
typo3/templating/fluidtemplate.1388255219.txt.gz · Zuletzt geändert: (Externe Bearbeitung)

Seiten-Werkzeuge