6.5 Plantillas HTML y contenido dinámico (Jinja2)

1. Comprendiendo las plantillas HTML

Una plantilla HTML es un archivo que combina contenido estático (HTML común) con elementos dinámicos que se completan usando datos de Python.

Flask utiliza Jinja2, un motor de plantillas que permite insertar variables, realizar condiciones y repetir estructuras dentro del HTML.

Esto evita tener que escribir múltiples archivos HTML para cada página: una sola plantilla puede adaptarse a diferentes situaciones con solo cambiar los datos.

Gracias a esto, podemos mostrar contenido personalizado, como listas de tareas, saludos con nombres o información generada desde el servidor.

2. Conoce cómo funciona Jinja2 en Flask

Jinja2 es la librería que Flask usa para generar contenido dinámico dentro de archivos HTML.

Permite mezclar estructura visual (HTML) con datos que vienen desde el servidor Python. Usa una sintaxis sencilla:

1. {{ variable }}: Inserta valores dinámicos en la página.
2. {% %}: Controla la lógica como condicionales, bucles y bloques de plantilla.

Con Jinja2 puedes crear páginas personalizadas para cada usuario o mostrar listas generadas automáticamente sin duplicar código.

Es como tener un HTML inteligente que se adapta según la información que le pases desde Python.

3. Enviando datos a la plantilla

Para mostrar contenido dinámico con Jinja2, Flask necesita saber qué datos enviar a la plantilla.

Esto se hace usando la función render_template() y pasando un diccionario con variables.

Por ejemplo:

from flask import Flask, render_template


app = Flask(__name__)


@app.route('/usuario')
def usuario():
    return render_template("perfil.html", nombre="Luis", edad=30)

Aquí, las variables nombre y edad estarán disponibles dentro del archivo perfil.html, gracias a Jinja2.

4. Mostrando listas en la plantilla

Una de las funciones más útiles de Jinja2 es recorrer listas para mostrar varios elementos en la página, como tareas, productos o mensajes.

Esto se logra con la estructura {% for item in lista %} dentro del HTML:

<ul>
  {% for tarea in tareas %}
    <li>{{ tarea }}</li>
  {% endfor %}
</ul>

Si la variable tareas es una lista enviada desde Python, el bucle generará un <li> por cada elemento.

Esta técnica evita repetir código y permite que una sola plantilla se adapte a distintos contenidos.

5. Usa condicionales para mostrar contenido según el contexto

Jinja2 permite mostrar diferentes partes del HTML según condiciones específicas usando {% if %}.

Esto es útil cuando queremos adaptar el mensaje en función de una situación particular.

Por ejemplo, para mostrar un mensaje de éxito si se completó una tarea:

{% if tarea_completada %}
  <p>¡Tarea completada con éxito!</p>
{% else %}
  <p>Aún tienes tareas por hacer.</p>
{% endif %}

La variable tarea_completada puede ser un True o False enviado desde Python.

Con esta lógica condicional, las plantillas pueden adaptarse al estado real de la aplicación sin cambiar el HTML.

6. Crea layouts reutilizables

Jinja2 permite construir plantillas más ordenadas y reutilizables usando herencia.

La idea es tener una plantilla base con la estructura general del sitio (encabezado, menú, pie de página) y extenderla desde otras páginas.

Para hacerlo, se usa:

1. {% extends 'base.html' %}: indica que esta plantilla hereda la estructura de base.html.
2. {% block contenido %}: define las secciones que se pueden personalizar en cada página.

Ejemplo:

{% extends 'base.html' %}


{% block contenido %}
  <h1>Bienvenido</h1>
  <p>Este es el panel principal.</p>
{% endblock %}

Esto permite mantener un diseño coherente y cambiar solo lo necesario en cada vista.

7. Conclusión y recursos útiles

Si quieres llevar tus plantillas al siguiente nivel, puedes explorar características más avanzadas como:

1. Filtros para formatear datos (| upper, | length)
2. Macros para reutilizar bloques de HTML
3. Bloques anidados para estructuras más complejas

Recursos recomendados:

1. Documentación oficial de Jinja2
2. Guía de plantillas en Flask