Templates Aninhados. Filtro include no Django

O filtro include permite incorporar um template dentro de outro, tornando a estrutura de templates mais modular e reutilizável. O nome do template a ser incluído é especificado como parâmetro do filtro:

{% include "nome_do_template" %}

Por exemplo, considere dois templates em um projeto Django: index.html e banner.html.

PROGRAMICIO
hello/
|-- migrations/
|-- templates/
        |-- banner.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

No arquivo banner.html, um código simples pode ser definido assim:

<div>Guia de Django em www.programicio.com</div>

No arquivo index.html, o template banner.html é incluído dessa forma:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Django em www.programicio.com</title>
  </head>
  <body>
    <h2>Página Inicial</h2>
    {% include "banner.html" %}
  </body>
</html>

Quando o navegador acessa index.html, o conteúdo de banner.html é renderizado no local definido pelo filtro include.

Templates Aninhados e Filtro Include - Django

Vale ressaltar que, ao invés de especificar diretamente o caminho do template como uma string fixa, é possível utilizar uma variável para determinar qual template será incluído:

{% include template_name %}

Nesse cenário, espera-se que template_name contenha o caminho do template desejado. Isso torna a inclusão mais flexível, especialmente em situações onde o template é escolhido dinamicamente.

Enviando Dados para Templates Aninhados

Templates aninhados podem receber dados adicionais. Modificamos o template banner.html para o seguinte:

<div>Guia de {{ tutorial }} em {{ site }}</div>

O código de index.html pode ser ajustado para incluir essas variáveis:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Django em www.programicio.com</title>
  </head>
  <body>
    <h2>Página Inicial</h2>
    {% include "banner.html" with tutorial="Python" site="www.programicio.com" %}
  </body>
</html>

As variáveis tutorial e site são definidas após o operador with. Isso permite personalizar o conteúdo do template incluído com base no contexto do template pai.

Enviando Dados para Templates Aninhados em Django

Herança de Dados

Templates aninhados herdam automaticamente variáveis e dados fornecidos pelo template pai, a menos que explicitamente configurado de outra forma. Por exemplo, considere o template banner.html:

<div>Guia de {{ tutorial }} em {{ site }}</div>

No arquivo views.py, é possível definir uma função de renderização que fornece a variável site para o template index.html:

from django.shortcuts import render

def index(request):
    return render(request, "index.html", context={"site": "www.programicio.com"})

Com essa configuração, o código de index.html pode ser escrito assim:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Django em www.programicio.com</title>
  </head>
  <body>
    <h2>Página Inicial</h2>
    {% include "banner.html" with tutorial="Python" %}
  </body>
</html>

No template banner.html, a variável site estará automaticamente disponível porque foi enviada para o template pai index.html.

Controle sobre a Herança de Dados

Se a herança automática de variáveis do template pai para o template aninhado não for desejada, o operador only pode ser utilizado:

{% include "banner.html" with tutorial="Python" only %}

Nesse caso, o template banner.html não terá acesso às variáveis do template pai, como site. Apenas as variáveis explicitamente fornecidas com o operador with estarão disponíveis no template aninhado.

Documentação oficial: