Propósito de esta sesión
En esta sesión veremos las principales características del motor de plantillas Fluid, su alcance y su interacción con TYPO3 y algunos ejemplos tanto genéricos a modo introductorio, como reales utilizados en esta nueva versión del Sitio Corporativo del BCIE.
¿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.
Templates, layouts y partials
Las plantillas TYPO3 Fluid pueden ser construidas con 3 typos de archivo de pantilla:
- Templates/Plantillas (almacenados en la carpeta fileadmin/templates)
- Layouts/Distribuciones (almacenados en la carpeta fileadmin/templates/layouts)
- 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:
- Plantilla con menu y una columna de contenido
- Plantilla sin menu y una columna de contenido
- 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.
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>