.. include:: /Includes.rst.txt .. highlight:: typoscript .. _basic-fluid-templates: ===================== Basic Fluid templates ===================== Here, we intend to concentrate most design work in a single file at a time. Prepare TypoScript ================== First, in the TYPO3 CMS backend, create a standard page named :name:`Home` just under (inside) the page tree TYPO3 logo container. On this standard page, create a new TypoScript template record. Give the new TypoScript template a title, make it a rootlevel template, and include the :name:`Fluid Content Elements (fluid_styled_content)` static template. In the TypoScript template Setup field, write the following lines:: lib { topNavigation = HMENU topNavigation { 1 = TMENU 1.NO.linkWrap = | |*|     |*| } breadcrumbTrail = HMENU breadcrumbTrail { special = rootline special.range = 0|-1 1 = TMENU 1.NO { stdWrap.field = nav_title // title ATagTitle.field = nav_title // title linkWrap = | |*|  »  |*| } 1.CUR = 1 1.CUR { doNotLinkIt = 1 stdWrap.field = nav_title // title linkWrap = | |*|  » || } } } This TypoScript template provides the :name:`fluid_styled_content` static template and two library objects, :typoscript:`topNavigation` and :typoscript:`breadcrumbTrail`, to the :name:`Home` page and any of its subpages. A single column page design =========================== This design produces a basic web page having a header, one column for content, and a footer. Each of the page sections has a uniquely identified HTML :html:`
` tag, allowing for future stylesheet application. In the TYPO3 CMS backend, create a standard page named :name:`SingleColumn` just under (inside) the :name:`Home` page. On the :name:`SingleColumn` standard page, create a TypoScript extension template. In the TypoScript template Setup field, write the following lines:: page = PAGE page.1 = FLUIDTEMPLATE page.1 { templateName = Basic1Column templateRootPaths.1 = fileadmin/sitedesign/Resources/Private/Templates variables { contentNormal < styles.content.get } } This :name:`SingleColumn` page TypoScript template tells TYPO3 CMS the name of the Fluid template and where to find it, using a slightly different syntax than the :name:`Minimal design` page TypoScript template. Additionally, the :name:`SingleColumn` TypoScript creates a :typoscript:`contentNormal` variable that obtains all available content from the TYPO3 backend :name:`SingleColumn` page Normal column. Create a file named :file:`Basic1Column.html` in the :file:`fileadmin/sitedesign/Resources/Private/Templates` folder, and write the following lines in the file: .. code-block:: html
{data.title}
{contentNormal}
 
This :name:`SingleColumn` page Fluid template tells TYPO3 CMS how to assemble an HTML :html:`` element for output. Notice that the template does not define the default markup seen in the minimal design resulting web page HTML source. Much of this :name:`SingleColumn` page Fluid template has typical HTML notation. The :html:`f:` prefixed items denote the Fluid namespace and follow Fluid rules. Examples here include :html:`` (shown in tag notation) and :html:`f:cObject()->f:format.raw()` (shown in inline notation). Fluid also operates on the bracketed :html:`{…}` items, such as :html:`{contentNormal}` and even the long :html:`{f:cObject…}` item in :html:`navigation-trail`. The :html:`{data.title}` item here fetches the web page title from the underlying repository. A double column page design =========================== This design produces a basic web page having a header, two columns for content, and a footer. In the TYPO3 CMS backend, create a standard page named :name:`DoubleColumn` just under (inside) the :name:`Home` page. On the :name:`DoubleColumn` standard page, create a TypoScript extension template record. In the TypoScript template Setup field, write the following lines:: page = PAGE page.1 = FLUIDTEMPLATE page.1 { templateName = Basic2ColumnPage templateRootPaths.1 = fileadmin/sitedesign/Resources/Private/Layouts variables { contentNormal < styles.content.get contentRight < styles.content.get contentRight.select.where = colPos = 2 } } This :name:`DoubleColumn` page TypoScript template tells TYPO3 CMS a different location to find the Fluid template, and adds a :typoscript:`contentRight` variable that obtains all available content from the TYPO3 backend :name:`DoubleColumn` page Right column. The :typoscript:`contentNormal` variable will obtain content from the :name:`DoubleColumn` page Normal column. Create a file named :file:`Basic2ColumnPage.html` in a :file:`fileadmin/sitedesign/Resources/Private/Layouts` folder, and write the following lines in the file: .. code-block:: html
{data.title}
{contentNormal}
{contentRight}
 
This :name:`DoubleColumn` page Fluid template puts :html:`contentNormal` and :html:`contentRight` into separate :html:`
` elements, and uses :html:`f:format.htmlentitiesDecode` instead of :html:`f:format.raw`.