Generar el template maestro o base en una app en Django
Índice de contenido
- Cómo crear una plantilla maestra en Django paso a paso
- Qué es una plantilla maestra en Django y para qué sirve
- ⚙️ Por qué usar una plantilla base en tus proyectos Django
- ️ Cómo crear una plantilla maestra Django (base.html)
- Generar vista base o maestra en Django
- Uso de los bloques {% block title %} y {% block content %}
- Cómo heredar la plantilla maestra en otras vistas: Añadir encabezado, pie y archivos estáticos
- Modificar tus templates de listado, show... y cualquier otro de tu app en Django
- Buenas prácticas y errores comunes al usar plantillas Django
- Errores comunes
- Conclusiones: por qué una plantilla maestra mejora tu desarrollo en Django
- ❓ Preguntas frecuentes sobre plantillas maestras en Django
Con nuestros archivos estáticos como Bootstrap configurados, lo siguiente que vas a querer hacer es maquetar los templates, pero, debemos de hacerlo de manera organizada y es pot eso que los templates maestros son imprescindibles.
Crear una plantilla maestra en Django (o base template) es uno de esos pasos que marcan la diferencia entre un proyecto que se mantiene con facilidad y otro que se convierte en un caos de archivos HTML duplicados.
En mi caso, al principio tenía solo dos vistas: una de listado de productos y otra de detalle. Todo parecía bien hasta que quise agregar un simple logo y un archivo CSS. Tuve que modificar ambas plantillas… y me di cuenta de que, si la aplicación crecía, eso sería insostenible.
Cómo crear una plantilla maestra en Django paso a paso
Crear una plantilla maestra en Django (o base template) es uno de esos pasos que marcan la diferencia entre un proyecto que se mantiene con facilidad y otro que se convierte en un caos de archivos HTML duplicados.
En mi caso, al principio tenía solo dos vistas: una de listado de productos y otra de detalle. Todo parecía bien hasta que quise agregar un simple logo y un archivo CSS. Tuve que modificar ambas plantillas… y me di cuenta de que, si la aplicación crecía, eso sería insostenible.
La solución fue clara: una plantilla base que todas las demás heredaran.
Qué es una plantilla maestra en Django y para qué sirve
Una plantilla maestra (o base template) es un archivo HTML que define la estructura principal de tu sitio: el encabezado, los menús, el footer y los bloques donde irá el contenido dinámico.
En Django, se crea combinando el poder de las etiquetas {% block %} y {% extends %}. Así, todas las páginas comparten un mismo esqueleto y solo cambian los fragmentos específicos.
Ejemplo conceptual:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock title %}</title>
</head>
<body>
{% block content %}{% endblock content %}
</body>
</html>De esta forma, tus demás vistas solo necesitan “extender” este archivo base y definir su propio contenido.
⚙️ Por qué usar una plantilla base en tus proyectos Django
Cuando empecé a trabajar con Django, me encontré repitiendo los mismos <head>, <body> y <footer> en cada template. Al principio no molestaba, pero en cuanto agregué un logo, un CSS y un menú, mantener la coherencia se volvió un dolor de cabeza.
Ahí entendí el valor de las plantillas maestras:
- Evitan la duplicación de código: defines el esqueleto una sola vez.
- Mejoran la mantenibilidad: cambias algo en el base.html y se actualiza en todas las vistas.
- Permiten escalar fácilmente: ideal si tu app crece a 10 o 100 páginas.
- Aumentan la coherencia visual: el usuario percibe una interfaz uniforme.
️ Cómo crear una plantilla maestra Django (base.html)
Generar una vista base para nuestra app en un proceso FUNDAMENTAL y el siguiente paso natural cuando la aplicación va creciendo y esto es para garantizar que nuestras aplicaciones sean mantenibles y más fácilmente escalables, ya que supone en nuestro caso que tenemos un par de vistas, la de índice para el listado, y la de detalle de un producto para el show tenemos algo como lo 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">
<title>
Listado Productos
</title>
</head>
<body>
<h1>Hola Mundo</h1>
{% for p in products %}
<h3>{{ p.title }}</h3>
<a href="{% url 'gestion:show' p.id %}">Ver</a>
{% endfor %}
<nav>
{% if products.has_previous %}
<a href="?page={{ products.previous_page_number }}">Prev</a>
{% endif %}
{% for i in products.paginator.page_range %}
<a href="?page={{ i }}">{{i }}</a>
{% endfor %}
{% if products.has_next %}
<a href="?page={{ products.next_page_number }}">Next</a>
{% endif %}
</nav>
</body>
</html>Y la de detalle:
<!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>
{{product.title}}
</title>
</head>
<body>
<h1>{{product.title}}</h1>
<p>{{product.price}}$</p>
<p>{{product.category.title}}</p>
<p>{{product.description}}</p>
</nav>
</body>
</html>Como puedes ver, el esqueleto del body o HTML se repiten en ambas y lo único que cambia es el contenido que mostramos en el medio.
Entonces, qué pasa si quieres agregar un archivo CSS, JS o cualquier otro elemento HTML que requiera modificar cada una de estas vistas; por ejemplo, un logo; tuvieras que modificar cada uno de estas vistas, en este caso es simple, ya que son solamente 2 templates de nuestra app en Django, pero qué pasa si son 10 paginas la que costa tu aplicación, o 100... ya el problema crece.
O si queremos agregar un menú de navegación, footer o cualquier otro componente.
Generar vista base o maestra en Django
En estos casos la mejor opción es crear una vista base o template para tu aplicación, que puede ser más de una o las que necesites; en este caso, solamente necesitamos uno; creamos una vista:
<!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>
{% block title %}
{% endblock title %}
</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>Creamos el archivo base.html dentro de templates/
Estructura básica de base.html
Como puedes ver, aquí es que tenemos el cuerpo base, la etiqueta HTML, body... y los bloques (block) encierran la parte dinámica, puedes colocar tantos bloques como quieras, en este caso tenemos dos, para el body, en donde colocamos nuestra vista de detalle o el listado... y el título; cada bloque tiene que tener un nombre, que es el ID.
Uso de los bloques {% block title %} y {% block content %}
Cada vista que hereda de base.html puede redefinir estos bloques según lo necesite.
{% extends "base.html" %}
{% block title %}Listado de Productos{% endblock title %}
{% block content %}
<h2>Productos</h2>
{% for p in products %}
<h3>{{ p.title }}</h3>
<a href="{% url 'gestion:show' p.id %}">Ver</a>
{% endfor %}
{% endblock content %}Con solo agregar {% extends "base.html" %}, veras una reducción drástica en el código duplicado.
Cómo heredar la plantilla maestra en otras vistas: Añadir encabezado, pie y archivos estáticos
Con {% load static %} puedes incorporar tus archivos CSS o JS en el base.html.
Por ejemplo:
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<script src="{% static 'js/main.js' %}"></script>Así, todos los templates que hereden del base tendrán automáticamente esos recursos cargados.
Modificar tus templates de listado, show... y cualquier otro de tu app en Django
Ahora, lo que tenemos que hacer es indicar a nuestros templates que queremos que use el template base anterior, que extienda o herede de esta vista anterior; para eso:
{% extends "base.html" %}En este template maestro definimos dos bloques, uno llamado content y otro title; con estos podemos colocar cualquier clase de contenido de donde heredamos dicho template; cómo haremos a continuación.
Adaptar el template de listado
{% extends "base.html" %}
{% block title %}
{{product.title}}
{% endblock title %}
{% block content %}
<h1>{{product.title}}</h1>
<p>{{product.price}}$</p>
<p>{{product.category.title}}</p>
<p>{{product.description}}</p>
{% endblock %}Adaptar el template de listado
{% extends "base.html" %}
{% block title %}
Listado Productos
{% endblock title %}
{% block content %}
<h1>Hola Mundo</h1>
{% for p in products %}
<h3>{{ p.title }}</h3>
<a href="{% url 'gestion:show' p.id %}">Ver</a>
{% endfor %}
<nav>
{% if products.has_previous %}
<a href="?page={{ products.previous_page_number }}">Prev</a>
{% endif %}
{% for i in products.paginator.page_range %}
<a href="?page={{ i }}">{{i }}</a>
{% endfor %}
{% if products.has_next %}
<a href="?page={{ products.next_page_number }}">Next</a>
{% endif %}
</nav>
{% endblock %}Buenas prácticas y errores comunes al usar plantillas Django
Nombres de bloques coherentes
Evita mezclar nombres como content, main, body. Usa siempre los mismos en todo el proyecto.
Organización de carpetas templates/
Crea una estructura clara:
templates/
├── base.html
├── products/
│ ├── list.html
│ └── detail.html
Errores comunes
- Olvidar {% load static %} al usar archivos CSS o JS.
- Rutas incorrectas al extender ({% extends "base.html" %}).
- Bloques sin cerrar ({% endblock %}).
Conclusiones: por qué una plantilla maestra mejora tu desarrollo en Django
Desde que empecé a usar una plantilla base, mis proyectos en Django son mucho más fáciles de mantener.
Ya no repito código ni pierdo tiempo haciendo cambios en múltiples vistas.
La reutilización se vuelve parte natural del flujo de trabajo y la coherencia visual es inmediata.
Si tu app tiene más de dos páginas, necesitas una plantilla maestra. Es uno de los fundamentos del desarrollo limpio con Django.
❓ Preguntas frecuentes sobre plantillas maestras en Django
¿Qué es una plantilla maestra en Django?
Es una plantilla base que define la estructura principal del sitio y permite heredar bloques comunes.
¿Cómo se crea una plantilla base?
Crea base.html con bloques {% block %} y luego extiéndelo con {% extends "base.html" %} en las demás vistas.
¿Puedo tener más de una plantilla base?
Sí. Puedes crear una por cada app o sección (ejemplo: admin, tienda, blog).
¿Cómo agrego CSS o JS a la plantilla base?
Usa {% load static %} y enlaza tus archivos dentro del <head> o antes del cierre de <body>.
¿Qué beneficios tiene usar plantillas maestras?
Ahorro de tiempo, mantenimiento sencillo y consistencia visual en todo el proyecto.
Ahora, veamos como emplear la sesión en Django.
Acepto recibir anuncios de interes sobre este Blog.
Aprende a crear vistas maestras en Django para reutilizar templates o vistas HTML genéricas y poder modularizar tu aplicación y que crezca de manera organizada.