- ¿Qué es una plantilla en Django?
- Paso 1: Crear una plantilla base
- Paso 2: Crear una plantilla que hereda
- Tabla: Etiquetas de plantilla usadas
En muchos sitios web, hay partes que se repiten, como el menú o el pie de página, pero otras cambian constantemente, como el contenido principal. ¿La solución? No es copiar y pegar HTML cada vez.
En Django, usamos la herencia de plantillas para evitar esto. En esta lección, aprenderás cómo funciona y cómo usarla en tu proyecto para evitar redundancias y mantener todo organizado.
¿Qué es una plantilla en Django?
{% block %} y {% extends %}) para organizarlas mejor.
La idea es crear una plantilla base (como un molde) que contenga el diseño general del sitio web. Luego, otras plantillas pueden "extender" esa plantilla base y solo cambiar las partes que necesiten, sin repetir todo el HTML.
Paso 1: Crear una plantilla base
Vamos a comenzar creando una plantilla llamada base.html. Esta será la base común para todas nuestras demás páginas.
<!-- archivo: codica_django_blog/templates/base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}Django en codica{% endblock %}</title>
</head>
<body>
<div id="sidebar">
{% block sidebar %}
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/articles/">Artículos</a></li>
</ul>
{% endblock %}
</div>
<div id="content">
{% block content %}{% endblock %}
</div>
</body>
</html>
¿Qué significa esto?
{% block nombre %} ... {% endblock %}: son bloques que podemos reemplazar (o no) en una plantilla que herede esta base. Aquí tenemos tres bloques:title: para cambiar el título de la página.sidebar: para cambiar el menú lateral.content: para mostrar el contenido principal.
Si una plantilla hija no sobreescribe un bloque, se usa el valor que está en base.html.
Paso 2: Crear una plantilla que hereda
Ahora vamos a hacer una página y usar esa plantilla base. Supongamos que tenemos una página "Acerca del blog" (about.html):
<!-- archivo: codica_django_blog/templates/about.html -->
{% extends "base.html" %}
{% block title %}Explorando Django con codica{% endblock %}
{% block content %}
<h1>Sobre este blog</h1>
<p>Explorando Django con codica</p>
<p>{{ tags|join:", " }}</p>
{% endblock %}
Veamos qué está pasando:
{% extends "base.html" %}: le estamos diciendo a Django que esta plantilla se basa enbase.html.- Solo sobreescribimos los bloques
titleycontent. - Como no cambiamos el bloque
sidebar, Django usará el menú que ya venía por defecto enbase.html.
Este mecanismo permite que nuestras plantillas sean más limpias y más fáciles de mantener.
Django permite heredar plantillas varias veces. Un patrón común es usar tres niveles:
Una plantilla
base.htmlgeneral
Define el diseño base para todo el sitio (como logo, menú principal, pie de página, etc).Una plantilla intermedia por sección
Por ejemplo:base_article.htmlpara el área de artículos.base_news.htmlpara noticias.
Estas plantillas extiendenbase.htmly ajustan elementos según el contexto.
Una plantilla para cada página específica
Por ejemplo:article_detail.htmlpara un artículo específico.news_item.htmlpara una noticia específica. Estas usaránbase_article.htmlobase_news.htmlcomo base.
Este enfoque nos ayuda a mantener el código organizado y evita repetir estructuras comunes.
Tabla: Etiquetas de plantilla usadas
| Comando | Descripción |
|---|---|
{% extends "..." %} |
Indica qué plantilla se va a usar como punto de partida |
{% block nombre %} |
Declara una sección que otras plantillas pueden sobreescribir |
{% endblock %} |
Marca el final de un bloque |
{{ variable }} |
Muestra una variable en el HTML |
{{ variable|filtro }} |
Muestra una variable aplicándole un filtro (como join) |
Resumen
- En Django puedes usar herencia de plantillas para evitar repetir código HTML.
- Una plantilla base (
base.html) contiene los elementos comunes del sitio. - Las plantillas hijas usan
{% extends "base.html" %}y sobreescriben bloques con{% block nombre %}.
Ahora ya sabes cómo construir estructuras limpias reutilizando plantillas con Django. Es como armar una maqueta donde solo cambias las piezas que necesitas. Prueba creando tus propias plantillas base y vas a ver lo útil que es este patrón.
Trabajo independiente
Repasa y guarda tu progreso
En esta actividad vamos a reforzar el contenido aprendido y registrar los cambios realizados. Sigue estos pasos:
- Repite todo lo que viste en la teoría de la lección en tu computadora.
- Guarda los cambios en Git usando
git addygit commit.
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.
