Login  |Hazte alumno gratis

Sesión 3: plantillas Twig y estructura HTML

Publicada el por networknomad

Creación de temas personalizados en Drupal 10

En esta tercera sesión, nos enfocaremos en cómo utilizar plantillas Twig para personalizar la estructura HTML de un sitio en Drupal. Twig es el sistema de plantillas de Drupal y permite manipular el HTML del sitio, dándonos control total sobre la presentación del contenido. Aprenderemos a crear y modificar plantillas Twig para adaptar Drupal a nuestras necesidades de diseño.

Objetivo

El objetivo de esta sesión es familiarizarse con el sistema de plantillas Twig en Drupal y aprender a modificar la estructura de las páginas del sitio utilizando estas plantillas. Esto permitirá personalizar la forma en que Drupal muestra los elementos en pantalla y mejorar la experiencia del usuario.

Contenido

  1. Qué es Twig y cómo funciona en Drupal: Introducción al sistema de plantillas Twig y cómo Drupal lo utiliza para renderizar páginas y componentes.
  2. Sobreescritura de plantillas: Identificación y creación de plantillas Twig personalizadas para modificar el HTML de las páginas.
  3. Uso de variables y lógica básica en Twig: Aprovechar variables y condicionales para añadir dinamismo a las plantillas.

Introducción a Twig en Drupal

Twig es un motor de plantillas diseñado para ser seguro, flexible y fácil de usar. En Drupal, Twig controla la estructura HTML de cada elemento, desde una página completa hasta fragmentos de contenido. Drupal utiliza una serie de plantillas Twig por defecto, y podemos sobreescribirlas creando versiones personalizadas en el tema.

Ubicación de plantillas Twig: Las plantillas Twig de Drupal se encuentran en la carpeta templates de los temas y módulos. En un tema personalizado, puedes crear tus propias plantillas en la carpeta templates para modificar cualquier parte del HTML generado por Drupal.

Creación y modificación de una plantilla Twig

Identificar la plantilla a modificar:

  • Drupal utiliza diferentes plantillas Twig para distintas partes del sitio: páginas, bloques, menús, etc.
  • Por ejemplo, la plantilla principal de una página es page.html.twig. Si quieres modificar la estructura general de todas las páginas, necesitas crear o modificar esta plantilla en tu tema.

Crear una plantilla Twig para una página:

En la carpeta templates de tu tema (mi_tema_personalizado/templates), crea una nueva plantilla llamada page.html.twig.

Esta plantilla controlará la estructura HTML de las páginas en el sitio.

A continuación, escribe el siguiente código de ejemplo para estructurar la página:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>{{ head_title|safe_join(' | ') }}</title>
  {{ head }}
  {{ styles }}
  {{ scripts }}
</head>
<body>
  <header>
    <nav>
      {{ page.header }}
    </nav>
    <h1>{{ site_name }}</h1>
  </header>

  <main>
    <section>
      {{ page.content }}
    </section>
  </main>

  <footer>
    <p>© {{ "now"|date("Y") }} - Mi Tema Personalizado</p>
  </footer>
</body>
</html>

En este ejemplo:

  • {{ head_title }} muestra el título de la página.
  • {{ page.header }} representa el contenido del encabezado.
  • {{ page.content }} representa el contenido principal de la página.
  • {{ site_name }} muestra el nombre del sitio.
  • {{ "now"|date("Y") }} muestra el año actual.

Uso de variables en Twig:

  • Twig permite acceder a variables que representan diferentes partes del contenido. Por ejemplo, page.content contiene el contenido principal de la página, mientras que page.header contiene la cabecera.
  • Drupal provee variables como site_name, base_path, y head_title, entre otras, para facilitar la personalización de la estructura HTML.

Añadir lógica condicional básica:

Puedes utilizar lógica en Twig para mostrar elementos de forma condicional. Por ejemplo, podrías mostrar un mensaje de bienvenida solo en la página de inicio.

{% if is_front %}
  <h2>Bienvenido a la página principal de {{ site_name }}</h2>
{% endif %}

is_front es una variable booleana que verifica si la página actual es la página de inicio. Este tipo de lógica permite adaptar el contenido de las plantillas de acuerdo con las condiciones.

Sobreescritura de plantillas específicas:

  • Drupal permite crear plantillas específicas para diferentes partes del contenido, como nodos, bloques o vistas.
  • Por ejemplo, si quieres modificar la apariencia de un tipo de contenido específico, puedes crear una plantilla node--[tipo].html.twig en la carpeta templates.
  • Ejemplo: Para personalizar la estructura de los nodos del tipo de contenido artículo, crea node--article.html.twig.

    Activar y probar la plantilla Twig personalizada

    Limpiar la caché:

    Después de añadir o modificar una plantilla Twig, es necesario limpiar la caché de Drupal para ver los cambios. Usa el siguiente comando:

    drush cache:rebuild

    Verificar los cambios en el navegador:

    • Accede a una página en tu sitio y confirma que los cambios realizados en page.html.twig se reflejan en la estructura HTML.
    • Prueba la lógica condicional que agregaste (por ejemplo, el mensaje en la página de inicio).

      Tareas

      Para completar esta sesión:

      1. Crear la plantilla page.html.twig en la carpeta templates de tu tema y estructurarla según el ejemplo dado.
      2. Utilizar variables para mostrar información dinámica en la plantilla, como el nombre del sitio y el título de la página.
      3. Añadir lógica condicional para personalizar el contenido según la página (por ejemplo, mostrar un mensaje en la página de inicio).
      4. Limpiar la caché de Drupal y verificar que los cambios se aplican correctamente.

      Con estos pasos, has aprendido los fundamentos de cómo funcionan las plantillas Twig en Drupal y cómo modificarlas para personalizar la estructura HTML del sitio. Twig es una herramienta poderosa en Drupal, y dominarlo te permitirá realizar personalizaciones detalladas en cualquier aspecto de la interfaz de usuario.

      ← Anterior Siguiente →