Qué es Twig
Twig para el diseño de plantilas
Twig es un motor de plantillas rápido y optimizado para PHP. Está diseñado desde cero para facilitar la creación de plantillas tanto para el desarrollador como para el diseñador.
Su sintaxis fácil de seguir y sus procesos directos lo hacen ideal para cualquier persona familiarizada con Smarty, Django, Jinja, Liquid o Stencil.
Lo usamos para nuestras plantillas Grav en parte debido a su flexibilidad y seguridad inherente. El hecho de que también sea uno de los motores de plantillas más rápidos para PHP lo convirtió en una elección obvia para usarlo en Grav.
Twig compila las plantillas a PHP plano. Esto reduce al mínimo la cantidad de sobrecarga de PHP, lo que resulta en una experiencia de desarrollo más rápida y eficiente.
También es un motor muy flexible gracias a su analizador léxico y analizador sintáctico. Esto permite al desarrollador crear sus propias etiquetas y filtros personalizados. El analizador léxico y el analizador sintáctico de Twig también le permiten crear su propio lenguaje específico del dominio (DSL).
En cuanto a seguridad, Twig no escatima esfuerzos. Proporciona al desarrollador un modo de sandbox que le permite examinar cualquier código no confiable. Esto le brinda la capacidad de usar Twig como un lenguaje de plantillas para aplicaciones mientras les da a los usuarios la capacidad de modificar el diseño de la plantilla.
Básicamente, es un motor potente que le brinda control sobre la interfaz de usuario. Cuando se combina con YAML para la configuración, ofrece un sistema potente y simple para que cualquier desarrollador o administrador de sitios web pueda trabajar con él.
¿Cómo funciona Twig?
Twig funciona eliminando toda la magia de diseño de plantillas. Las plantillas son básicamente archivos de texto que contienen variables o expresiones que son reemplazadas por valores a medida que se evalúa la plantilla.
Las etiquetas también son una parte importante de un archivo de plantilla, ya que controlan la lógica de la plantilla en sí.
Twig tiene dos restricciones de lenguaje principales.
{{ }}imprime el resultado de una evaluación de expresión;{% %}ejecuta declaraciones.
Aquí hay una plantilla básica creada usando Twig:
<!DOCTYPE html>
<html>
<head>
<title>All About Cookies</title>
</head>
<body>
My name is {{ name|e }} and I love cookies.
My favorite flavors of cookies are:
<ul>
{% for cookie in cookies %}
<li>{{ cookie.flavor|e }}</li>
{% endfor %}
</ul>
<h1>Cookies are the best!</h1>
</body>
</html>En este ejemplo, configuramos el título del sitio como lo harías con cualquier página web estándar. La diferencia es que pudimos usar una sintaxis Twig simple para presentar el nombre del autor y crear una lista dinámica de tipos de elementos.
Una plantilla se carga primero, luego se pasa por el analizador léxico donde su código fuente se tokeniza y se divide en pequeñas piezas. En este punto, el analizador sintáctico toma los tokens y los convierte en el árbol de sintaxis abstracta.
Una vez hecho esto, el compilador convierte esto en código PHP que luego se puede evaluar y mostrar al usuario.
Twig también se puede ampliar para agregar etiquetas adicionales, filtros, pruebas, operadores, variables globales y funciones. Puede encontrar más información sobre cómo extender Twig en su documentación oficial.
Sintaxis de Twig
Una plantilla Twig tiene varios componentes clave que ayudan a comprender lo que desea hacer. Estos incluyen etiquetas, filtros, funciones y variables.
Veamos más de cerca estas herramientas importantes y cómo pueden ayudarlo a construir una plantilla increíble.
Etiquetas
Las etiquetas le dicen a Twig lo que necesita hacer. Le permite establecer qué código debe manejar Twig y qué código debe ignorar durante la evaluación.
Hay varios tipos diferentes de etiquetas, y cada uno tiene su propia sintaxis específica que las distingue.
Etiquetas de comentario
Las etiquetas de comentario ({# Insert Comment Here #}) se utilizan para establecer comentarios que existen dentro del archivo de plantilla Twig, pero que no son vistos por el usuario final. Se eliminan durante la evaluación y no se analizan ni se emiten.
Un buen uso de estas etiquetas es explicar qué hace una línea de código o comando específico para que otro desarrollador o diseñador de su equipo pueda leer y comprender rápidamente.
Aquí hay un ejemplo de una etiqueta de comentario como la encontraría en un archivo de plantilla Twig:
{# Chocolate Chip Cookies are great! Don't tell anyone! #}Etiquetas de salida
Las etiquetas de salida ({{ Insert Output Here }}) se evaluarán y se agregarán a la salida generada. Aquí es donde colocaría todo lo que desea que aparezca en el frontend, o en algún otro contenido generado.
Aquí hay un ejemplo de uso de etiquetas de salida en una plantilla Twig:
My name is {{ name|e }} and I love cookies.La variable name se ha insertado en esta línea y aparecerá para el usuario final como My name is Jake and I love cookies., ya que Jake era el valor de la variable name.
¡¡ Es muy importante activar la configuración de autoescape desde su Configuración del Sistema o recordar escapar cada variable en los archivos de plantilla utilizando el filtro |e para hacer que su sitio sea seguro contra ataques XSS. Para contenido HTML seguro, use el filtro |raw.
Etiquetas de acción
Las etiquetas de acción son los motores de Twig. Estas etiquetas realmente hacen algo, a diferencia de las demás que simplemente pasan algo o se sientan ociosas en el código fuente esperando que un diseñador las lea.
Las etiquetas de acción establecen variables, recorren matrices y prueban condicionales. Sus declaraciones for e if se realizan utilizando estas etiquetas.
Así es como podría verse una etiqueta de acción en una plantilla Twig:
{% set hour = now | date("G") %}
{% if hour >= 9 and hour < 17 %}
<p>¡Hora de las cookies!</p>
{% else %}
<p>¡Hora de hornear más cookies!</p>
{% endif %}La etiqueta de acción inicial establece la hora como la hora actual en un reloj de 24 horas. Ese valor luego se usa para determinar si está entre las 9 a.m. y las 5 p.m. Si es así, se muestra ¡Hora de las cookies!. Si no lo es, se muestra ¡Hora de hornear más cookies!, en su lugar.
Es muy importante que las etiquetas no se superpongan entre sí. No puedes poner una etiqueta de salida dentro de una etiqueta de acción, o viceversa.
Filtros
Los filtros son útiles, especialmente cuando está utilizando las etiquetas de salida para mostrar datos que pueden no estar formateados de la manera que desea.
Digamos que el valor de la variable name puede incluir etiquetas SGML/XML no deseadas. Puede filtrarlas utilizando el código a continuación:
{{ name|striptags|e }}Funciones
Las funciones pueden generar contenido. Típicamente se siguen de argumentos, que aparecen dentro de paréntesis colocados directamente después de la llamada a la función. Incluso si no hay argumento presente, la función aún tendrá paréntesis () colocados directamente después de ella.
{% if date(cookie.created_at) < date('-2days') %}
{# ¡Cómetelo! #}
{% endif %}