Post on 11-Jan-2017
¡TWIG DESDE 0! APRENDAMOS QUÉ ES Y CÓMO UTILIZARLO
LOS QUE OS VAN A DAR LA CHAPA
JORGE DÍAZ AMIGO
DESARROLLADOR FRONTEND ASPGEMS
Twitter: @YnarBurmecia
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
Í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.
¿Empezamos?
¿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
¿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.
ANTES DE NADA … VISTAZO ATRÁS
Drupal 7
HTML generado en módulos
Preprocess y process
PHP en plantillas
Ocasionalmente puede complicarse cambiar cosas muy concretas
Theming disperso
¿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”.
¿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.
Nomenclatura TWIG
Sintaxis básica:
{{ informacion }} → Mostramos información.
{# comentarios #} → Comentarios en la plantilla.
{% Código %} → Ejecutar lógica.
Nomenclatura TWIG
- Crear variables:
{%set nombre = ‘Pepito’ %}
Mi nombre el {{ nombre }}
Nomenclatura TWIG
Variables simples:
{{ variable_simple }}
Nomenclatura TWIG
Variables complejas:
{{ variable.title }}
Nomenclatura TWIG
Busca:
$variable[‘title’] → Array con clave asociativa.
$variable -> title → Objeto y atributo.
$variable-> title() → Método
$variable -> getTitle() → Get
$variable -> isTitle() → Is
Nomenclatura TWIGSentencias:
IF:{% if variable == false %} <p>Hello</p>{% endif %}
------------------------------------------------------------------------------------------
{% if variable > 10 and variable < 27 %} <p>Hello</p>{% endif %}
Nomenclatura TWIG
FOR:
{% for variable in variables %} <li>{{ variable|upper }}</li>{% endfor %}
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 %}
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>
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
Herramientas TWIG
Traducción:
{{‘Users’|t}} → Cadena para traducir
Herramientas TWIG
Funciones:
attribute block constant cycle date dump include max min parent random range
http://twig.sensiolabs.org/doc/functions/index.html
Depuración de TWIG
- Inspección de plantillas. Nos permite “depurar” las plantillas.
- ¿Cómo? → en services.yml habilitando:
$settings[‘twig_debug’] = TRUE;
Depuración de TWIG
Obtenemos esta información:
Depuración de TWIG
Otro modo de depuración (utilizando la función dump):
Depuración de TWIG
Utilización de Kint.
Con drupal console.
- drupal module:install devel- drupal module:install kint
En template:
- {{ kint(page.content) }}
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
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
Herencia de plantillas
- Permite crear una plantilla a base (definiendo bloques genéricos), a continuación definir plantillas hijas que modifiquen esos bloques.
Herencia de plantillas
- base.html.twig
Herencia de plantillas
- blog.html.twig
Herencia de plantillas
Resultado Final
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”.
Herencia de plantillas
- Obtener contenido de la plantilla padre {{parent()}}
Twig Tweak
Es un módulo de drupal que permite insertar en las plantillas de forma sencilla:
- Bloques.- Entidades.- Vistas.- Tokens.- Configuración.- etc...
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') }}
Parte práctica
Configuración TWIG:
https://www.drupal.org/node/1903374
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).
FIN
Gracias por vuestra atención