- ¿Qué es una plantilla base?
- Crear una plantilla hija
- ¿Qué resultado obtenemos?
- ¿Puedo tener más de un nivel?
En un sitio web, muchas páginas comparten elementos como el header, menú y footer. Copiar y pegar ese código en cada página sería un caos. 🤯
¿Y si necesitas hacer un cambio? Editar todo manualmente no es opción. Para eso, Flask nos ofrece una solución elegante: la herencia de plantillas.
¿Qué es una plantilla base?
header) y el pie de página (footer).
Vamos a empezar creando una plantilla base llamada layout.html. Esta plantilla va a tener la estructura básica del sitio:
<!-- courses/layout.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}Flask proyecto{% endblock %}</title>
</head>
<body>
<!-- Menú lateral (sidebar) -->
<div id="sidebar">
{% block sidebar %}
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/courses/">Cursos</a></li>
</ul>
{% endblock %}
</div>
<!-- Contenido principal -->
<div id="content">
{% block content %}{% endblock %}
</div>
</body>
</html>
¿Y eso qué significa?
Aquí hay algo nuevo: las instrucciones {% block nombre %} ... {% endblock %}.
- Un
blockes una zona que podemos "rellenar" o "reemplazar" desde una plantilla hija (ya veremos qué es eso). - Si alguna plantilla no sobrescribe ese bloque, se usará el contenido por defecto que está escrito dentro del bloque.
Crear una plantilla hija
Supongamos que queremos mostrar una página donde aparezca la lista de cursos. Usamos el archivo index.html, pero esta vez no vamos a escribir todo desde cero: vamos a indicarle que use la estructura de layout.html.
Para eso usamos la palabra clave {% extends "layout.html" %}.
<!-- courses/index.html -->
{% extends "courses/layout.html" %}
<!-- Cambiamos el título de la página -->
{% block title %}Cursos{% endblock %}
<!-- Agregamos el contenido principal -->
{% block content %}
<table>
{% for course in courses %}
<tr>
<td>{{ course.id }}</td>
<td>{{ course.name }}</td>
</tr>
{% endfor %}
</table>
{% endblock %}
Lo que estamos haciendo aquí es:
- Decir que esta plantilla extiende a
layout.html. - Reemplazar tres secciones del archivo base con nuevo contenido:
- El bloque
titlepara poner el título "Cursos". - El bloque
contentpara mostrar una tabla con los cursos.
- El bloque
- Como no sobrescribimos el bloque
sidebar, se mantiene el mismo que está enlayout.html.
¿Qué resultado obtenemos?
Cuando Flask genera esta página, el resultado final será algo como esto:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cursos</title>
</head>
<body>
<div id="sidebar">
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/courses/">Cursos</a></li>
</ul>
</div>
<div id="content">
<table>
<tr>
<td>42</td>
<td>Curso de Flask</td>
</tr>
</table>
</div>
</body>
</html>
Como ves, no repetimos nada del código común. Solo cambiamos lo que hacía falta.
¿Puedo tener más de un nivel?
Sí, ¡claro! De hecho, una buena práctica es trabajar por niveles. Algo así:
| Archivo | Descripción |
|---|---|
layout.html |
Plantilla base general con el diseño principal del sitio. |
layout_courses.html |
Extiende a layout.html, pero añade cosas específicas de la sección de cursos. |
index.html |
Extiende a layout_courses.html y muestra una lista de cursos. |
Este enfoque usa varios niveles de herencia. Así, puedes reutilizar mucho más código, y si algún día quieres cambiar el estilo general del sitio, lo haces solo en layout.html.
Puedes sobrescribir el bloque sidebar en layout_courses.html para que incluya opciones adicionales, como "Mis cursos" o "Crear curso", sin cambiar el menú principal del sitio.
Resumen
- Una plantilla base te permite organizar las partes comunes del sitio en un solo lugar.
- Usa
{% block nombre %}para definir secciones que pueden verse modificadas en otras plantillas. - Las plantillas hijas usan
{% extends "layout.html" %}para apoyarse en la base. - Solo sobrescribes lo necesario; lo demás se reutiliza.
- Puedes tener plantillas en múltiples niveles para organizar mejor secciones específicas.
- Este sistema evita el código repetido y hace que los cambios sean más fáciles de aplicar en todo el sitio.
Ahora que sabes cómo funciona la herencia de plantillas en Flask, prueba reorganizar tus vistas usando esta estructura. Te va a ahorrar mucho trabajo a largo plazo.
Trabajo independiente
- Repite los pasos de la teoría.
Aplicación de referencia
Materiales adicionales
Para acceder completo a curso necesitas un plan básico
El plan básico te dará acceso completo a todos los cursos, ejercicios y lecciones de Códica, proyectos y acceso de por vida a la teoría de las lecciones completadas. La suscripción se puede cancelar en cualquier momento.
