Twig, el nuevo motor de plantillas de Drupal 8

TWIG
EL NUEVO MOTOR DE

PLANTILLAS PARA

DRUPAL 8
DRUPALCAMPSPAIN

JAVIER EGUILUZ

26 OCTUBRE 2013

Licencia de esta presentación

creativecommons.org/licenses/by-nc-sa/3.0/es

Muchas gracias a los patrocinadores

Asociación
Española de Drupal

Javier Eguiluz
Formador + Programador

especializado en
nuevas tecnologías

Diseño y programación web

entusiasta del
framework Symfony

Comunidad sobre el framework Symfony

empieza
desde cero

también
explica Twig

soporta todas las
versiones de
Symfony2
actualizaciones
gratuitas incluidas

PRIMERA PARTE

APRENDIENDO TWIG
SEGUNDA PARTE

TWIG AVANZADO
TERCERA PARTE

APLICANDO TWIG

PRIMERA PARTE

APRENDIENDO
TWIG

¿Qué es Twig?
• Twig es un motor y lenguaje de

plantillas (como PHP, Smarty,
Moustache, etc.)
• Twig es el sistema de plantillas

utilizado por Drupal 8.

Integrando Twig desde julio 2012

Nueva forma de pensar
$variables['table'] = theme('table', array(
'header' => $header, 'rows' => $rows
));
$variables['table'] = array(
'#theme' => 'table',
'#header' => $header,
'#rows' => $rows,
);

D7
D8

core/modules/node/templates/node.html.twig

