Skip to content
This repository has been archived by the owner on Apr 25, 2023. It is now read-only.

Commit

Permalink
[TASK] Remove content for layouts
Browse files Browse the repository at this point in the history
Add a link to TYPO3 Explained.

Related: #536
  • Loading branch information
sypets authored and github-actions[bot] committed Aug 1, 2022
1 parent c21b9ad commit e851fef
Showing 1 changed file with 3 additions and 81 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -8,85 +8,7 @@
Creating a consistent look and feel with layouts
================================================

While partials are suitable for small recurring elements, layouts
build the templates' frame (see Figure 8-1). They should create a
consistent look and feel of a web application and decorate an existing
template. In a layout, areas are marked as variable and replaced with the
current template. Note that the template has the focus and controls the
output. You also have to determine which layout is being used in the
template.

.. figure:: /Images/Graphics/8-Fluid/figure-8-1.png
:align: center

Figure 8-1: Layouts build the outer frame for a template, whereas recurring
elements can be implemented in a template with partials.

Now we look at how to create and use a layout. A layout is a Fluid
file in the folder :file:`Resources/Private/Layouts/`. It
contains placeholders that should be replaced by the content of the
corresponding template within the layout. In the following example, you see a
use case of the ViewHelper ``<f:render section="..." />`` as
a placeholder.

.. code-block:: html
:caption: EXT:blog_example/Resources/Private/Templates/SomeTemplate.html

<html>
<!-- ... -->
<body>
<h1>Blogging with Extbase:</h1>
<f:render section="main" />
<h6>This is the footer section</h6>
</body>
</html>

.. tip::

Layouts in Extbase usually do not contain the basic structure of a
HTML document (``<html>``, ``<head>``
etc.), since this is usually generated with TYPO3. For
illustration, though, we show a complete HTML page.

A template looks like this:

.. code-block:: html
:caption: EXT:blog_example/Resources/Private/Templates/SomeTemplate.html

<f:layout name="default" />

<f:section name="main">
<h2>Blog List</h2>
<!-- ... -->
</f:section>

The first line in the template defines
which layout should be wrapped around the template. With specifying
name="default", Fluid will use the file
:file:`Resources/Private/Layouts/default.html` as
layout.

The template must also contain ``<f:section
name="...">...</f:section>`` for every placeholder in the
layout. So by defining the placeholder
``<f:render section="main">``, like in the example layout above, a
template, which uses this layout, must define the section
``<f:section name="main">...</f:section>``, whose
content then is being inserted in the layout. Layouts can reference any number of
sections. Different sections are often used for multi-column layouts.
Besides, you can use all Fluid features in layouts, which you will get to
know in this chapter, for building templates. So layouts offer
various possibilities for efficiently templating a web application.

.. tip::

You will find a practical example for building layouts in the
section ":ref:`template-creation-by-example`" later on in this
chapter.

Now that you know how you can structure templates with
layouts and partials, we want to explore some options ViewHelpers offer. In
the following segment, we will introduce a powerful tool for template building.
A ViewHelper which combines the possibilities of Fluid and the classic
TYPO3-templating.
.. note::

The content was moved to TYPO3 Explained :ref:`t3coreapi:fluid-layouts` for
TYPO3 >= v11.5.

0 comments on commit e851fef

Please sign in to comment.