Herencia compleja de plantillas en twig

Logo motor de plantillas Twig La posibilidad de realizar herencias de plantillas o ‘templates’ en Twig es una de las características más útiles de este motor de plantillas.

Sin embargo en proyectos más complejos la herencia simple de plantillas se queda corta y Twig no permite la herencia múltiple (quizás por la complejidad indeseable que esto supondría).

Lo que si está permitido, como he descubierto con alegría hace poco, es la herencia en cascada o herencia por niveles. Esto permite personalizar completamente una aplicación que esté organizada de manera modular o una web que tenga secciones muy diferenciadas.

Primero un repaso rápido a como funciona la herencia de plantillas en twig. Aquí tenemos la plantilla base o madre.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

{# templates/base.html.twig #}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Probando la herencia en Twig{% endblock %}</title>
</head>
<body>
<div id="sidebar">
{% block barra_lateral %}
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/tienda">Tienda</a></li>
</ul>
{% endblock %}
</div>
<div id="contenido">
{% block contenido %}{% endblock %}
</div>
</body>
</html>

Y ahora la plantilla hija que hereda de base.html.twig

1
2
3
4
5
6
7
8
9
10
11

{# templates/inicio.html.twig #}
{% extends 'base.html.twig' %}

{% block title %}Bienvenido a la web de Twig{% endblock %}

{% block contenido %}
{% for noticia in noticias %}
<h2>{{ noticia.titulo }}</h2>
<p>{{ noticia.contenido }}</p>
{% endfor %}
{% endblock %}

Ahora quiero diseñar la sección de la tienda, reutilizando la plantilla base para mantener la coherencia visual del sitio, pero no quiero que en la barra de la izquierda haya ninguna referencia al blog o a la página de inicio para que el cliente no se me distraiga y se me vaya.

Ahí me interesa poner un listado de categorías de producto que tengo en la tienda. Y quiero que ese listado me acompañe en cualquier página de la tienda.

Así que defino para la tienda una plantilla intermedia que hereda de la plantilla base

1
2
3
4
5
6
7
8
9
10
11
12
13
14

{# templates/tienda/intermedia.html.twig #}
{% extends 'base.html.twig' %}
{% block title %}Bienvenido a la Tienda de Twig{% endblock %}
{% block barra_lateral %}
<ul>
<li><a href="/tienda/peluches">Peluches</a></li>
<li><a href="/tienda/camisetas">Camisetas</a></li>
<li><a href="/tienda/posters">Posters</a></li>
</ul>
{% endblock %}

{% block footer %}
<p class="footer">Todos los artículos que se venden en la tienda son 100% ecológicos</p>
{% endblock %}

Y ahora haré que todas las páginas de la tienda heredarán de esta plantilla que a su vez hereda de la plantilla base

1
2
3
4
5
6
7
8
9
10
11

{# templates/tienda/ofertas.html.twig #}
{% extends 'tienda/intermedia.html.twig' %}

{% block contenido %}
{% for articulo in ofertas %}
<h2>{{ articulo.nombre }}</h2>
<img src="{{ articulo.imagen_url }}">
<p>{{ articulo.descripcion }}</p>
<p>Precio: {{ articulo.precio }}</p>
{% endfor %}
{% endblock %}

Puedes emplear tantos niveles de herencia como desees, pero el más común es este que hemos visto a tres niveles. Más quizás sea complicarte la vida
Cuantas más etiquetas {% block %} incluyas mejor. Las plantillas hijas no tienen que definir todos los bloques de la madre, por lo que puedes crear tantos bloques como vayas a necesitar en las distintas plantillas. Mientras más bloques más flexible será la plantilla.

El contenido de un bloque de una plantilla madre se puede reutilizar con la función {{ parent() }}. Esto es útil si quieres añadir contenido al bloque madre en lugar de sobreescribirlo entero. Además puedes poner tu nuevo contenido por encima o por debajo del heredado según te convenga

Si ves que estás duplicando contenido quizás debas mover ese contenido a un {% block %} en una plantilla madre, aunque a veces es mejor moverlo a una plantilla aparte a la que llamarás como include

Deja un comentario Cancelar respuesta