gcdoramas.com

Templates con Jinja2

Templates con Jinja2

Templates con Jinja2 en Flask
¿Qué es Jinja2?

Jinja2 es el motor de plantillas que utiliza Flask para generar HTML dinámico. Permite combinar código Python con HTML, haciendo posible mostrar datos dinámicos en tus páginas web.

En lugar de devolver texto plano, puedes crear interfaces completas con HTML reutilizable.

¿Por qué usar templates?

Sin templates, tu app solo mostraría texto simple. Con Jinja2 puedes:

Crear páginas web reales (HTML + CSS)
Reutilizar estructuras (header, footer)
Mostrar datos dinámicos
Separar lógica (Python) de presentación (HTML)
Estructura básica del proyecto

Flask busca los templates en una carpeta llamada templates:

/proyecto

├── app.py
└── /templates
└── index.html
Ejemplo básico
app.py
from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def inicio():
return render_template("index.html")
templates/index.html



Mi primera plantilla


Hola desde Jinja2




Enviar datos a un template

Puedes pasar variables desde Flask al HTML:

@app.route("/")
def inicio():
nombre = "Cooper"
return render_template("index.html", nombre=nombre)
Mostrar la variable en HTML

Hola, {{ nombre }}



Jinja2 usa {{ }} para mostrar datos.

Estructuras de control
Condicionales
{% if nombre %}

Bienvenido {{ nombre }}


{% else %}

No hay usuario


{% endif %}
Bucles (for)

    {% for item in lista %}
  • {{ item }}

  • {% endfor %}

Herencia de templates

Esto es clave para proyectos reales.

base.html



{% block titulo %}{% endblock %}




Mi sitio web




{% block contenido %}{% endblock %}



index.html
{% extends "base.html" %}

{% block titulo %}Inicio{% endblock %}

{% block contenido %}

Contenido de la página principal


{% endblock %}

Esto evita repetir código en cada página.

Archivos estáticos (CSS, JS)

Flask usa la carpeta static:

/static
├── css/
├── js/
└── img/

Ejemplo en HTML:


Buenas prácticas

Para que tu proyecto escale bien:

Usa base.html para estructura común
Mantén HTML limpio (no metas lógica compleja)
Separa CSS y JS en static
Usa nombres claros en variables
Errores comunes

Evita estos problemas típicos:

No crear la carpeta templates
Escribir mal el nombre del archivo
Olvidar render_template
Confundir {% %} con {{ }}
Conclusión

Jinja2 convierte tu aplicación Flask en una web real y dinámica. Es una pieza fundamental si quieres pasar de “Hola mundo” a un sitio profesional.

Si dominas templates, ya estás listo para crear interfaces completas conectadas a datos.