Templates y Motor de Plantillas Jinja2 en Flask

En esta sección, aprenderás sobre Jinja2, el motor de plantillas que utiliza Flask, cómo renderizar HTML desde las vistas, y cómo manejar variables y estructuras de control en tus templates.

Introducción a Jinja2

Jinja2 es un potente motor de plantillas para Python que permite separar la lógica de la aplicación de la presentación. Con Jinja2, puedes crear archivos HTML que incluyen variables y lógica para generar contenido dinámico de manera fácil y eficiente.

Cómo renderizar HTML desde las vistas de Flask

Para renderizar HTML en Flask, utilizas la función render_template(). Aquí tienes un ejemplo básico:

python 
from flask import render_template

@app.route('/pagina')
def mostrar_pagina():
  return render_template('pagina.html')

Asegúrate de tener el archivo pagina.html en la carpeta templates de tu proyecto.

Variables y control de flujo en templates

Puedes pasar variables a tus templates y utilizarlas. Aquí hay un ejemplo de cómo hacerlo:

python 
@app.route('/saludo/<nombre>')
def saludo(nombre):
  return render_template('saludo.html', nombre=nombre)

Y en tu archivo saludo.html, puedes utilizar la variable nombre así:

html 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Saludo</title>
</head>
<body>
  <h1>¡Hola, {{ nombre }}!</h1>
</body>
</html>

Condicionales en Jinja2

Puedes utilizar condicionales en tus templates:

bash 
{% if nombre %}
  <h1>¡Hola, {{ nombre }}!</h1>
{% else %}
  <h1>¡Hola, visitante!</h1>
{% endif %}

Bucles

Jinja2 también permite bucles. Aquí tienes un ejemplo:

bash 
<ul>
{% for item in lista %}
  <li>{{ item }}</li>
{% endfor %}
</ul>

Herencia de templates

La herencia de templates en Jinja2 te permite crear un archivo base que contenga la estructura común de tus páginas. Aquí tienes un ejemplo:

  • Crea un archivo base.html:
html 
<!DOCTYPE html>
  <html lang="es">
  <head>
      <meta charset="UTF-8">
      <title>{% block title %}Título por defecto{% endblock %}</title>
  </head>
  <body>
      <header>
          <h1>Encabezado de la página</h1>
      </header>
      <main>
          {% block content %}{% endblock %}
      </main>
  </body>
  </html>
  • Luego, en un template que hereda de base.html, puedes hacer lo siguiente:
bash 
{% extends "base.html" %}

{% block title %}Página Personalizada{% endblock %}

{% block content %}
  <h2>Contenido de la página personalizada</h2>
{% endblock %}