Extendendo Templates. Filtro extends - Django

Em muitos casos, os templates de um site precisam compartilhar uma estrutura comum, contendo blocos similares, mas com conteúdos específicos para cada página. Isso ajuda a criar um estilo uniforme, em que todas as páginas apresentam os mesmos elementos estruturais, como menu, cabeçalho, rodapé e barras laterais.

Embora seja possível criar cada template de forma independente, essa abordagem pode gerar problemas de manutenção. Alterações em elementos compartilhados, como a adição de um item ao menu, exigiriam a modificação de vários arquivos. A solução mais eficiente é definir um template base que contenha os elementos estruturais principais, permitindo sua reutilização por outros templates.

Estrutura do Projeto

Considere um projeto Django chamado programicio, que possui uma aplicação chamada hello. Dentro da aplicação, os templates são organizados da seguinte forma:

PROGRAMICIO
hello/
|-- migrations/
|-- templates/ 
        |-- base.html 
        |-- contacts.html 
        |-- index.html 
|-- __init__.py
|-- admin.py
|-- apps.py
|-- models.py
|-- tests.py
|-- views.py
programicio/
|-- __init__.py
|-- asgi.py
|-- settings.py
|-- urls.py
|-- wsgi.py

Template Base

O arquivo base.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>{% block title %}Título Padrão{% endblock title %}</title>
</head>
<body>
    <div>
        <a href="/">Início</a> | <a href="/contacts">Contatos</a>
    </div>
    <h1>{% block header %}{% endblock header %}</h1>
    <div>{% block content %}{% endblock content %}</div>
    <div>MyCorp. 2022. Todos os direitos reservados.</div>
</body>
</html>

Os blocos são definidos com as tags {% block nome_do_bloco %} e {% endblock nome_do_bloco %}, permitindo a personalização de seu conteúdo em outros templates. Por exemplo, o bloco title:

<title>{% block title %}Título Padrão{% endblock title %}</title>

Se um template que herda esse bloco não definir um conteúdo específico, será usado o valor padrão "Título Padrão". Já os blocos header e content não possuem conteúdos padrão, mas podem ser preenchidos conforme necessário.

Elementos como o menu de navegação e o rodapé, por serem comuns a todas as páginas, não precisam ser definidos como blocos, permanecendo fixos no template base.

Extendendo Templates

Os templates individuais de páginas específicas, como index.html e contacts.html, podem estender o template base e preencher os blocos necessários.

Exemplo: index.html:

{% extends "base.html" %}
{% block title %}Página Inicial{% endblock title %}
{% block header %}Bem-vindo à Página Inicial{% endblock header %}

Neste exemplo, apenas os blocos title e header são personalizados. Não é obrigatório preencher todos os blocos definidos no template base; apenas os relevantes para a página.

Exemplo: contacts.html

{% extends "base.html" %}
{% block title %}Contatos{% endblock title %}
{% block header %}Entre em Contato{% endblock header %}

{% block content %}
<p>Telefone: +12345677890</p>
<p>Email: admin@admin.com</p>
{% endblock content %}

Além dos blocos title e header, este template preenche o bloco content com informações específicas para a página de contatos.

Integração com Views e Rotas

No arquivo views.py, as funções responsáveis por renderizar os templates são definidas:

from django.shortcuts import render

def index(request):
    return render(request, "index.html")

def contacts(request):
    return render(request, "contacts.html")

No arquivo urls.py, as rotas associadas a essas funções são configuradas:

from django.urls import path
from hello import views

urlpatterns = [
    path("", views.index),
    path("contacts/", views.contacts),
]

Navegador exibindo templates feitos com uso de extends

Conclusão

Essa abordagem elimina a repetição de elementos comuns entre os templates, reduzindo o esforço de manutenção. Alterações na estrutura ou em elementos compartilhados, como o menu ou o rodapé, podem ser realizadas diretamente no template base (base.html), refletindo automaticamente em todas as páginas que o utilizam. Isso não apenas economiza tempo, mas também garante consistência visual e estrutural em todo o site.