El desarrollo de plantillas con Jinja2 es un tema muy amplio, lo veremos en varias entradas por separado. En esta primera parte veremos lo que puede considerarse la parte básica.
Para entender qué son las plantillas Jinja2 vamos a comenzar viendo un ejemplo de plantilla Jinja2 básica. Nosotros trabajaremos con nuestra aplicación ‘Hola mundo!’ y un archivo llamado ‘jinja.html’ que vamos a crear. Recuerda que no es necesario que sean de ninguna extensión determinada.
Plantillas Jinja2 con Flask
Como vimos en el tutorial de plantillas con Flask, nuestras plantillas Jinja2 deben estar almacenadas en la carpeta templates de nuestro proyecto.
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hola_mundo():
return '<h1>Hola mundo con Flask!!</h1>'
if __name__ == '__main__':
app.run(debug=True)<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Renderizando plantillas</title>
</head>
<body>
<h1>Plantillas con Flask!</h1>
</body>
</html>Lo primero que haremos será modificar nuestra aplicación para que retorne nuestra plantilla mediante la función render_template().
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def hola_mundo():
return render_template('jinja.html')
if __name__ == '__main__':
app.run(debug=True)Con esta pequeña modificación ya estaríamos cargando nuestra plantilla correctamente. Ejecutamos nuestra aplicación y vamos al navegador a ver el resultado.
Hasta ahora lo único que estamos haciendo es renderizar nuestra plantilla, vamos a modificar nuestra función ‘hola_mundo()’ para que envíe algunos valores a nuestra plantilla y podamos jugar con variables y estructuras de control.
Variables Jinja2 Flask
Crearemos un par de variables, una que almacene un nombre y la otra un listado de consolas, las dos las enviaremos como argumento de nuestra función render_template().
Recuerda que podemos enviar como argumento tantas variables (clave=valor) como sean necesarias. Nosotros para este ejemplo enviaremos dos, nombre y consolas.
@app.route('/')
def hola_mundo():
un_nombre = 'Luis'
mis_consolas = ['NES', 'Megadrive', 'Master System', 'Ngage', 'Gameboy']
return render_template('jinja.html', nombre=un_nombre, consolas=mis_consolas)Vamos a modificar nuestra plantilla, antes de nada añadiremos Bootstrap a nuestra plantilla para que podamos dar estilos fácilmente a nuestro contenido en la plantilla y luego trabajaremos con el contenido del body.
Ahora en nuestra plantilla Jinja2 mediante la doble llave {{ nombre_variable }} visualizaremos el valor de estas variables.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<title>Renderizando plantillas</title>
</head>
<body class="p3">
<h1>Plantillas con Flask!</h1>
<div class="p-3 bg-secondary text-white rounded" style="max-width: 18rem;">
<p class="text-warning">
{{ nombre }}
</p>
<p>
{{ consolas }}
</p>
</div>
</body>
</html>Podemos ver los cambios en nuestro navegador.
Si nos fijamos en los valores que se muestran en nuestra plantilla podemos ver que el listado de consolas se muestra de una forma que no queremos, está mostrando a nuestro objeto tal y como se guardó en nuestra variable.
Cuando trabajamos con objetos que sean secuencias en Python podemos acceder a sus valores y recorrerlas de forma sencilla.
Para acceder a un valor concreto de nuestra secuencia podemos hacerlo por su índice.
<ul>
<li>{{ consolas[1] }}</li>
<li>{{ consolas[3] }}</li>
</ul>Estructura for con Jinja2
Para recorrer nuestra lista de consolas y mostrar todas tendremos que recorrerla mediante la estructura for dentro de nuestra plantilla.
Construiremos una estructura for en Jinja2 de la siguiente forma.
<ul>
{% for consola in consolas %}
<li>{{ consola }}</li>
{% endfor %}
</ul>
Vamos a enviar ahora una desde nuestra aplicación un diccionario para ver cómo podemos recorrerlo y acceder a todos sus valores.
Modificaremos algunas líneas de nuestra aplicación Flask.
@app.route('/')
def hola_mundo():
un_nombre = 'Luis'
mis_consolas = ['NES', 'Megadrive', 'Master System', 'Ngage', 'Gameboy']
un_diccionario = {'nombre': 'Luis', 'ciudad': 'Badajoz', 'pais': 'España'}
return render_template('jinja.html', nombre=un_nombre, consolas=mis_consolas, diccionario=un_diccionario)Desde nuestra plantilla podemos acceder a los valores del diccionario de las siguientes formas.
{{ diccionario.ciudad }}
{{ diccionario['pais'] }}Las dos formas para acceder son válidas.
Si necesitásemos recorrer el diccionario completo podríamos hacerlo con la estructura for de la siguiente forma.
<ul>
{% for clave, valor in diccionario.items() %}
<li>{{ clave }} → {{ valor}} </li>
{% endfor %}
</ul>En la documentación de Jinja2 podemos encontrar mucha más información sobre el uso de la estructura for en las plantillas.
Estructura if con Jinja2
Vamos a trabajar con la estructura if en nuestra plantilla Jinja2.
Debemos tener en cuenta que con la estructura if podemos verificar si una variable está definida.
{% if existo %}
La variable existo está definida
{% endif %}Para este ejemplo utilizaremos nuestra aplicación Flask como la tenemos y en la plantilla Jinja2 recorreremos la lista de consolas y filtraremos algunos resultados mediante el if, elif y else para cambiar el color del texto.
<ul>
{% for consola in consolas %}
{% if consola == 'Ngage' %}
<li class="text-dark">{{ consola }}</li>
{% elif consola == 'Master System' %}
<li class="text-info">{{ consola }}</li>
{% else %}
<li>{{ consola }}</li>
{% endfor %}
</ul>
Comentarios con Jinja2
Podemos realizar comentarios en nuestras plantillas Jinja2.
{# Hola, soy un comentario #}También podemos comentar una estructura completa.
{#
<ul>
{% for consola in consolas %}
{% if consola == 'Ngage' %}
<li class="text-dark">{{ consola }}</li>
{% elif consola == 'Master System' %}
<li class="text-info">{{ consola }}</li>
{% else %}
<li>{{ consola }}</li>
{% endif %}
{% endfor %}
</ul>
#}