Reutilizar plantillas en Flask con Jinja - Plantilla base
En este post sobre Flask te mostraré cómo definir una plantilla base o plantilla maestra y después solo sobrescribir el contenido y ciertos bloques, de modo que puedas definir y reutilizar una plantilla, evitando repetir código.
Para ello vamos a usar el template engine que Flask usa por defecto y que nos viene de maravilla: Jinja.
Primero vamos a definir nuestra plantilla. Normalmente solo necesitaremos definir dos bloques: el bloque de contenido y el bloque de título, ya que lo demás (head, footer, etcétera) se repite a lo largo de todas las plantillas.
Sin embargo esto solo es un ejemplo, tú puedes definir tus bloques a tu gusto.
<!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">
<!--Poner un block para que luego pueda ser remplazado en las siguientes plantillas; lo mismo con el block contenido-->
<title>CRUD MySQL con Flask - {% block titulo %}{% endblock %}</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
</head>
<body>
<nav class="navbar is-warning" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item">
<img alt="Logo de Parzibyte"
src="https://raw.githubusercontent.com/parzibyte/ejemplo-mern/main/src/img/parzibyte_logo.png"
style="max-height: 80px" />
</a>
<button class="navbar-burger is-warning button" aria-label="menu" aria-expanded="false"
data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</button>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="#">Juegos</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a href="https://parzibyte.me#contacto" class="button is-primary">
<strong>Ayuda y soporte</strong>
</a>
</div>
</div>
</div>
</div>
</nav>
{%block contenido %} {% endblock %}
</body>
</html>
Sin importar el framework o los elementos que uses, fíjate en dos cosas. Primero, en la etiqueta title
estoy definiendo el bloque llamado titulo, en este caso cuando se remplace dirá algo como CRUD MySQL con Flask - [Aquí el título que hayan colocado]
.
Después, en la línea 43 estoy definiendo todo el bloque de contenido. Ahora solo resta extender de esa plantilla.
Ahora debemos definir otra plantilla en donde extendemos de la definida anteriormente. Para ello usamos extends
.
Por cierto, también sobrescribimos los bloques usando block
. De modo que el código queda así:
{% extends "maestra.html" %}
{% block titulo %} Juegos {% endblock %}
{% block contenido %}
<section class="section">
<div class="columns">
<div class="column">
<h3 class="is-size-3">Juegos</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam pariatur omnis perspiciatis fuga
deserunt ad, incidunt blanditiis officiis velit! Maiores quisquam nesciunt eos maxime voluptatum
architecto quae quas, suscipit sit.</p>
</div>
</div>
</section>
{% endblock %}
Ahora el contenido solo es todo lo que está en section
, que es algo de relleno; pero lo que realmente importa es que estamos extendiendo de nuestra plantilla base o plantilla maestra.
Al renderizar la plantilla con render_template
:
@app.route("/juegos")
def juegos():
return render_template("juegos.html")
El HTML generado es el siguiente:
<!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">
<!--Poner un block para que luego pueda ser remplazado en las siguientes plantillas; lo mismo con el block contenido-->
<title>CRUD MySQL con Flask - Juegos </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
</head>
<body>
<nav class="navbar is-warning" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item">
<img alt="Logo de Parzibyte"
src="https://raw.githubusercontent.com/parzibyte/ejemplo-mern/main/src/img/parzibyte_logo.png"
style="max-height: 80px" />
</a>
<button class="navbar-burger is-warning button" aria-label="menu" aria-expanded="false"
data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</button>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="#">Juegos</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a href="https://parzibyte.me#contacto" class="button is-primary">
<strong>Ayuda y soporte</strong>
</a>
</div>
</div>
</div>
</div>
</nav>
<section class="section">
<div class="columns">
<div class="column">
<h3 class="is-size-3">Juegos</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam pariatur omnis perspiciatis fuga
deserunt ad, incidunt blanditiis officiis velit! Maiores quisquam nesciunt eos maxime voluptatum
architecto quae quas, suscipit sit.</p>
</div>
</div>
</section>
</body>
</html>
Si te fijas, viene todo el head, el nav, etcétera que definimos anteriormente en nuestra plantilla base, pero ahora solo estamos reutilizando así que queda un código más limpio a nivel de plantilla.
Te invito a leer más sobre Flask y Python aquí.
En este post te quiero compartir un código de C++ para listar y cancelar trabajos…
Gracias a WebAssembly podemos ejecutar código de otros lenguajes de programación desde el navegador web…
Revisando y buscando maneras de imprimir un PDF desde la línea de comandos me encontré…
Esta semana estuve recreando la API del plugin para impresoras térmicas en Android (HTTP a…
Hoy te enseñaré a extraer la cadena base64 de una clave PEM usando una función…
Encender un foco con un Bot de Telegram es posible usando una tarjeta como la…
Esta web usa cookies.