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:

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.

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/my_site_package/Configuration/Sets/SitePackage/TypoScript/page.typoscript:

packages/my_site_package/Configuration/Sets/SitePackage/TypoScript/page.typoscript
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}
}
Copied!

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/my_site_package/Resources/Private/PageView.

The default page template

Unless a different page layout is chosen, PAGEVIEW expects the main template of the page in file PageView/Pages/Default.html within the defined folder (packages/my_site_package/Resources/Private/PageView).

Let us have a look at this template now:

packages/my_site_package/Resources/Private/PageView/Pages/Default.html
<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>
Copied!
  • In line 1 the Layout ViewHelper <f:layout> is defined to load a layout template from folder PageView/Layouts. The file must have the same name of the templated, followed by .html, therefore file packages/my_site_package/Resources/Private/PageView/Layouts/PageLayout.html is loaded as layout.
  • 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 files Documentation/CodeSnippets/my_site_package/Resources/Private/PageView/Partials/Content.html and Documentation/CodeSnippets/my_site_package/Resources/Private/PageView/Partials/Stage.html. To do this they use the Render ViewHelper <f:render>.

The Fluid layout template

The outer most HTML that is needed for all different page layouts is usually defined in a layout template:

/CodeSnippets/my_site_package/Resources/Private/PageView/Layouts/PageLayout.html
<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" />
Copied!

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.

Next steps: Fetch the content and configure the menus