Café y Código

3. Templates: Herencia y Renderizado 🎨

El motor de plantillas de Django (DTL - Django Template Language) separa la capa de presentación de la lógica en Python. Permite mostrar variables, iterar datos, aplicar filtros y estructurar maquetas modulares mediante herencia.

SUBMÓDULO 3.1

Plantilla Base Maestra (base.html)

Define el esqueleto HTML global de la aplicación (encabezados, estilos, navegación y bloques reutilizables {% block %}):

templates/base.html
HTML
1<!-- templates/base.html (Plantilla Base Maestra) -->
2<!DOCTYPE html>
3<html lang="es">
4<head>
5 <meta charset="UTF-8">
6 <title>{% block title %}Biblioteca Central{% endblock %}</title>
7</head>
8<body>
9 <header>
10 <nav>
11 <a href="{% url 'biblioteca:catalogo' %}">Catálogo</a>
12 </nav>
13 </header>
14
15 <main>
16 {% block content %}
17 <!-- El contenido de cada vista hija se inyectará en este bloque -->
18 {% endblock %}
19 </main>
20</body>
21</html>
SUBMÓDULO 3.2

Plantilla Hija y Renderizado DTL

Las plantillas hijas extienden la plantilla maestra con {% extends 'base.html' %} y sobreescriben únicamente los bloques necesarios:

templates/biblioteca/catalogo.html
HTML
1<!-- templates/biblioteca/catalogo.html (Plantilla Hija) -->
2{% extends 'base.html' %}
3
4{% block title %}Catálogo de Libros - Biblioteca{% endblock %}
5
6{% block content %}
7<h1>Libros Disponibles ({{ libros|length }})</h1>
8
9<div class="grid-libros">
10 {% for libro in libros %}
11 <article class="tarjeta-libro">
12 <h3>{{ libro.titulo }}</h3>
13 <p>Autor: <strong>{{ libro.autor.nombre_completo }}</strong></p>
14 <p>Precio de Reposición: ${{ libro.precio_reposicion|floatformat:2 }}</p>
15 <a href="{% url 'biblioteca:libro_detalle_id' pk=libro.id %}">Consultar</a>
16 </article>
17 {% empty %}
18 <p>No se encontraron libros que coincidan con la búsqueda.</p>
19 {% endfor %}
20</div>
21{% endblock %}
Ko-fi
Donaciones
Apoyá cafeycodigo con un café en Ko-fi. Colaboradores: insignia, muro y zona exclusiva.