Layouts y herencia de templates en Twig

Contenido del curso

Symfony Framework

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

El layout del proyecto

Hasta ahora, cada uno de los templates que usamos fue creado desde cero.

De hecho, si los miras con atención notarás que hay bastante código que se repite, por ejemplo:

Apenas comienza el tag body nos encontramos con:

<style>
   .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
   .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
</style>

¿No se podría tener este código en algún lugar común en lugar de escribirlo cada vez?

Ya en la clase anterior hablamos de incorporar algún logo de nuestro sitio… ¿Vamos a estar incluyéndolo en cada página? ¿Qué sucederá cuando lo cambiemos?

Es claro que necesitamos algo mejor.

Para ello Twig (El motor de templates que usamos) propone el concepto de Layout.

Un layout es un template abstracto que se usa, precisamente, para contener todas aquellas partes que son comunes a una serie de templates.

En el caso de Twig, la implementación de este concepto se logra a través de la _herencia _de templates.

Nota como todos los templates comienzan con:

{% extends 'base.html.twig' %}

Esto significa que el template que estás viendo extiende o hereda de base.html.twig.

Este archivo lo encontrarás en src/templates/base.html.twig

Su contenido es:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>{% block title %}Welcome!{% endblock %}</title>
       {% block stylesheets %}{% endblock %}
   </head>
   <body>
       {% block body %}{% endblock %}
       {% block javascripts %}{% endblock %}
   </body>
</html>

Nota como la apertura del HTML y los tags principales (head y body) están escritos aquí.

Otro elemento importante de este template son los {% block %}{% endblock %}

Se trata de placeholders que deberán ser rellenados por los templates hijos.

Por ejemplo, si ves templates/company/index.html.twig notarás que están definidos los bloques title ybodyy dentro de ellos se encuentra el contenido específico de esta página.

Es más, si prestas atención notarás que todo el código está metido dentro de algún bloque. Esto no es casual… todo template que extiende otro debe limitarse a sobre-escribir aquellos bloques en los que difiera de su padre.

De modo que, si quisiéramos agregar un logo de nuestro sitio, el mejor lugar para colocarlo sería en base.html.twig, de ese modo, cualquier página que visites lo tendrá:

<body>
   {% block page_header %}
       <div id="page_header" style="background: #222222">
           <img src="https://static.platzi.com/mf-landings/image/logotipo-platzi-768799552e5f26369e21a807b8a533f7.png"/>
       </div>{% endblock %}
   {% block body %}{% endblock %}
   {% block javascripts %}{% endblock %}
</body>

En general es una buena práctica usar bloques pequeños, uno nunca sabe cuándo un template más abajo en la jerarquía querrá cambiarlo.

Algo más que sería interesante es mostrar algún indicador de que estamos logueados (y en tal caso ofrecer la posibilidad de cerrar sesión) o el link al formulario de login.

Para ello podemos usar algo como:

    <div id="page_header" style="background: #5eb5e0">
           <img src="https://static.platzi.com/mf-landings/image/logotipo-platzi-768799552e5f26369e21a807b8a533f7.png"/>
           {% if app.user %}
               {{ app.user }} - <a href="{{ url('app_logout') }}">Salir</a>
           {% else %}
               <a href="{{ url('app_login') }}">Ingresar</a>
           {%  endif %}
    </div>

Y listo, ya tenemos un login/logout que nos acompaña a todos lados (A todos lados donde el template extienda de base, claro).

Podríamos definir incluso diferentes layouts para usar según la ocasión.

Podríamos tener uno para cada tipo de usuario o para cada sección del sitio… incluso podríamos tener layouts que extiendan de otros layouts… las posibilidades son infinitas.

Ahora que conoces el sistema puedes darle tu propio estilo a tu aplicación… ¡adelante!

Cuando termines de estilar tu sitio vuelve aquí que viene algo importante: el envío de los emails.

Layouts y herencia de templates en Twig

Curso de Symfony Framework

Clase 13 de 17

Clase 13 / 17

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>{% block title %}Welcome!{% endblock %}</title>
       {% block stylesheets %}{% endblock %}
   </head>
   <body>
       {% block body %}{% endblock %}
       {% block javascripts %}{% endblock %}
   </body>
</html>

<body>
   {% block page_header %}
       <div id="page_header" style="background: #222222">
           <img src="https://static.platzi.com/mf-landings/image/logotipo-platzi-768799552e5f26369e21a807b8a533f7.png"/>
       </div>{% endblock %}
   {% block body %}{% endblock %}
   {% block javascripts %}{% endblock %}
</body>

    <div id="page_header" style="background: #5eb5e0">
           <img src="https://static.platzi.com/mf-landings/image/logotipo-platzi-768799552e5f26369e21a807b8a533f7.png"/>
           {% if app.user %}
               {{ app.user }} - <a href="{{ url('app_logout') }}">Salir</a>
           {% else %}
               <a href="{{ url('app_login') }}">Ingresar</a>
           {%  endif %}
    </div>

Symfony Framework

Crea una bolsa de empleo con Symfony

Autenticación y Gestión de Ofertas en Symfony

Desarrollo de Bolsa de Empleo con Symfony en PHP

Modelo de Datos para Bolsa de Empleo: Entidades y Relaciones

Virtualización y configuración de entornos de desarrollo con Homestead

Creación y Configuración de un Proyecto Symfony con Homestead

Creación de Entidades y Migraciones en Symfony

Creación de Controladores y Rutas en Symfony

Listado y Creación de Empresas en Symfony

Control de Acceso y Creación de Usuarios en Symfony

Creación de usuarios en Symfony para administradores

Listado y Postulación a Ofertas de Trabajo en Symfony

Layouts y herencia de templates en Twig

Envío de Correos en Symfony con Mailer y Transport

Despliegue de Aplicaciones Symfony en Producción

Comparativa de Frameworks PHP: Symfony, Laravel y Más

Symfony proyecto terminado: certifica y planifica

Layouts y herencia de templates en Twig

Progreso del curso

Symfony Framework

Recursos

Recursos