--- title: "Fluid Templates from Scratch" manual: "Site Package Tutorial" version: "13.4" permalink: "https://docs.typo3.org/permalink/t3sitepackage:fluid-templates-scratch@13.4" source: "FluidTemplates/FromTheScratch.rst" rendered: "2026-09-24T15:39:33+00:00" --- # Fluid Templates from Scratch {#fluid-templates-scratch} - [Create the Fluid templates](https://docs.typo3.org/permalink/t3sitepackage:create-the-fluid-templates@13.4) - [The Fluid template for the subpage](https://docs.typo3.org/permalink/t3sitepackage:the-fluid-template-for-the-subpage@13.4) - [Extract the repeated part to a layout](https://docs.typo3.org/permalink/t3sitepackage:extract-the-repeated-part-to-a-layout@13.4) ## Create the Fluid templates {#create-template} Copy the main [static HTML file](https://docs.typo3.org/permalink/t3sitepackage:theme-example-static-html@13.4) from `Resources/Public/StaticTemplate/default.html` to `Resources/Private/PageView/Pages/Default.html`. You can override the file created in step [Minimal site package - The TYPO3 Fluid version](https://docs.typo3.org/permalink/t3sitepackage:minimal-extension-fluid@13.4). The file name must begin with a capital letter The template name `Default.html` is used as a fall back if no other template names are defined. Do not change it for now. Even though this file ends on `.html` it will be interpreted by the templating engine Fluid. TYPO3 takes care of creating the outermost HTML structure of the site, including the `` and `` tags therefore they need to be removed from the template: **Resources/Private/PageView/Pages/Default.html (difference)** ```diff - - - - - TYPO3 site package example - - - -
...
- - - - ``` The Fluid template `Default.html` now contains only the HTML code inside the body: **Resources/Private/PageView/Pages/Default.html** ```html

Custom stage

This stage contains a button to demonstrate that JavaScript is working:

Start page content

The content of the start page is displayed here. This content should be generated from the content element of the startpage

``` Flush the caches and preview the page. You should now see a pure HTML page without any styles or images. We will add them in a further step. > [!NOTE] > Each time you change a Fluid template you must flush the caches. Fluid > templates preprocessed into PHP files and stored in the folder > `var/cache/code/fluid_template`. ### Load assets (CSS, JavaScript) {#assets} Load all CSS which had been removed in step [Create the Fluid templates](https://docs.typo3.org/permalink/t3sitepackage:create-template@13.4) 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). Replace ` - + + ``` The path to the assets will be resolved by TYPO3. `EXT:` tells TYPO3 that this is an extension path. `my_site_package` is the [Extension name defined in the composer.json](https://docs.typo3.org/permalink/t3sitepackage:extension-configuration-composer@13.4). Flush all caches and preview the page. .. todo: Link to cache and preview pages in getting started once they exist When you load your page and inspect it with the developer tools of your browser you will notice that the assets are loaded from paths like `/_assets/99a57ea771f379715c522bf185e9a315/Css/main.css?1728057333`. You must never try to use these path directly, for example as absolute paths. They can change at any time. Only use the `EXT:` syntax. When you now preview the page you will notice that the your page is loaded with the dummy content from the template and functioning CSS and JavaScript. The logo however is not found. ### Load images in Fluid {#images} Replace all `` tags in the template with the [Image ViewHelper \](https://docs.typo3.org/other/typo3/view-helper-reference/13.4/en-us/Global/Image.html#typo3-fluid-image): **Resources/Private/PageView/Pages/Default.html (difference)** ```diff -Logo + ``` Just like happened with the CSS paths in step [Load assets (CSS, JavaScript)](https://docs.typo3.org/permalink/t3sitepackage:assets@13.4) the path to the image is now replaced in the output by a path like `/_assets/99a57ea771f379715c522bf185e9a315/Images/logo.svg?1728057333`. ### Split up the template into partials {#partials} If you compare the two static templates `Resources/Public/StaticTemplate/default.html` and `Resources/Public/StaticTemplate/subpagepage.html` they share many parts like the footer or the header with the menu. In order to reuse those parts we extract them to their own Fluid files. These are called partials and stored in path `Resources/Private/PageView/Partials`. We can use the [Render ViewHelper \](https://docs.typo3.org/other/typo3/view-helper-reference/13.4/en-us/Global/Render.html#typo3-fluid-render) to render the partial in the correct place. Remove the header from the template and replace it with a render ViewHelper: **Resources/Private/PageView/Pages/Default.html (difference)** ```diff
+ ...
``` Move the Fluid code you just remove to a file called `my-site-package/Resources/Private/PageView/Partials/Header.html`. Do the same with the stage, the breadcrumb, and the footer. You should now have the following files: - packages/my_site_package/Resources/Private/PageView - Pages - Default.html - Subpage.html - Partials - Footer.html - Header.html - Stage.html The Fluid template `Resources/Private/PageView/Pages/Default.html` should now look like this: **Resources/Private/PageView/Pages/Default.html** ```html

