En este tutorial veremos cómo trabajar con las plantillas en flask, pasando variables y renderizando una u otra plantilla dependiendo de la ruta.
Antes de comenzar con las plantillas de flask recomiendo ver la introducción a Flask.
Plantillas con Flask
Las plantillas van dentro del directorio templates. Por el momento no veremos herencia de vistas o layouts, simplemente vistas con datos.
Para renderizar una vista con flask utilizamos render_template, esta función toma un argumento: el nombre del archivo HTML, por ejemplo, hola.html
Adicionalmente podemos pasarle kwargs como veremos en los ejemplos.
Por cierto, si tú no quieres colocar tus plantillas en el directorio templates, mira este post para ver cómo cambiar la ruta.
Rutas y vistas
Veamos nuestro archivo con las rutas; es muy simple y está basado en el hola mundo de flask.
"""
Plantillas con Flask
https://parzibyte.me/blog
"""
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def inicio():
return render_template("hola.html", nombre="Luis")
@app.route('/suma')
def suma():
return render_template("suma.html")
if __name__ == "__main__":
app.run(host='0.0.0.0', port=8000, debug=True)Si queremos renderizar una vista sin pasarle datos tenemos un ejemplo en la línea 17, invocamos a render_template sin pasarle datos.
En cambio, para pasar datos a una vista podemos indicarlo en forma de kwargs, como se ve en la línea 13, dentro de la vista vamos a acceder a la variable nombre.
Por cierto, si quisieras pasar más variables simplemente sepáralas con una coma:
render_template("plantilla.html", nombre="Luis",edad=22)
Ahora veremos las vistas.
Las vistas para flask
No olvides que estas vistas están dentro de la carpeta templates. La que es hola.html queda así:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Mi web con Flask</title>
</head>
<body>
<h1>Hola, {{nombre}}</h1>
</body>
</html>Como ves, para mostrar un valor se usan los mostachos o llaves {{}}. Ahora veamos la de suma.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Resultado de suma</title>
</head>
<body>
<h1>5 + 5 = {{ 5 + 5 }}</h1>
</body>
</html>Si te fijas bien, esta vista no recibe ningún dato, pero es capaz de mostrar el resultado ya que las llaves no solo muestran valores, sino que evalúan expresiones y muestran el resultado.
Probando
Ahora vamos a probar. Al ejecutar la app con python main.py y visitar localhost:8000 vemos esto:
Aunque este ejemplo es básico, puedes ver cómo podemos definir plantillas utilizando el motor de plantillas jira; que por cierto, no es el único motor disponible.
Si quieres investigar más, puedes ver la documentación oficial.
