Herencia de plantillas

Parte de la sección Conceptos básicos de Django del Journey de Django de Coddy. Lección 17 de 23.

home.html y drinks.html repiten el mismo <head>, y pronto también una barra de navegación. Si cambias el marco, tienes que editar todos los archivos. En cambio, una plantilla base sirve de marco para todas las páginas, y cada página completa su propia parte. Django llama al marco la plantilla padre y a cada página, una plantilla hija.

El marco marca la parte que completa una página con una etiqueta {% block %} y un nombre. Una plantilla de una biblioteca, library/base.html:

<body>
    <nav>...</nav>
    <article>{% block body %}{% endblock %}</article>
</body>

Una página empieza con {% extends %} y después completa el bloque:

{% extends "library/base.html" %}

{% block body %}
    <p>We are open until 20:00.</p>
{% endblock %}

{% extends %} debe ser la primera etiqueta. En una página que extiende otra, se descarta todo lo que esté fuera de un bloque: un encabezado que olvides incluir en un bloque desaparecerá.

Desafío

Intermedio

Haz que ambas páginas compartan el marco de base.html.

En base.html, coloca un bloque vacío llamado content dentro de <main>.
En home.html, extiende "menu/base.html" en la primera línea. Conserva solo lo que estaba dentro de <body> y colócalo en el bloque content.
Haz lo mismo en drinks.html.

Pulsa Run: ambas páginas muestran la navegación de base.html.

Pruébalo tú mismo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Corner Café</title>
</head>
<body>
    <nav>
        <a href="{% url 'menu:home' %}">Home</a>
        <a href="{% url 'menu:drinks' %}">Drinks</a>
        <a href="{% url 'menu:about' %}">About</a>
    </nav>
    <main>
        <!-- each page's content goes here -->
    </main>
</body>
</html>