<div {{ attributes }}>
{# hide the comments to render them later #}

{% hide(content.comments) %}
{{ content }}
</div>



{{ content }}
</div>

mostrar
{{ ... }} información



{{ content }}
</div>

añadir
{# ... #} comentarios



{{ content }}
</div>

ejecutar
{% ... %} código

Sintaxis de Twig

{{ mostrar información }}
{% ejecutar código %}
{# añadir comentario #}

Variables simples
{{ titulo_articulo }}
{{ nombre_usuario }}
{{ precio }}

Variables de cada plantilla
{# core/modules/node/templates/node.html.twig #}
{# Default theme implementation to display a node.
Available variables:
- node: Full node entity.
- id: The node ID
- bundle: The type of the node, for example, "page" or "article".
- authorid: The user ID of the node author.
- createdtime: Formatted creation date.
... #}
<article id="node-{{ node.id }}" class="{{ attributes.class }} clearfix"{{ attributes }}>
{{ title_prefix }}
{% if not page %}
<h2{{ title_attributes }}>
<a href="{{ node_url }}" rel="bookmark">{{ label }}</a>
</h2>
{% endif %}
{{ title_suffix }}
{% if display_submitted %}
<footer>
{{ user_picture }}

las plantillas de
Drupal 8 listan
todas sus variables

Variables complejas
{{ articulo.titulo }}
{{ usuario.nombre }}
{{ producto.precio }}

{{ usuario.nombre }}
1.
2.
3.
4.
5.
6.

$usuario['nombre']
$usuario->nombre
$usuario->nombre()
$usuario->getNombre()
$usuario->isNombre()
null

Concatenando variables
El producto XXX cuesta NNN euros
{{ "El producto " ~ producto.titulo
~ " cuesta " ~ producto.precio
~ " euros" }}
concatena variables

Interpolando variables
El producto XXX cuesta NNN euros
{{ "El producto #{producto.titulo}
cuesta #{producto.precio} euros" }}
interpola variables

Creando una nueva variable
{% set numero = 3 %}
El número elegido es {{ numero }}
{% set nombreCompleto =
nombre ~ ' ' ~ apellidos %}

Tipos de variables
{% set entero = 3 %}
{% set decimal = 3.14 %}
{% set cadena = "..." %}
{% set booleano = false %}
{% set array = [1, 2, 3, 4, 5] %}
{% set hash = {'a': 1, 'b': 2} %}

Ejemplo de variable compleja
{# core/modules/node/templates/node.html.twig #}

node = {
'id':
1,
'bundle': 'page',
'authorid': 23,
'promoted': false,
'sticky':
false,
'published': true,
'comment': 2,
'comment_count': 0
}

Trozos de código como variables
{% set navegacion %}
<a href="...">Anterior</a>
...
...
<a href="...">Siguiente</a>
{% endset %}

Trozos de código como variables
{% set navegacion %}
<a href="...">Anterior</a>
...
...
<a href="...">Siguiente</a>
{% endset %}

{{ navegacion }}

{{ navegacion }}

Los filtros de Twig

Modifican la información
antes de mostrarla por
pantalla.

Sintaxis

{{ variable|filtro }}

Ejemplo de filtros para texto
lorEm iPsUm
{{ "..."|lower }}
{{ "..."|upper }}
{{ "..."|title }}
{{ "..."|capitalize }}

lorem ipsum
LOREM IPSUM
Lorem Ipsum
Lorem ipsum

Los filtros que define Twig
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

slice
sort
split
striptags
title
trim
upper
url_encode

Filtros con argumentos
{{ descripcion|striptags }}
{{ descripcion|striptags('<p>') }}
{{ precio|number_format }}
{{ precio|number_format(3) }}
{{ precio|number_format(3, '.') }}

Los filtros se adaptan
Tienes {{ amigos|length }} amigos

Tu nombre tiene {{ nombre|length }} letras

Los filtros se adaptan
Tienes {{ amigos|length }} amigos
count()
Tu nombre tiene {{ nombre|length }} letras
strlen()

Encadenando filtros
{{ titulo|striptags|title }}
{{ direcciones|first|trim|capitalize }}

Aplicando filtros a varios elementos
<p>{{ nombre|striptags|trim }}</p>
<p>{{ apellidos|striptags|trim }}</p>
<p>{{ biografia|striptags|trim }}</p>

Aplicando filtros a varios elementos
{% filter striptags|trim %}
<p>{{ nombre }}</p>
<p>{{ apellidos }}</p>
<p>{{ biografia }}</p>
{% endfilter %}

El filtro para traducir contenidos

{{ '...'|t }}

Traduciendo contenidos fijos
{# core/modules/aggregator/templates/aggregator-item.html.twig #}

{{ 'Categories'|t }}: {{ categories|join(', ') }}
{# core/modules/comment/templates/comment-wrapper.html.twig #}

<h3>{{ 'Comments are displayed in a list.'|t }}</h3>
<h2 class="title">{{ 'Comments'|t }}</h2>
<h2 class="title comment-form">{{ 'Add comment'|t }}</h2>

Traduciendo contenidos variables
'More posts about Drupal 8'
'More posts about Twig'
'More posts about Symfony'

'More posts about Drupal 8'
'More posts about Twig'
'More posts about Symfony'
traducir la
parte fija

considerarlo
una variable

{# core/modules/aggregator/templates/aggregator-summary-items.html.twig #}

<a href="{{ source_url }}">
{{ 'More posts about %title'|t({ '%title': title }) }}
</a>
{# core/modules/locale/templates/locale-translation-last-check.html.twig #}

{{ 'Last checked: @time ago'|t({'@time': time}) }}

Las funciones de Twig

Generan información para
mostrarla por pantalla.

Sintaxis

{{ funcion() }}
{{ funcion('...') }}
{{ funcion('...', '...') }}

Ejemplo de función de Twig
{{ random() }}
{{ random(10) }}
{{ random("abcde") }}
{{ random([1, 2, 3]) }}

Las funciones que define Twig
attribute
block
constant
cycle
date
dump
include

parent
random
range
template_from_string

Las etiquetas de Twig
Ejecutan operaciones complejas
como la herencia de plantillas y
controlan la ejecución de la
plantilla.

Las etiquetas que define Twig
autoescape
block
do
embed
extends
filter
flush

for
from
if
import
include
macro
sandbox

set
spaceless
use
verbatim

Las etiquetas de control de flujo
PHP

if ... else
switch
return
break
continue

for
foreach
while
do ... while
goto

TWIG

if ... else

for

La etiqueta IF básica
{# core/modules/block/templates/block.html.twig #}
<div>
{{ title_prefix }}

{% if label %}
<h2 {{ attributes }}>{{ label }}</h2>

{% endif %}
{{ title_suffix }}
</div>

La etiqueta IF básica
{# core/modules/block/templates/block.html.twig #}
<div>
✔ Existe la variable
{{ title_prefix }}
✔ No es null
{% if label %}
✔ No es cadena vacía
<h2 {{ attributes }}>{{ label }}</h2>

{% endif %}
{{ title_suffix }}
</div>

La etiqueta IF
{% if variable %}
...
{% endif %}

Tomando decisiones
{# core/modules/system/templates/page.html.twig #}

{% if title %}
<b><a href="...">{{ site_name }}</a></b>

{% else %}
<h1 class="site-name">
<a href="...">{{ site_name }}</a>
</h1>

{% endif %}

La etiqueta IF
{% if variable %}
...
{% else %}
...
{% endif %}

Tomando varias decisiones
{# core/modules/locale/templates/locale-translation-update-info.html.twig #}

{% if modules %}
<span>{{ 'Updates for: modules' }}</span>

{% elseif missing_updates_status %}
<span>{{ missing_updates_status }}</span>

{% endif %}

La etiqueta IF
{% if variable %}
...
{% elseif variable %}
...
{% else %}
...
{% endif %}

Condiciones múltiples
{# core/modules/book/templates/book-navigation.html.twig #}

{% if tree or has_links %}
<nav class="book-navigation">
{{ tree }}
{% if has_links %} ... {% endif %}
</nav>

{% endif %}

{# core/modules/book/templates/book-navigation.html.twig #}

{% if tree or has_links %}
<nav class="book-navigation">
{{ tree }}
{% if has_links %} ... {% endif %}
</nav>

{% endif %}

Operadores

lógicos

and b-and
or b-or
not b-xor

{% if not label_hidden %}
{% if not label_hidden or user.is_admin %}
{% if label_hidden and not user.is_admin %}
{% if (label_hidden or user.is_admin)
and node.is_published %}

Comparaciones
{# core/modules/views/templates/views-view-grid.html.twig #}

{% if options.alignment == 'horizontal' %}
{# core/modules/views/templates/views-view-list.html.twig #}

{% if list.type == 'ul' %}

Comparaciones
{# core/modules/views/templates/views-view-grid.html.twig #}

{% if options.alignment == 'horizontal' %}
{# core/modules/views/templates/views-view-list.html.twig #}

{% if list.type == 'ul' %}
Operadores de

comparación

== > ===
!= >= starts with
ends with
< <= matches

Intentando mostrar una fecha
{{ usuario.fechaNacimiento }}

ERROR

An exception has been thrown
during the rendering of a template:
"Catchable Fatal Error: Object of
class DateTime could not be
converted to string in [...] line XX"

Intentando mostrar una fecha
{{ usuario.fechaNacimiento }}
variable de tipo
DateTime

Mostrando fechas
{{ usuario.fechaNacimiento|date }}

Mostrando fechas
{{ ...|date('d/m/Y') }}
{{ ...|date('d/m/Y H:i:s') }}

Mostrando fechas
{{ ...|date('d/m/Y') }}
{{ ...|date('d/m/Y H:i:s') }}
{{ ...|date('d de F de Y') }}

Mostrando fechas
{{ ...|date('d/m/Y') }}
{{ ...|date('d/m/Y H:i:s') }}
{{ ...|date('d de F de Y') }}
26 de Octubre de 2013

Creando fechas
{{ 'now'|date }}
{{ 'today'|date }}
{{ 'next Monday'|date }}
{{ '+ 10 minutes'|date }}

Creando fechas
{{ 'now'|date }}
{{ 'today'|date }}
{{ 'next Monday'|date }}
{{ '+ 10 minutes'|date }}
strtotime()

Creando fechas
<footer>
© {{ 'now'|date('Y') }} ACME.org
</footer>

Modificando fechas
{{ usuario.fechaNacimiento
|date_modify('-9 months')|date }}
{{ usuario.fechaNacimiento
|date_modify('+18 years')|date }}

Modificando fechas
<p>
Activa tu cuenta antes del
{{ usuario.fechaRegistro
|date_modify('+1 week')|date }}
</p>

Colecciones

Array (asociativo o
numérico) o un objeto
que implemente la
interfaz Traversable.

Secuencias

{{ 1..3 }} [1, 2, 3]
{{ 5..2 }} [5, 4, 3, 2]
{{ 'a'..'d' }} ['a', 'b', 'c', 'd']

Las migas de pan del foro
{# core/modules/forum/lib/Drupal/forum/ForumBreadcrumbBuilder.php #}

function forumPostBreadcrumb($node) {
$vocabulary = $this->entityManager->...->load('...');

$breadcrumb[] = l(t('Home'), NULL);
$breadcrumb[] = l($vocabulary->label(), 'forum');
// ...

return $breadcrumb;
}

Mostrando las migas de pan
<nav class="breadcrumb" role="navigation">
<ol>

{% for item in breadcrumb %}
<li>{{ item }}</li>

{% endfor %}
</ol>
</nav>

El bucle FOR
{% for valor in coleccion %}
...
{% endfor %}

El listado de libros
{# core/modules/book/book.module #}

function template_preprocess_book_all_books_block(&$variables) {
// Remove all non-renderable elements.
$elements = $variables['book_menus'];
$variables['book_menus'] = array();
foreach (element_children($elements) as $index) {
$variables['book_menus'][$index] = $elements[$index];
}
}

El listado de libros
{# core/modules/book/book.module #}

function template_preprocess_book_all_books_block(&$variables) {
// Remove all non-renderable elements.
$elements = $variables['book_menus'];
$variables['book_menus'] = array();
foreach (element_children($elements) as $index) {
$variables['book_menus'][$index] = $elements[$index];
}
}

$book_menus[$index] = ...

Mostrando el listado de libros
{% for book_id, menu in book_menus %}
<nav id="book-block-menu-{{ book_id }}">
{{ menu }}
</nav>

{% endfor %}

El bucle FOR
{% for clave, valor in coleccion %}
...
{% endfor %}

Accediendo a las claves de la colección
{% for clave in coleccion|keys %}
...
{% endfor %}

La variable especial LOOP
{% for ... in coleccion %}
{{ loop.index }}
{{ loop.index0 }}
{{ loop.first }}
{{ loop.last }}
{{ loop.length }}
{% endfor %}

La variable especial LOOP
{% for ... in coleccion %}
{{ loop.index }} 1, 2, 3, 4, 5, ...
{{ loop.index0 }} 0, 1, 2, 3, 4, ...
true, false, false, ...
{{ loop.first }}
..., false, false, true
{{ loop.last }}
{{ loop.length }} 5
{% endfor %}

¿Y si no hay libros?
{% for book_id, menu in book_menus %}
<nav id="book-block-menu-{{ book_id }}">
{{ menu }}
</nav>

{% else %}
<p>No se ha publicado todavía ningún libro.</p>

{% endfor %}

El bucle FOR
{% for valor in coleccion %}
...
{% else %}
...
{% endfor %}

Indentando los mensajes del foro
<div class="indent">

forum.depth

Lorem ipsum dolor sit amet, consectetur adipisic
ingelit, sed do eiusmodtempor incididunt ut labore
et dolore magna aliqua.

</div>
</div>
</div>
</div>


sólo si depth es
mayor que cero

forum.depth

Lorem ipsum dolor sit amet, consectetur adipisic
ingelit, sed do eiusmodtempor incididunt ut labore
et dolore magna aliqua.

</div>
</div>
</div>
</div>

{% for i in 1..forum.depth if forum.depth > 0 %}
{% endfor %}

El bucle FOR
{% for valor in coleccion if condicion %}
...
{% endfor %}

El bucle FOR completo
{% for clave, valor in coleccion
if condicion %}
...
{% else %}
...
{% endfor %}

Los filtros para colecciones
{% for ... in coleccion|sort %}
{% for ... in coleccion|reverse %}
{% for ... in coleccion|merge(otra_coleccion) %}
{% for ... in coleccion|slice(1, 3) %}

Este código es peligroso
<p>
<?php echo $descripcion; ?>
</p>

Código mal formado
<p>
<div> Lorem ipsum ... y no
cierro el div
</p>

Código mal formado
esto destroza
tu página

<p>
<div> Lorem ipsum ... y no
cierro el div
</p>

La solución PHP
<p><?php
echo htmlspecialchars(
$descripcion,
ENT_QUOTES,
'UTF-8') ?>
</p>

La solución Twig
<p>
{{ descripcion }}
</p>

Twig escapa todo por defecto
<strong>Lorem ipsum</strong>
dolor sit <em>amet</em>
{{ descripcion }}
<strong>Lorem ipsum</
strong> dolor sit
<em>amet</em>

La gran diferencia entre Twig y PHP
<h1>{{ titulo }}</h1>
<h1><?php echo $titulo; ?></h1>
TWIG

PHP

SEGURO

INSEGURO

POR DEFECTO

POR DEFECTO

El filtro raw
{{ descripcion|raw }}
<strong>Lorem ipsum</strong>
dolor sit <em>amet</em>

El filtro escape
{{ descripcion|e }}
<strong>Lorem ipsum</
strong> dolor sit
<em>amet</em>

Diferentes estrategias de escape
{{ descripcion|e('html') }}
<strong>Lorem ipsum</strong> dolor sit
<em>amet</em>

{{ descripcion|e('js') }}
x3Cstrongx3ELoremx20ipsumx3Cx2Fstrongx3E
x20dolorx20sitx20x3Cemx3Eametx3Cx2Fem
x3E

Segmentando listas
1

2

3

4

5

6

7

8

9

Utilizando bucles normales
<table>
{% for i in 1..9 %}
<td>{{ i }}</td>
{% endfor %}
</table>

Utilizando bucles normales
<table>
{% for i in 1..9 %}
{% if 0 == i % 3 %}<tr>{% endif %}
<td>{{ i }}</td>
{% if 0 == i % 3 %}</tr>{% endif %}
{% endfor %}
</table>

El filtro batch
<table>

{% for fila in 1..9|batch(3) %}
<tr>

{% for columna in fila %}
<td> {{ columna }} </td>

{% endfor %}
</tr>

{% endfor %}
</table>

El filtro batch
<table>

saca los elementos
de tres en tres

{% for fila in 1..9|batch(3) %}
<tr>


{% endfor %}
</tr>

{% endfor %}
</table>

Rellenando los huecos
<table>

{% for fila in 1..7|batch(3, '-') %}
<tr>
{% endfor %}
</tr>

{% endfor %}
</table>

Rellenando los huecos
<table>

{% for fila in 1..7|batch(3, '-') %}
<tr>
{% endfor %}
</tr>

{% endfor %}
</table>

1

2

3

4

5

6

7

-

-

DEPURACIÓN

!

EN DESARROLLO
TODO ESTO PODRÍA CAMBIAR EN LA
VERSIÓN ESTABLE DE DRUPAL 8

Mostrar el contenido de variables
{{ dump(variable) }}
{{ dump(variable1, variable2) }}
{{ dump() }}

Mostrar el contenido de variables
{{ dump(variable) }}
{{ dump(variable1, variable2) }}
{{ dump() }}

muestra TODAS
las variables

Activar la función dump()
// sites/default/settings.php
$settings['twig_debug'] = true;


twig_debug = false

twig_debug = true

<!DOCTYPE html>
twig_debug
<html ... = false

twig_debug = true

Mejorando la depuración
• dump( ) es muy útil, pero no deja de

ser un simple var_dump( ).
• Resulta muy difícil depurar variables

complejas.
• Drupal 8 podría integrar el proyecto

LadyBug.

LadyBug
Depurando aplicaciones
PHP como un profesional.
github.com/raulfraile/Ladybug

Raúl
Fraile

Depurando con LadyBug
$result = mysql_query('SELECT * FROM user', $conn);
ladybug_dump($result);

Depurando con LadyBug
$var = new Foo();
ladybug_dump($var);

Plantillas con fragmentos repetidos

Fragmento de código repetido
{# anuncio.twig #}
<script async src="//pagead2.googlesyndication.com/pagead/js/
adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="..."
data-ad-client="..."
data-ad-slot="..."></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Incluyendo un fragmento
...
{{ include('anuncio.twig') }}
...

Fragmento de código repetido
{# anuncio.twig #}
<script async src="//pagead2.googlesyndication.com/pagead/js/
adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="{{ ad.style }}"
data-ad-client="{{ ad.client }}"
data-ad-slot="{{ ad.slot }}"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Incluyendo un fragmento con variables
...
{{ include('anuncio.twig', { ... }) }}
...

Incluyendo un fragmento con variables
...
{{ include('anuncio.twig', { ad: {
'style': '...',
'client': '...',
'slot': '...'
}}) }}
...

Fragmentos sin variables
{{ include(
'anuncio.twig', with_context = false
) }}
{{ include(
'anuncio.twig', { ... }, with_context = false
) }}

Plantilla con muchos fragmentos

Plantilla con muchos fragmentos

include

plantilla

padre

igual para todas
las páginas

huecos

plantilla

padre

igual para todas
las páginas

Herencia de
plantillas

plantillas hija

plantilla padre

Herencia de
plantillas
en Twig se
llaman bloques
plantillas hija

plantilla padre

Cómo funciona la herencia en Twig
• Cada plantilla puede definir tantos

bloques como quiera.
• La herencia permite, pero no obliga,

a rellenar los huecos.
• La plantilla padre puede rellenar sus

huecos con contenido por defecto.

Creando la plantilla padre.twig
<header> ... </header>
<div class="row">
<div class="span3"> HUECO 1 </div>
<div class="span6"> HUECO 2 </div>
<div class="span3"> ... </div>
</div>
<footer> ... </footer>

<div class="row">
<div class="span3">

{% block side %} {% endblock %}
</div>
<div class="span6">

{% block main %} {% endblock %}
</div>
</div>

<div class="row">
<div class="span3">

{% block side %} {% endblock %}
los nombres NO
</div>
<div class="span6">
llevan comillas
{% block main %} {% endblock %}
</div>
</div>

Creando la plantilla hija.twig
{% extends 'padre.twig' %}

Creando la plantilla hija.twig
{% block main %}
...
{% endblock %}
{% block side %}
...
{% endblock %}

plantilla padre

plantilla hija

A

C

B

D

plantilla padre

plantilla hija

A

C

B

<div>{% block uno %}
A
{% endblock %}</div>
<div>{% block dos %}
B

D

plantilla padre

plantilla hija

A

C

B

A
B

D

{% block uno %}
C
{% endblock %}
{% block dos %}
D
{% endblock %}

plantilla padre

plantilla hija

A

A

B

A
B

D

plantilla padre

plantilla hija

A

A

B

A
B

D

{% block dos %}
D
{% endblock %}

plantilla padre

plantilla hija

A

A
C

B

A
B

D

plantilla padre

plantilla hija

A

A
C

B

A
B

D

{% block uno %}
{{ parent() }}
C
{% endblock %}
{% block dos %}
D
{% endblock %}

esta es la parte
más lenta de Twig

Instalando la extensión de Twig
$ pear channel-discover
pear.twig-project.org
$ pear install twig/CTwig

; php.ini
extension=twig.so

Instalando la extensión de Twig

+15%
SIN extensión

CON extensión

Jerarquía de plantillas
layout.twig

layout.twig

+
+

pagina1.twig
pagina2.twig

seccion1.twig
seccion2.twig

+

pagina1.twig
pagina2.twig

Plantilla layout.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{% block title %}Lorem ipsum dolor.{% endblock %}</title>
{% if block('description') != '' %}
<meta name="description"
content="{% block description %}{% endblock %}">
{% endif %}
<link href="..." rel="stylesheet" type="text/css">
{% block head_css %}{% endblock %}
{% block head_javascript %}{% endblock %}
</head>
...

Plantilla pagina1.twig
{% extends 'layout.twig' %}
{% block title %}Mi título{% endblock %}
{% block description %}
Lorem ipsum dolor sit amet.
{% endblock %}
...

{% block title %}Otro título{% endblock %}
{% block head_css %}
<link href="/css/micrositio_especial.css"
rel="stylesheet" type="text/css">
{% endblock %}
...

Plantilla layout.twig
<body id="{% block body_id %}{% endblock %}">
<div id="content">
{% block content %}
<div id="main">
{% block main %}{% endblock %}
</div>
<div id="side">
{% block side %}{% endblock %}
</div>
{% endblock %}
</div>
</body>

{% block title %}Mi título{% endblock %}
{% block description %}Lorem ipsum dolor sit amet.{% endblock %}

{% block main %}
<h1>...</h1>
<p>...</p>
{% endblock %}
{% block side %}
<ul>...</ul>
{% endblock %}

{% block title %}Otro título{% endblock %}
{% block head_css %}
<link href="/css/micrositio_especial.css" rel="stylesheet" type="text/css">
{% endblock %}

{% block content %}
<div> ... </div>
{% endblock %}

Conclusiones
• Twig mejora tu productividad y hace

que tus plantillas sean seguras.

Conclusiones

• Drupal 8 utiliza actualmente el 10%

de las posibilidades de Twig.

Conclusiones

• Drupal 8 utiliza actualmente el 10%

de las posibilidades de Twig.
• Twig es la parte más sencilla y

divertida de la symfonización de
Drupal.

Referencias
• Documentación:

twig.sensiolabs.org

• Recursos sobre Drupal + Twig:

drupal.org/node/2008464

Contacto

Javier Eguiluz
twitter.com/javiereguiluz
github.com/javiereguiluz
linkedin.com/in/javiereguiluz

javiereguiluz.com

Twig, el nuevo motor de plantillas de Drupal 8

Twig, el nuevo motor de plantillas de Drupal 8

Más contenido relacionado

Similar a Twig, el nuevo motor de plantillas de Drupal 8

Más de Javier Eguiluz

Twig, el nuevo motor de plantillas de Drupal 8