3. Plantillas con Jinja2
Renderizado con render_template
Flask utiliza el motor de plantillas Jinja2 para separar la lógica de Python del diseño HTML. Por defecto, Flask busca los archivos HTML dentro del directorio templates/.
app_render.py
PYTHON
1from flask import Flask, render_template
2
3app = Flask(__name__)
4
5
6@app.route('/bienvenida')
7def bienvenida():
8 usuario = 'Carlos'
9 cursos = ['Python', 'Flask', 'Django']
10 return render_template('bienvenida.html', usuario=usuario, cursos=cursos)
Sintaxis de Jinja2
Jinja2 utiliza marcadores especiales para inyectar datos y controlar la lógica dentro del archivo HTML:
{{ variable }}: Imprime el resultado de una variable o expresión.{% instruccion %}: Ejecuta estructuras de control comoif,foro bloques.{# comentario #}: Comentarios que no se enviarán al HTML final.
templates/bienvenida.html
HTML
1<!DOCTYPE html>
2<html lang="es">
3<head>
4 <title>Bienvenida</title>
5</head>
6<body>
7 <h1>¡Hola, {{ usuario }}!</h1>
8
9 {% if cursos %}
10 <h2>Tus cursos inscritos:</h2>
11 <ul>
12 {% for curso in cursos %}
13 <li>{{ curso }}</li>
14 {% endfor %}
15 </ul>
16 {% else %}
17 <p>No tienes cursos actualmente.</p>
18 {% endif %}
19</body>
20</html>
Herencia de plantillas (Layout Base)
Para evitar repetir encabezados y menús en cada página HTML, Jinja2 permite crear una plantilla base con {% block contenido %}{% endblock %} y extenderla en las demás páginas con {% extends "base.html" %}.
templates/base.html
HTML
1<!-- templates/base.html -->
2<!DOCTYPE html>
3<html>
4<head>
5 <title>{% block titulo %}Mi App Flask{% endblock %}</title>
6</head>
7<body>
8 <nav><a href="/">Inicio</a> | <a href="/acerca">Acerca</a></nav>
9
10 <main>
11 {% block contenido %}{% endblock %}
12 </main>
13</body>
14</html>
Ponte a prueba
Evalúa tus conocimientos sobre Jinja2 y plantillas en Flask.
