Herança de Templates

Parte da seção Fundamentos do Django do Journey de Django da Coddy. Lição 17 de 23.

home.html e drinks.html repetem o mesmo <head>, e em breve também uma barra de navegação. Se você mudar a estrutura, terá que editar todos os arquivos. Em vez disso, um modelo serve de estrutura, e as páginas o preenchem.

A estrutura marca a parte que uma página preenche com uma tag {% block %} e um nome. O library/base.html de uma biblioteca:

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

Uma página começa com {% extends %} e, em seguida, preenche o bloco:

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

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

{% extends %} deve ser a primeira tag. Em uma página que estende outra, tudo o que estiver fora de um bloco será descartado: um título que você esquecer de envolver desaparecerá.

Desafio

Médio

Em base.html, coloque um bloco vazio chamado content dentro de <main>.
Faça home.html e drinks.html estenderem "menu/base.html", com seu próprio HTML dentro desse bloco.

Pressione Executar: as duas páginas exibem a barra de navegação de base.html.

Experimente você mesmo

<!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>