Plantillas con Flask

Hasta ahora en todos los tutoriales de Flask que venimos realizando hemos estado generando código HTML desde Python que retornábamos directamente con las funciones.

Algo parecido a esto.

return '<h1>Hola mundo con Flask!!</h1>'

Las plantillas con Flask vienen a facilitarnos mucho la vida en este aspecto, ya que la función render_template() nos permite renderizar un archivo .HTML completo.

Templates con Flask

Para nuestro ejemplo de plantillas con Flask utilizaremos nuestra aplicación ‘Hola mundo!’ del resto de tutoriales. Para renderizar nuestras plantillas debemos importar render_template.

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def hola_mundo():
    return '<h1>Hola mundo con Flask!!</h1>'

if __name__ == '__main__':
    app.run(debug=True)

Para que veamos cómo añadir a nuestra aplicación web una plantilla vamos a crear una muy básica. Nuestra plantilla será un archivo .HTML, solo vamos a incluir un título con etiquetas h1 y un botón.

<!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>
    <button>Saludar</button>
</body>
</html>

El sistema de plantilla de Flask requiere que estén almacenadas en un directorio llamado ‘templates’. De la misma forma que almacenábamos todos los archivos estáticos con Flask, con un directorio específico.

  • /carpeta_proyecto
    • app.py
    • /templates
      • plantilla.html

Plantillas con Flask

Una vez que tenemos esta pequeña estructura de archivos creada vamos a ver cómo renderizar nuestra plantilla.

Modificaremos nuestra función ‘hola_mundo()’ para que se renderice nuestra plantilla recién creada.

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def hola_mundo():
    return render_template('estaticos.html')

if __name__ == '__main__':
    app.run(debug=True)

Con nuestra función modificada podemos ver el resultado en nuestro navegador.

Cargando plantilla con Flask
http://localhost:5000

Archivos estáticos en nuestra plantilla

Ahora vamos a modificar la estructura creada anteriormente, añadiremos una nueva carpeta en la que incluiremos un archivo .CSS llamado ‘estilos.css’.

  • carpeta_proyecto/
    • app.py
    • templates/
      • plantilla.html
    • static/
      • estilos.css

Nuestro archivo ‘estilos.css’ es muy básico, lo único que hace es modificar el color de fondo del body de nuestro documento.

body {
    background-color: aqua;
}

Ahora lo incluiremos en nuestra plantilla de la misma forma incluiríamos cualquier hoja de estilos, entre las etiquetas head pero con una diferencia, crearemos la ruta de su ubicación con url_for() entre dobles llaves {{ url_for() }}.

<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='estilos.css')}}" media="screen" />

Así quedaría nuestra plantilla ya modificada.

<!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>
    <button>Saludar</button>
</body>
</html>

Ahora vamos a actualizar nuestra aplicación para ver los cambios que se han producido.

Cargando hoja de estilos con plantilla en Flask
http://localhost:5000

De esta forma nuestra aplicación ‘app.py’ está trabajando con dos archivos estáticos:

  • → ‘plantilla.html’ que tiene que estar almacenado en el directorio ‘templates’.
  • → ‘estilos.css’ que tiene que estar almacenado en el directorio ‘static’

Envío de variables a mi plantilla Flask

Ahora vamos a ver cómo pasar el valor de una variable a nuestra plantilla como argumento en render_template().

Creamos la variable ‘un_nombre’ y la pasamos como argumento, así de sencillo.

@app.route('/saludar')
def saludar():
    un_nombre = 'Luis'
    return render_template('estaticos.html', nombre=un_nombre)

Para rescatar desde nuestra plantilla .HTML el valor de esta variable haremos uso de la magia de Jinja2. Es decir, únicamente tenemos que poner el nombre de la variable entre dobles llaves {{ variables }}

Incluiremos su valor en una etiqueta h2 debajo de nuestro botón.

<!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>
    <button>Saludar</button>
    <h2>{{ nombre }}</h2>
</body>
</html>

Vamos a ver cómo quedaría el ejemplo de nuestra plantilla completo mostrando el valor de la variable que estamos enviando como argumento.

Cargando valor de variable desde plantilla con Flask
http://localhost:5000/saludar

Vemos que se muestra el valor de nuestra variable correctamente → Luis. Podríamos enviar una lista, tupla o el objeto que necesitemos.

No vamos a entrar mucho más en detalle sobre toda la magia que puede hacerse con Jinja2, esto lo dejaremos para otro tutorial específico (documentación del diseñador de plantillas Jinja2).

Imágenes en mi plantilla Flask

Haciendo uso de los archivos estáticos en Flask vamos a incluir una imagen en nuestra plantilla, la guardaremos en nuestra carpeta ‘static’. La ruta tenemos que colocarla igualmente entre dobles llaves y haciendo uso de url_for → {{ url_for() }}

Vamos a ver que se muestra correctamente.

<!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>
    <button>Saludar</button>
    <h2>{{ nombre }}</h2>
    <img  src="{{ url_for('static', filename='coleccion.jpg')}}" />
</body>
</html>
Cargando imagen desde plantilla con Flask
http://localhost:5000/saludar

Javascript en mi plantilla Flask

Vamos a crear un archivo Javascript que guardaremos también en nuestro directorio ‘static’.

Lo único que hace nuestro archivo .js será imprimir en la consola del navegador un mensaje con un número aleatorio cuando hagamos click en el botón que tenemos en nuestra plantilla Flask.

function muestraMensaje() {
    console.log(Math.random())
}

Ahora lo incluiremos en nuestra plantilla de la misma forma que hicimos con la hoja de estilos, entre las etiquetas head y con la ruta entre dobles llaves y haciendo uso de url_for → {{ url_for() }}

<script src="{{ url_for('static', filename='funciones.js')}}"></script>

Así queda nuestra plantilla con el archivo de funciones.js ya agregado. 

<!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>
    <button onclick='muestraMensaje()'>Saludar</button>
    <h2>{{ nombre }}</h2>
    <img  src="{{ url_for('static', filename='coleccion.jpg')}}" />
</body>
</html>

Actualizamos nuestro navegador y cada vez que hagamos click en nuestro botón se imprimirá un mensaje en la consola del navegador.

Agregando archivo Javascript a nuestra plantilla
http://localhost:5000/saludar

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *