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.

See the gist on github.

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í:

See the gist on github.

Como ves, para mostrar un valor se usan los mostachos o llaves {{}}. Ahora veamos la de suma.html:

See the gist on github.

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.