Download - ¡Twig desde 0!
![Page 1: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/1.jpg)
¡TWIG DESDE 0! APRENDAMOS QUÉ ES Y CÓMO UTILIZARLO
![Page 2: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/2.jpg)
LOS QUE OS VAN A DAR LA CHAPA
JORGE DÍAZ AMIGO
DESARROLLADOR FRONTEND ASPGEMS
Twitter: @YnarBurmecia
![Page 3: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/3.jpg)
LOS QUE OS VAN A DAR LA CHAPA
MIGUEL ÁNGEL CARO GARCÍA
DESARROLLADOR FRONT-END Y OCASIONALMENTE BACK-END (le doy a todo lo que pueda XD)
DESARROLLADOR EN ASPgems
Twitter: @miguelAngCaro
![Page 4: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/4.jpg)
ÍNDICE
1. TWIG ¿Qué es?2. ¿Cómo funciona TWIG?3. Nomenclatura básica (variables, comentarios, etc..)4. “Herramientas de TWIG” (Filtros, funciones, etc...)5. Depuración en TWIG.6. Sistema de herencia de plantillas.7. Twig Tweak.8. Parte práctica.
![Page 5: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/5.jpg)
¿Empezamos?
![Page 6: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/6.jpg)
¿Qué es TWIG?
- Es un motor y lenguaje de plantillas usado por Drupal 8.- Sistema encapsulado de trabajo.- Flexible y rápido.- Herencia de plantillas y extensiones -> (¡¡Por fin tenemos la casa limpia!!)- Adios PHP
![Page 7: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/7.jpg)
¿Qué es TWIG?
- Amigable, tanto para el diseñador como para el desarrollador.
- Separa y queda bien definida la separación entre lógica funcional y capa de presentación.
- Seguro → Tiene un modo recinto de seguridad.
![Page 8: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/8.jpg)
ANTES DE NADA … VISTAZO ATRÁS
![Page 9: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/9.jpg)
Drupal 7
HTML generado en módulos
Preprocess y process
PHP en plantillas
Ocasionalmente puede complicarse cambiar cosas muy concretas
Theming disperso
![Page 10: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/10.jpg)
¿Cómo funciona TWIG?
Se resume en 4 pasos:
- Cargar la plantilla: Si la plantilla está cargada, se va al último paso “Evaluación de la plantilla”, sino:
- Analizador léxico: reduce la plantilla (código fuente) a pequeñas piezas(secuencia de símbolos) para poder compilarlas fácilmente.
- Analizador sintáctico: convierte esa secuencia de símbolos en “el árbol de sintáxis abstracta”.
![Page 11: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/11.jpg)
¿Cómo funciona TWIG?
- El compilador → coge ese árbol de nodos y lo transforma a código PHP.
- Evaluación de plantilla → llama al método display() de la plantilla compilada adjuntando el contexto.
![Page 12: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/12.jpg)
Nomenclatura TWIG
Sintaxis básica:
{{ informacion }} → Mostramos información.
{# comentarios #} → Comentarios en la plantilla.
{% Código %} → Ejecutar lógica.
![Page 13: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/13.jpg)
Nomenclatura TWIG
- Crear variables:
{%set nombre = ‘Pepito’ %}
Mi nombre el {{ nombre }}
![Page 14: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/14.jpg)
Nomenclatura TWIG
Variables simples:
{{ variable_simple }}
![Page 15: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/15.jpg)
Nomenclatura TWIG
Variables complejas:
{{ variable.title }}
![Page 16: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/16.jpg)
Nomenclatura TWIG
Busca:
$variable[‘title’] → Array con clave asociativa.
$variable -> title → Objeto y atributo.
$variable-> title() → Método
$variable -> getTitle() → Get
$variable -> isTitle() → Is
![Page 17: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/17.jpg)
Nomenclatura TWIGSentencias:
IF:{% if variable == false %} <p>Hello</p>{% endif %}
------------------------------------------------------------------------------------------
{% if variable > 10 and variable < 27 %} <p>Hello</p>{% endif %}
![Page 18: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/18.jpg)
Nomenclatura TWIG
FOR:
{% for variable in variables %} <li>{{ variable|upper }}</li>{% endfor %}
![Page 19: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/19.jpg)
Macros
Nos permiten crear elementos genéricos y reutilizarlos después.
Declaración en cualquier plantilla:
{% macro input(name, value, type, size) %} <input type="{{ type|default('text') }}" name="{{ name }}" value="{{ value|e }}" size="{{ size|default(20) }}" />{% endmacro %}
Importación:
{% import "forms.html" as forms %}
![Page 20: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/20.jpg)
Macros
Invocación:
El número de atributos puede variar, valor default en los que no se introduzcan
<p>{{ forms.input('username') }}</p><p>{{ forms.input('password', null, 'password') }}</p>
Uso en el mismo documento donde están definidos “_self”
{% import _self as forms %}
<p>{{ forms.input('username') }}</p>
![Page 21: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/21.jpg)
Herramientas TWIG
FILTROS:
{{‘Users’|upper}}
abs batch capitalize convert_encoding date date_modify default escape first format join json_encode keys last length lower merge nl2br number_format raw replace reverse round slice sort split
http://twig.sensiolabs.org/doc/filters/index.html
![Page 22: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/22.jpg)
Herramientas TWIG
Traducción:
{{‘Users’|t}} → Cadena para traducir
![Page 23: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/23.jpg)
Herramientas TWIG
Funciones:
attribute block constant cycle date dump include max min parent random range
http://twig.sensiolabs.org/doc/functions/index.html
![Page 24: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/24.jpg)
Depuración de TWIG
- Inspección de plantillas. Nos permite “depurar” las plantillas.
- ¿Cómo? → en services.yml habilitando:
$settings[‘twig_debug’] = TRUE;
![Page 25: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/25.jpg)
Depuración de TWIG
Obtenemos esta información:
![Page 26: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/26.jpg)
Depuración de TWIG
Otro modo de depuración (utilizando la función dump):
![Page 27: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/27.jpg)
Depuración de TWIG
Utilización de Kint.
Con drupal console.
- drupal module:install devel- drupal module:install kint
En template:
- {{ kint(page.content) }}
![Page 28: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/28.jpg)
Twig auto reload
Detección automática de cambios en las plantillas
Desactivado por defecto, se activa al activar la depuración
Mola!
Configurable en el services.yml
Habilitar sólo en desarrollo
![Page 29: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/29.jpg)
Twig caché
Activada automáticamente en entornos de desarrollo.
Las plantilla se cachean al crearse para mayor velocidad
NO afecta ni al debug ni al reload -> no hace falta limpiarla al añadir cosas nuevas
Configurable en el services.yml
Desactivar en producción
![Page 30: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/30.jpg)
Herencia de plantillas
- Permite crear una plantilla a base (definiendo bloques genéricos), a continuación definir plantillas hijas que modifiquen esos bloques.
![Page 31: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/31.jpg)
Herencia de plantillas
- base.html.twig
![Page 32: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/32.jpg)
Herencia de plantillas
- blog.html.twig
![Page 33: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/33.jpg)
Herencia de plantillas
Resultado Final
![Page 34: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/34.jpg)
Herencia de plantillas
Consejos:
- Si utilizas la etiqueta {% extend %}, debe ser la primera de la plantilla.
- Si copias y pegas varias veces el contenido, mejor meterlo en una plantilla a parte y añadirla donde queramos con un “include”.
![Page 35: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/35.jpg)
Herencia de plantillas
- Obtener contenido de la plantilla padre {{parent()}}
![Page 36: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/36.jpg)
Twig Tweak
Es un módulo de drupal que permite insertar en las plantillas de forma sencilla:
- Bloques.- Entidades.- Vistas.- Tokens.- Configuración.- etc...
![Page 37: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/37.jpg)
Twig Tweak
- Vistas:- {{ drupal_view('view_name', 'page_1') }}
- Bloques:- {{ drupal_block('bartik_powered') }}
- Entidades:- {{ drupal_entity('node', 1, 'teaser') }}
- Tokens:- {{ drupal_token('site:name') }}
- Configuración:
- {{ drupal_config('system.site', 'name') }}
![Page 38: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/38.jpg)
Parte práctica
Configuración TWIG:
https://www.drupal.org/node/1903374
![Page 39: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/39.jpg)
Parte práctica
1. Configuración de depuración.2. Depuración con kint.3. Cómo inicializar variables.4. Utilización de filtros (capitalize, upper, number format filter).
![Page 40: ¡Twig desde 0!](https://reader031.vdocuments.co/reader031/viewer/2022021417/587588161a28ab901c8b522b/html5/thumbnails/40.jpg)
FIN
Gracias por vuestra atención