Flask integra Jinja, un motor de plantillas que convierte tu HTML en código dinámico con variables, condicionales y ciclos. Si te preguntas cómo mostrar datos variables en una vista de Flask, aquí encontrarás la base para hacerlo con render_template, estructuras if y bucles for.

La idea es simple: Jinja te deja inyectar lógica dentro del HTML usando una sintaxis de llaves, y desde Python decides qué información viaja a la plantilla. Eso convierte una página estática en una vista capaz de adaptarse al usuario, al rol o a la lista de datos que quieras mostrar.

¿Qué es Jinja y por qué se usa con Flask?

Jinja es el motor de plantillas que Flask utiliza para renderizar HTML con datos dinámicos. En lugar de devolver texto plano desde una vista, devuelves un archivo .html que puede recibir variables, evaluar condiciones y recorrer listas.

¿Qué hace Jinja en Flask? Permite usar variables, ciclos for y condicionales if dentro de archivos HTML, conectando la lógica de Python con la capa de presentación.

Para empezar, necesitas una carpeta llamada templates en la raíz del proyecto. Flask la busca por convención, así que el nombre importa. Dentro creas un archivo, por ejemplo home.html, con el HTML base de tu vista [02:00].

¿Cómo retornar un template con render_template?

Desde tu vista en Python, importas render_template desde Flask y lo usas como retorno. Recibe el nombre del archivo HTML como primer parámetro y, opcionalmente, todas las variables que quieras enviar a la plantilla.

python from flask import Flask, render_template

@app.route('/home') def home(): return render_template('home.html', rol='admin')

Cuando recargas el navegador y revisas el código fuente con clic derecho, ves el HTML completo que Jinja ya procesó. Aquí entra lo interesante: cualquier variable que pases como argumento queda disponible dentro del template.

¿Cómo se imprime una variable dentro del HTML?

La sintaxis para mostrar una variable es la doble llave. Si pasas rol='admin' desde la vista, en el HTML escribes:

html

<p>Eres {{ rol }}</p>

Si cambias el valor en Python a otro rol y recargas, el texto cambia automáticamente. Estás usando información dinámica desde la vista dentro del template [04:30].

¿Cómo usar condicionales if y else en Jinja?

Los condicionales en Jinja usan la sintaxis de llave con signo de porcentaje. Sirven para mostrar u ocultar partes del HTML según el valor de una variable. Un caso típico: mostrar un botón de Eliminar solo si el usuario es administrador.

html {% if rol == 'admin' %} <button>Eliminar</button> {% else %} <button>Solicitar eliminación</button> {% endif %}

Si el rol es admin, aparece el botón Eliminar. Si no, aparece Solicitar eliminación. Toda estructura if debe cerrarse con endif, igual que el for se cierra con endfor.

¿Cuál es la sintaxis de un if en Jinja? Se abre con {% if condicion %}, puede incluir {% else %} y siempre se cierra con {% endif %}.

¿Cómo recorrer una lista con un ciclo for?

El ciclo for te permite iterar sobre cualquier lista que envíes desde la vista. Imagina que tienes una lista de notas en Python:

python notes = ['nota uno', 'nota dos', 'nota tres'] return render_template('home.html', rol='admin', notes=notes)

En el HTML, lo ideal es usar una lista desordenada con ul y li, manteniendo el ul fuera del for para que no se repita en cada iteración:

html

<ul> {% for note in notes %} <li>{{ note }}</li> {% endfor %} </ul>

Al recargar, ves nota uno, nota dos y nota tres en una lista. En versiones más avanzadas de la aplicación, esa información vendrá desde la base de datos, pero por ahora la lista hardcodeada sirve para demostrar el patrón [09:15].

¿Qué extensiones ayudan a escribir Jinja más rápido?

Si usas Visual Studio Code, hay una extensión llamada Jinja que aporta dos cosas concretas:

• Resaltado de colores para diferenciar la sintaxis de Jinja del HTML.
• Autocompletado de estructuras como for o if, que rellena la sintaxis completa sin que tengas que memorizarla.

Es una mejora pequeña que ahorra mucho tiempo cuando escribes templates a diario [11:00].

Reto para practicar lo aprendido

En lugar de retornar una lista de strings, modifica el código para que notes sea una lista de diccionarios con tres campos: nombre, descripción y fecha de creación. Luego ajusta el template para mostrar cada campo dentro del li. Es el siguiente paso natural antes de conectar Flask con una base de datos real.

¿Te animas a compartir tu solución en los comentarios?