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
Letzte ÜberarbeitungBeide Seiten, nächste Überarbeitung
typo3:templating:fluidtemplate [2016/01/19 20:52] – [Einbindung eines HTML-Templates abhängig vom BackendLayout] admintypo3:templating:fluidtemplate [2020/06/06 21:13] – Inhaltsspalte (colPos) in Fluid auf Inhalt prüfen 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/5157290|Claus Due auf StackOverflow]]
typo3/templating/fluidtemplate.txt · Zuletzt geändert: 2021/03/02 19:54 von admin

Seiten-Werkzeuge