Snippets + Wiki

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Du befindest dich hier: Home » typo3 » templating » fluidtemplate
Zuletzt angesehen:
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 [2016/01/19 20:52] – [Einbindung eines HTML-Templates abhängig vom BackendLayout] 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 45: 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) -->
Zeile 66: 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 102: Zeile 102:
     # Nummerierung = ID des BackendLayouts!     # Nummerierung = ID des BackendLayouts!
     1 = TEXT     1 = TEXT
-    1.value = EXT:extensionname/Resources/Private/Templates/Template-9-3.html+    1.value = EXT:templates/Resources/Private/Templates/Template-9-3.html
     2 = TEXT     2 = TEXT
-    2.value = EXT:extensionname/Resources/Private/Templates/Template-6-6.html+    2.value = EXT:templates/Resources/Private/Templates/Template-6-6.html
     default = TEXT     default = TEXT
-    default.value = EXT:extensionname/Resources/Private/Templates/DefaultTemplate.html+    default.value = EXT:templates/Resources/Private/Templates/DefaultTemplate.html
   }   }
 } }
Zeile 123: Zeile 123:
     # Nummerierung = ID des BackendLayouts!     # Nummerierung = ID des BackendLayouts!
     1 = TEXT     1 = TEXT
-    1.value = EXT:extensionname/Resources/Private/Templates/Template-9-3.html+    1.value = EXT:templates/Resources/Private/Templates/Template-9-3.html
     2 = TEXT     2 = TEXT
-    2.value = EXT:extensionname/Resources/Private/Templates/Template-6-6.html+    2.value = EXT:templates/Resources/Private/Templates/Template-6-6.html
     default = TEXT     default = TEXT
-    default.value = EXT:extensionname/Resources/Private/Templates/DefaultTemplate.html+    default.value = EXT:templates/Resources/Private/Templates/DefaultTemplate.html
   }   }
 } }
 </code> </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.1453233135.txt.gz · Zuletzt geändert: 2016/01/19 20:52 von admin

Seiten-Werkzeuge