Start page content

The content of the start page is displayed here. This content should be generated from the content element of the startpage

``` You will learn how to display the dynamic content in chapter [Display the content elements on your page](https://docs.typo3.org/permalink/t3sitepackage:content-mapping@13.4). ### Extract the menu into a partial {#create-partial-header} Partials can also be rendered from within another partial. We move the menu in the partial `Resources/Private/PageView/Partials/Header.html` to its own partial, `Resources/Private/PageView/Partials/Navigation/Menu.html`: **packages/my_site_package/Resources/Private/PageView/Partials/Header.html (Difference)** ```diff ``` The [Render ViewHelper \](https://docs.typo3.org/other/typo3/view-helper-reference/13.4/en-us/Global/Render.html#typo3-fluid-render) is used the same like from within the template. Chapter [Main menu](https://docs.typo3.org/permalink/t3sitepackage:main-menu-creation@13.4) will teach you how to make the menu work. ### Extract the footer menu into a partial {#create-partial-footer-menu} We can also move the footer menu from the partial `Resources/Private/PageView/Partials/Footer.html` to its own partial, `Resources/Private/PageView/Partials/Navigation/FooterMenu.html`: **packages/my_site_package/Resources/Private/PageView/Partials/Footer.html (Difference)** ```diff
``` The footer menu partial looks like this: **Resources/Private/PageView/Partials/Navigation/FooterMenu.html** ```html ``` ### Move the content into a section {#create-section} You can also move a part of the template into a section, surrounded by a [Section ViewHelper \](https://docs.typo3.org/other/typo3/view-helper-reference/13.4/en-us/Global/Section.html#typo3fluid-fluid-section) and use the [Render ViewHelper \](https://docs.typo3.org/other/typo3/view-helper-reference/13.4/en-us/Global/Render.html#typo3-fluid-render) with argument `section` to render it. We move the content, including the Stage into such a section: **Resources/Private/PageView/Pages/Default.html (difference)** ```diff
- -
-

Start page content

-

The content of the start page is displayed here. This content should be generated from the content element of the startpage

-
+
+ + +
+

Start page content

+

The content of the start page is displayed here. This content should be generated from the content element of the startpage

+
+ ``` The result looks like this: **Resources/Private/PageView/Pages/Default.html** ```html

Start page content

The content of the start page is displayed here. This content should be generated from the content element of the startpage

``` You will learn how to display the dynamic content in chapter [Display the content elements on your page](https://docs.typo3.org/permalink/t3sitepackage:content-mapping@13.4). ## The Fluid template for the subpage {#subpage} We can repeat the above steps for the subpage and write such a template: **Resources/Private/PageView/Pages/Subpage.html** ```html

Page content

The content of each page can be displayed here.

Sidebar

Place for some shared content

 ``` ### Extract the breadcrumb into a partial {#create-partial-breadcrumb} The subpage template contain a breadcrumb, between stage and content, that you can also move to a partial. The breadcrum partial looks like this: **Resources/Private/PageView/Partials/Navigation/Breadcrumb.html** ```html
``` ## Extract the repeated part to a layout {#the-website-layout-file} Lines 1-9 of file `Subpage.html` in step [The Fluid template for the subpage](https://docs.typo3.org/permalink/t3sitepackage:subpage@13.4) are exactly the same like in file `Resources/Private/PageView/Pages/Default.html`. We can extract these lines into a so called Fluid layout and load them with the [Layout ViewHelper \](https://docs.typo3.org/other/typo3/view-helper-reference/13.4/en-us/Global/Layout.html#typo3fluid-fluid-layout): **Resources/Private/PageView/Pages/Subpage.html (difference)** ```diff - - -
- - - -
- - + ... ``` Save the extracted layout to a file called `Resources/Private/PageView/Layouts/Layout.html`. This file now contains the following: **packages/my_site_package/Resources/Private/PageView/Layouts/PageLayout.html** ```html
``` Repeat the same for file `Resources/Private/PageView/Pages/Default.html`. - packages/my_site_package/Resources/Private/PageView - Layouts - Layout.html - Pages - Default.html - Subpage.html - Partials - Navigation - Breadcrumb.html - FooterMenu.html - Menu.html - Footer.html - Header.html - Stage.html You can use the [Site Package Builder](https://get.typo3.org/sitepackage) to create a customized site package. If you want to follow this tutorial, choose "Site Package Tutorial" as base package.