Fluid Templates
To understand the following section you need basic knowledge about how to use the Fluid templating engine and TypoScript.
This chapter is based on the following steps:
- A Composer-based TYPO3 installation, at least version 13.4.
- You have installed a Generate a site package of type "Site Package Tutorial", including the example page tree loaded in Create initial pages.
- You have familiarized yourself with Asset handling in TYPO3 (CSS, JavaScript, design related images, ...)
After this tutorial you have a better understanding of the example templates and how to adjust them to your needs. You should also be able to create some templates yourself.
If you prefer to start with a pure HTML template and build all templates step by step, you can alternatively have a look a Fluid Templates from the Scratch.
Topics covered in this chapter
The page view
The Fluid templates for the whole page have to be configured via TypoScript.
In the example site package that was Generated for you
the according TypoScript can be found in file
packages/
:
page = PAGE
page {
10 = PAGEVIEW
10 {
paths {
0 = EXT:my_site_package/Resources/Private/PageView/
10 = {$MySitePackage.template_path}
}
dataProcessing {
# makes content elements available as {content} in Fluid template
10 = page-content
}
}
shortcutIcon = {$MySitePackage.favicon}
}
Line 3 defines that Fluid templates should be used for the page by using the TypoScript object PAGEVIEW.
In line 6 the default path to the page view templates is defined. The definition
could be extended in line 7 by a setting later own. For now assume all Fluid
templates for the page can be found in folder
packages/
.
The default page template
Unless a different page layout is chosen, PAGEVIEW
expects the main template of the page in file Page
within
the defined folder (packages/
).
Let us have a look at this template now:
<f:layout name="PageLayout"/>
<f:section name="Main">
<f:render partial="Stage" arguments="{_all}"/>
<div class="container">
<f:render partial="Content" arguments="{records: content.main.records}"/>
</div>
</f:section>
- In line 1 the Layout ViewHelper <f:layout>
is defined to load a layout template from folder
Page
. The file must have the same name of the templated, followed byView/ Layouts .html
, therefore filepackages/
is loaded as layout.my_ site_ package/ Resources/ Private/ Page View/ Layouts/ Page Layout. html - Line 2 starts a new section with name "Main", using the Section ViewHelper <f:section>.
- In Line 4 and 7 partial templates are loaded from
Partials
. They follow the same naming scheme like the Layout and are therefore located in filesDocumentation/
andCode Snippets/ my_ site_ package/ Resources/ Private/ Page View/ Partials/ Content. html Documentation/
. To do this they use the Render ViewHelper <f:render>.Code Snippets/ my_ site_ package/ Resources/ Private/ Page View/ Partials/ Stage. html
The Fluid layout template
The outer most HTML that is needed for all different page layouts is usually defined in a layout template:
<f:asset.css identifier="bootstrap" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
<f:asset.css identifier="main" href="EXT:my_site_package/Resources/Public/Css/main.css" />
<main>
<f:render partial="Header" arguments="{_all}"/>
<f:render section="Main"/>
<f:render partial="Footer" arguments="{_all}"/>
</main>
<f:asset.script identifier="bootstrap" src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" />
<f:asset.script identifier="main" src="EXT:my_site_package/Resources/Public/JavaScript/main.js" />
The layout template takes care of loading assets like CSS and JavaScript that are needed on all pages, using the Asset collector.
To configure the asset collector, the Asset.css ViewHelper <f:asset.css> and Asset.script ViewHelper <f:asset.script> are used.
The layout also renders sections that need to be defined with the Section ViewHelper <f:section> in the page template. In line 5 the section is rendered, which is defined in line 2-10 of the "Default" page template. It is possible to define several sections and to define optional sections. We do not demonstrate that here.
The layout template also loads some more partials, for example to display menu and the footer.
Outer most HTML structure (body, head)
The outer most HTML structure is usually not handled by your custom templates. It can be configured via the TypoScript configuration of the PAGE object.
For example you can use option shortcutIcon to load a favicon, meta to define meta tags, or add tags to the body tag using bodyTagAdd.
The page object, including examples is described in detail in the TypoScript reference, chapter Configure the PAGE in TypoScript.