--- title: "Fluid Templates" manual: "Site Package Tutorial" version: "13.4" permalink: "https://docs.typo3.org/permalink/t3sitepackage:fluid-templates@13.4" source: "FluidTemplates/Index.rst" rendered: "2026-09-24T15:39:33+00:00" --- # Fluid Templates {#fluid-templates} To understand the following section you need basic knowledge of the [Fluid templating engine](https://docs.typo3.org/m/typo3/tutorial-getting-started/13.4/en-us/Concepts/Fluid/Index.html#fluid-templates) and [TypoScript](https://docs.typo3.org/m/typo3/tutorial-getting-started/13.4/en-us/Concepts/TypoScript/Index.html#typoscript). This chapter assumes the following: - A Composer-based TYPO3 installation, at least version 13.4. - You have installed a [Generate a site package of type "Site Package Tutorial"](https://docs.typo3.org/permalink/t3sitepackage:minimal-design@13.4), including the example page tree loaded in [Create initial pages](https://docs.typo3.org/permalink/t3sitepackage:typo3-backend-create-initial-pages@13.4). - You are familiar with [Asset handling in TYPO3](https://docs.typo3.org/permalink/t3sitepackage:assets-theme@13.4) (CSS, JavaScript, design related images, etc) After this tutorial you will have a better understanding of Fluid templates and how to customize them to your needs. You should also be able to create some Fluid templates yourself. If you prefer to start with an HTML template and build it up to a Fluid template step by step, have a look at [Fluid templates from scratch](https://docs.typo3.org/permalink/t3sitepackage:fluid-templates-scratch@13.4). **Topics covered in this chapter** - [The page view](https://docs.typo3.org/permalink/t3sitepackage:the-page-view@13.4) - [The default page template](https://docs.typo3.org/permalink/t3sitepackage:the-default-page-template@13.4) - [The Fluid layout template](https://docs.typo3.org/permalink/t3sitepackage:the-fluid-layout-template@13.4) - [Outermost HTML structure (body, head)](https://docs.typo3.org/permalink/t3sitepackage:outermost-html-structure-body-head@13.4) - [The footer: Example of a partial template](https://docs.typo3.org/permalink/t3sitepackage:the-footer-example-of-a-partial-template@13.4) - [Next steps: Fetch the content and configure the menus](https://docs.typo3.org/permalink/t3sitepackage:next-steps-fetch-the-content-and-configure-the-menus@13.4) ## The page view {#pageview} The Fluid templates that we will use to output the frontend pages have to be configured via TypoScript. In the site package that was [Generated for you](https://docs.typo3.org/permalink/t3sitepackage:minimal-design@13.4), the TypoScript configuration can be found in `packages/my_site_package/Configuration/Sets/SitePackage/TypoScript/page.typoscript`: **packages/my_site_package/Configuration/Sets/SitePackage/TypoScript/page.typoscript** ```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} } ``` Line 3 defines that Fluid templates should be configured using the [PAGEVIEW](https://docs.typo3.org/m/typo3/reference-typoscript/13.4/en-us/ContentObjects/Pageview/Index.html#cobj-pageview) TypoScript object . Line 6 defines the default path to the page view templates. We can add further paths to the definition in line 7 with a site setting later on. 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 {#default-page-template} Unless a different page layout is chosen, [PAGEVIEW](https://docs.typo3.org/m/typo3/reference-typoscript/13.4/en-us/ContentObjects/Pageview/Index.html#cobj-pageview) expects the main template of the page to be `PageView/Pages/Default.html` in the folder `packages/my_site_package/Resources/Private/PageView` (the path that we defined above). Let's have a look at this default page template: **packages/my_site_package/Resources/Private/PageView/Pages/Default.html** ```html
``` - In line 1 the [Layout ViewHelper \](https://docs.typo3.org/other/typo3/view-helper-reference/13.4/en-us/Global/Layout.html#typo3fluid-fluid-layout) loads a layout template from the `PageView/Layouts` folder. The layout file is referred to by name, with an `.html` on the end. The layout file here is `packages/my_site_package/Resources/Private/PageView/Layouts/PageLayout.html`. - Line 2 starts a section called "Main", using the [Section ViewHelper \](https://docs.typo3.org/other/typo3/view-helper-reference/13.4/en-us/Global/Section.html#typo3fluid-fluid-section). - Lines 4 and 7 load partial templates from the `Partials` folder. They follow the same naming scheme as the layout: they are located in `packages/my_site_package/Resources/Private/PageView/Partials/Content.html` and `packages/my_site_package/Resources/Private/PageView/Partials/Stage.html`. The partials are loaded with the [Render ViewHelper \](https://docs.typo3.org/other/typo3/view-helper-reference/13.4/en-us/Global/Render.html#typo3-fluid-render). ## The Fluid layout template {#layout-template} The outermost HTML on a page/pages is defined by a layout template: **/CodeSnippets/my_site_package/Resources/Private/PageView/Layouts/PageLayout.html** ```html
``` The layout template takes care of loading assets that are needed on all pages, like CSS and JavaScript. It uses the [Asset collector](https://docs.typo3.org/m/typo3/reference-coreapi/13.4/en-us/ApiOverview/Assets/Index.html#asset-collector). The asset collector is configured using the [Asset.css ViewHelper \](https://docs.typo3.org/other/typo3/view-helper-reference/13.4/en-us/Global/Asset/Css.html#typo3-fluid-asset-css) and [Asset.script ViewHelper \](https://docs.typo3.org/other/typo3/view-helper-reference/13.4/en-us/Global/Asset/Script.html#typo3-fluid-asset-script). Also, the layout template renders sections using a [Section ViewHelper \](https://docs.typo3.org/other/typo3/view-helper-reference/13.4/en-us/Global/Section.html#typo3fluid-fluid-section). The sections are defined in the page template. The "Main" section in line 5 is defined in lines 2-10 of the "Default" page template. It is possible to define optional sections (not shown here). Our layout template also loads some partials, for example, to display the menu and the footer. ## Outermost HTML structure (body, head) {#page-html-structure} The outermost HTML is not usually handled in Fluid templates. It is configured via TypoScript configuration of the [PAGE](https://docs.typo3.org/m/typo3/reference-typoscript/13.4/en-us/TopLevelObjects/Page/Index.html#object-type-page) object. For example, you can use the [shortcutIcon](https://docs.typo3.org/m/typo3/reference-typoscript/13.4/en-us/TopLevelObjects/Page/Index.html#confval-page-shortcuticon) option to load a favicon, [meta](https://docs.typo3.org/m/typo3/reference-typoscript/13.4/en-us/TopLevelObjects/Page/Index.html#confval-page-meta) to define meta tags, and [bodyTagAdd](https://docs.typo3.org/m/typo3/reference-typoscript/13.4/en-us/TopLevelObjects/Page/Index.html#confval-page-bodytagadd) to add attributes to the body tag. The page object, including examples, is described in detail in the TypoScript reference. See [Configure the PAGE in TypoScript](https://docs.typo3.org/m/typo3/reference-typoscript/13.4/en-us/Guide/Page/Index.html#guide-page). ## The footer: Example of a partial template {#partial-template} In the [layout template](https://docs.typo3.org/permalink/t3sitepackage:layout-template@13.4) the following partial was loaded: **/CodeSnippets/my_site_package/Resources/Private/PageView/Partials/Footer.html** ```html
© now {site.configuration.websiteTitle}
``` Line 5 uses a [Link.page ViewHelper \](https://docs.typo3.org/other/typo3/view-helper-reference/13.4/en-us/Global/Link/Page.html#typo3-fluid-link-page) to link to the start page. The start page is the same as the root page and is found in the `{site.rootPageId}` variable. The variable `{site}` is automatically provided by the [PAGEVIEW](https://docs.typo3.org/m/typo3/reference-typoscript/13.4/en-us/ContentObjects/Pageview/Index.html#cobj-pageview) TypoScript object. All variables are described in the TypoScript Reference. See [Default variables in Fluid templates](https://docs.typo3.org/m/typo3/reference-typoscript/13.4/en-us/ContentObjects/Pageview/Index.html#cobj-pageview-data). Line 6 uses an [Image ViewHelper \](https://docs.typo3.org/other/typo3/view-helper-reference/13.4/en-us/Global/Image.html#typo3-fluid-image) to display a logo in the footer. The path to the logo and its alt tag are defined in the site package settings definitions. See [Setting definitions](https://docs.typo3.org/permalink/t3sitepackage:settings-definitions-yaml-constants@13.4). Line 11 adds another partial. This partial displays a menu in the footer. See [Configuring the menus](https://docs.typo3.org/permalink/t3sitepackage:main-menu-creation@13.4). ## Next steps: Fetch the content and configure the menus {#fluid-templates-next-steps} - [Fetch and display the content](https://docs.typo3.org/permalink/t3sitepackage:content-mapping@13.4) - [Configure the menus](https://docs.typo3.org/permalink/t3sitepackage:main-menu-creation@13.4)