Por qué TWIG como motor de plantillas?
La razón es muy sencilla, porque las plantillas en Twig resultan muy fáciles de estructurar, manteniendo un código más organizado y mucho más rápido de desplegar, suministrando una manera legible y confiable de organizar la información suministrada desde el controlador a la vista.
Estudiando código de controlador con plantilla TWIG
Este explicación se basa en el ejemplo de la entrada anterior llamada Crear un controlador con plantilla TWIG en Symfony 4.
Archivo \templates\base.html.twig
<!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>
Esta plantilla como su nombre lo indica, es el esqueleto base que contiene elementos de uso general en cada página, como las etiquetas (html, head y body, etc) además define bloques (block) que posteriormente vamos a modificar o agregar en plantillas que van a heredar su estructura de la plantilla base.
Los bloques siempre cuentan con una etiqueta de inicio con el nombre que describa el uso del bloque y una etiqueta de cierre como se muestra a continuación:
{% block nombrebloque %}Welcome!{% endblock %}
Archivo /template/default/index.html.twig
{% extends 'base.html.twig' %}
{% block title %}Hello DefaultController!{% endblock %}
{% block body %}
<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>
<div class="example-wrapper">
<h1>Hello {{ controller_name }}! ✅</h1>
This friendly message is coming from:
<ul>
<li>Your controller at <code><a href="{{ 'C:/xampp/htdocs/ejemplo/src/Controller/DefaultController.php'|file_link(0) }}">src/Controller/DefaultController.php</a></code></li>
<li>Your template at <code><a href="{{ 'C:/xampp/htdocs/ejemplo/templates/default/index.html.twig'|file_link(0) }}">templates/default/index.html.twig</a></code></li>
</ul>
</div>
{% endblock %}
El código autogenerado por symfony no siempre es exacto así que vamos a modificar la plantilla index.html.twig para utilizar todo el potencial que nos brinda TWIG.
{% extends 'base.html.twig' %}
{% block title %}Hello DefaultController!{% endblock %}
{% block stylesheets %}
<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>
{% endblock %}
{% block body %}
<div class="example-wrapper">
<h1>Hello {{ controller_name }}! ✅</h1>
This friendly message is coming from:
<ul>
<li>Your controller at <code><a href="{{ 'C:/xampp/htdocs/ejemplo/src/Controller/DefaultController.php'|file_link(0) }}">src/Controller/DefaultController.php</a></code></li>
<li>Your template at <code><a href="{{ 'C:/xampp/htdocs/ejemplo/templates/default/index.html.twig'|file_link(0) }}">templates/default/index.html.twig</a></code></li>
</ul>
</div>
{% endblock %}
- Línea 1: la plantilla index.html.twig hereda la estructura de la plantilla base.html.twig tenga en cuenta que la ruta raíz en las plantillas es /template.
- Bloques title, stylesheets y body: estos bloques reemplazan su contenido correspondiente en la plantilla base.
- Línea 26: las dobles llaves indican que se desea imprimir la variable controller_name, enviada desde el controlador index, a traves del método render, hacia la plantilla index.html.twig como se puede ver a continuación.
/**
* @Route("/default", name="default")
*/
public function index()
{
return $this->render('default/index.html.twig', [
'controller_name' => 'DefaultController',
]);
}