Melhorando os Templates

Vamos fazer com que os templates das views herdem o template base e apliquem os conteúdos:

• • Ajuste novamente blog/views/home.py para usar home.html que é o template original dessa view:

from django.shortcuts import render

def home(request):

    return render(request, 'home.html')

• • Edite blog/templates/home.html para ficar assim:

{% extends '_base.html' %}

{# Esse trecho será substituído no template base! #}

{% block content %}

<section>

    <h2>Página inicial</h2>

    <p>Testando o template base com a página inicial...</p>

    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus sint quas vitae fuga harum, a repellat aut ipsa qui ab perspiciatis cupiditate unde earum? Laudantium sapiente voluptatum assumenda delectus aut?</p>

</section>

{% endblock %}

{# Esse trecho será substituído no template base! #}

{% block aside %}

<aside>

    <h3>Conteúdo complementar</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum consequuntur, eaque, ab dolorum odio amet reprehenderit.</p>

</aside>

{% endblock %}

• • Verifique se o servidor ainda roda e teste a página inicial acessando http://localhost:8000.

Ajustando Contatos

Vamos fazer o mesmo com a página de contatos na rota /contacts?

• Edite blog/templates/_base.html novamente para "ativar" o link para os contatos:

• Tecle Ctrl+H e digite #contacts na busca;

• Na substituição (campo abaixo), digite /contacts;

• Clique no botão Replace All;

• Edite o template blog/templates/contacts.html, substituindo seu conteúdo por:

{% extends '_base.html' %}

{% block content %}

<section>

    <h2>Faça Contato</h2>

    <p>Preencha os campos abaixo para entrar em contato com a equipe do Blog.</p>

    <p class="fs-6 text-danger text-center"><em>Todos os campos obrigatórios.</em></p>

    <form class="was-validated">

        <p>

            <label for="name" class="form-label">Nome:</label>

            <input type="text" name="name" id="name" required minlength="2" class="form-control">

        </p>

        <p>

            <label for="email" class="form-label">Email:</label>

            <input type="email" name="email" id="email" required class="form-control">

        </p>

        <p>

            <label for="subject" class="form-label">Assunto:</label>

            <input type="text" name="subject" id="subject" required minlength="3" class="form-control">

        </p>

        <p>

            <label for="message" class="form-label">Mensagem:</label>

            <textarea name="message" id="message" rows="4" required minlength="4" class="form-control"></textarea>

        </p>

        <p>

            <button class="btn btn-primary">Enviar</button>

        </p>

    </form>

</section>

{% endblock %}

{% block aside %}

<aside>

    <h3>Mais Contatos</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum consequuntur, eaque, ab dolorum odio amet reprehenderit.</p>

</aside>

{% endblock %}

Compare com blog/templates/home.html e entenda o código:

• A template tag {% extends %} diz qual é o template base;

• Depois, cada {% block %} preenche apenas o espaço correspondente do template base _base.html;

Teste, atualizando http://localhost:8000 e http://localhost:8000/contato/.

Dica Importante

Você pode adicionar variáveis de "contexto" em _base.html porque ela também é renderizada com a página "filha". Por exemplo:

• • Edite a view inicial, blog/views/home.py adicionando um "contexto" ownername ao render():

from django.shortcuts import render

def home(request):

    return render(request, 'home.html', {'ownername': 'Joca da Silva'})

• Edite blog/templates/_base.html para modificar o <footer>;

• Localize o trecho abaixo:

<div>&copy; 2026 Joca da Silva</div>

• • Troque por:

<div>&copy; 2026 {{ ownername | default:"Sem dono" }}</div>

Teste, atualizando http://localhost:8000 e http://localhost:8000/contato/.

Observe que na home temos "© 2026 Joca da Silva" no rodapé porque temos um valor para ownername, já em contacts aparece © 2026 Sem dono" porque na view de contatos não passamos o contexto para o template, então, ele usa o valor default.

O Django tem o filtro default para isso. Em:

<div>&copy; 2026 {{ ownername | default:"Sem dono" }}</div>

Se ownername vier vazio ou não for passado pela view, exibe "Sem dono" no lugar.

Existem outros filtros úteis no renderizador do Django:

 Filtro              Exemplo                       Resultado

default    {{ nome|default:"Visitante" }}    Valor alternativo se vazio

upper      {{ nome|upper }}                  Letras maiúsculas → ANDRÉ

lower      {{ nome|lower }}                  Letras minúsculas → andré

length     {{ frutas|length }}               Mostra quantos itens tem a coleção → 4

first      {{ frutas|first }}                Mostra o primeiro item da coleção → Maçã

last       {{ frutas|last }}                 Mostra o último item da coleção → Uva

Os filtros sempre usam o | (pipe) entre a variável e o filtro.

Também podemos criar nossos próprios filtros quando for necessário.