¿Qué es FLUID?

Fluid - Un motor de plantillas rápido y seguro

TYPO3 Fluid es un motor de plantillas para PHP. Es rápido, seguro y extendible.

Este ejemplo de una plantilla Fluid

        <h4>Plantillas personalizadas</h4>
        <p>
          <f:if condition="{miExpresion}">
            <f:then><strong>Excelente!</strong></f:then>
            <f:else>No se cumple la condición</f:else>
          </f:if>
        </p>

... será transformado en ...

        <h4>Plantillas personalizadas</h4>
        <p><strong>Excelente</strong></p>

... dependiendo de las variables que reciba la plantilla.

To top

Templates, layouts y partials

Las plantillas TYPO3 Fluid pueden ser construidas con 3 typos de archivo de pantilla:

  1. Templates/Plantillas (almacenados en la carpeta fileadmin/templates)
  2. Layouts/Distribuciones (almacenados en la carpeta fileadmin/templates/layouts)
  3. Partials/Parciales (almacenados en la carpeta fileadmin/templates/partials)

De estos 3 solo el primero es necesario para crear un sitio web y con este se inicia.

Templates

Las plantillas van a envolver la parte de contenido del sitio web. Hay 3 diferentes tipos de plantillas:

  1. Plantilla con menu y una columna de contenido
  2. Plantilla sin menu y una columna de contenido
  3. Plantilla sin menu y dos columnas de contenido

Layouts

Los layouts contienen la disposición de bloques de contenido del sitio web (que es  la parte del código HTML entre <body> y </body>).

Partials

Los partials son fragmentos de layout. Su propósito es "flexibilizar" los layouts. Aprovechando la parte común de los mismos y solo codificando la parte que cambia para cada caso. Esto también facilita el mantenimiento del código.

To top

Ejemplo "SubnavigationLeft.html"

SubnavigationLeft.html

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Default" />
<f:section name="Border">

    <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '3', slide: '{theme.pagelayout.{pagelayout}.colPos.3.slide}'}" />

</f:section>
<f:section name="Main">

    <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '8', slide: '{theme.pagelayout.{pagelayout}.colPos.8.slide}'}" />

    <div class="section section-default">
        <div class="container">
            <div class="section-row">
                <div class="section-column subnav-wrap">
                    <f:render partial="Navigation/Subnavigation" arguments="{_all}" />
                </div>
                <main class="section-column maincontent-wrap tab-content" role="main">
                    <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '0', slide: '{theme.pagelayout.{pagelayout}.colPos.0.slide}'}" />
                </main>
            </div>
        </div>
    </div>

    <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '9', slide: '{theme.pagelayout.{pagelayout}.colPos.9.slide}'}" />

</f:section>
<f:section name="Footer">

    <f:render partial="Structure/FooterContent" arguments="{_all}" />

</f:section>
</html>

 

To top