El layout

13/17

Lectura

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 ensrc/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 titleybodyy 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.

Aportes 3

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Creo que el comportamiento es muy similar a Blade, me gusta mucho m谩s Blade, me parece m谩s limpio y profesional, Twig no es que se vea muy f谩cil de leer, es como una mezcla de Blade y EJS

En el caso de Laravel el motor de templates se llama Blade, es muy parecido a Twig, una diferencia r谩pida que le veo es la notaci贸n.

Es similar a Laravel Blade, me alegra que tambi茅n exista en Symfony