Misión 3 · Lección 3

Templates y Jinja2 en Flask

Objetivos

Comprender el motor de plantillas Jinja2.
Separar la lógica del backend de la presentación.
Aprender a usar variables, bucles y condicionales en templates.

¿Qué es Jinja2?

Es el motor de plantillas que usa Flask para renderizar HTML dinámico.

Permite insertar variables de Python en HTML.
Soporta bucles, condicionales y herencia de plantillas.

Renderizar un Template

from flask import render_template

            @app.route("/about")
            def about():
                return render_template("about.html", titulo="Sobre nosotros")

El archivo about.html se guarda en /templates.

Uso de Variables

<h1>Bienvenido {{ nombre }}</h1>

Las variables entre {{ }} se reemplazan con valores enviados desde Flask.

Condicionales en Jinja2

{% if usuario %}
            <p>Hola {{ usuario }}</p>
            {% else %}
            <p>Invitado</p>
            {% endif %}

Bucles en Jinja2

<ul>
            {% for producto in productos %}
            <li>{{ producto.nombre }} - {{ producto.precio }}</li>
            {% endfor %}
            </ul>

Filtros en Jinja2

{{ nombre|upper }}
            {{ precio|round(2) }}

Algunos filtros: upper, lower, title, round.

Herencia de Plantillas

<!-- base.html -->
            <html>
            <body>
                {% block contenido %}{% endblock %}
            </body>
            </html>

            <!-- home.html -->
            {% extends "base.html" %}
            {% block contenido %}
            <h1>Página principal</h1>
            {% endblock %}

Incluir Plantillas

{% include "header.html" %}
            <h1>Contenido principal</h1>
            {% include "footer.html" %}

Ejercicio Guiado

Crea un template base.html con un bloque de contenido.
Haz un template home.html que herede de base.html.
Pasa una lista de productos desde Flask y muéstralos en HTML.
Agrega condicionales para mostrar un mensaje si la lista está vacía.