1
resposta

[Projeto] Partials para header e navbar

Consegui fazer o exercício final de refatorar o código do index.html e imagem.html. É diferente da solução dada no projeto final pelo professor e compartilho aqui o que fiz.

Durante a aula, o professor 'parciou' o footer criando uma pasta partials e o seu respectivo arquivo "_footer.html". O desafio é fazer o mesmo para outros elementos repetidos nas duas páginas. Para mim, são 2: header e navbar. Então criei dois arquivos html para cada um.

header

{% load static %}
<header class="cabecalho">
    <img src="{% static '/assets/logo/Logo(2).png' %}" alt="Logo da Alura Space" />
    <div class="cabecalho__busca">
        <div class="busca__fundo">
            <input class="busca__input" type="text" placeholder="O que você procura?">
            <img class="busca__icone" src="{% static '/assets/ícones/1x/search.png' %}" alt="ícone de search">
        </div>
    </div>
</header>

navbar

{% load static %}
<section class="menu-lateral">
    <nav class="menu-lateral__navegacao">
        <a href="{% url 'index' %}"><img src="{% static '/assets/ícones/1x/Home - ativo.png' %}"> Home</a>
        <a href="#"><img src="{% static '/assets/ícones/1x/Mais vistas - inativo.png' %}"> Mais vistas</a>
        <a href="#"><img src="{% static '/assets/ícones/1x/Novas - inativo.png' %}"> Novas</a>
        <a href="#"><img src="{% static '/assets/ícones/1x/Surpreenda-me - inativo.png' %}"> Surpreenda-me</a>
    </nav>
</section>

base.html

Precisei adapatar o base.html e aqui surgiu a dúvida se do jeito que fiz é correto ou não, se é uma boa prática ou não. Segue trecho do base.html:

<body>
    <div class="pagina-inicial">
        {% include 'galeria/partials/_header.html' %}
        <main class="principal">
            {% include 'galeria/partials/_navbar.html' %}
            {% block content %}{% endblock %}
        </main>
    </div>
    {% include 'galeria/partials/_footer.html' %}
</body>

Pensei nos códigos python no meio do html como literalmente os/as templates tags criadas (header e navbar).

Espero que da forma que fiz não interfira no próximo curso que acredito ser continuação desse.

1 resposta

Olá Ítalo! Como vai?

Que bacana ver você se aventurando e refatorando o código por conta própria!

Criar partials para elementos repetidos como header e navbar é uma prática muito comum e recomendada, pois ajuda a manter o código mais organizado e facilita a manutenção.

Pelo que você descreveu, parece que você está no caminho certo. Ao incluir os arquivos _header.html e _navbar.html no seu base.html usando {% include %}, você está seguindo uma boa prática de reutilização de código em templates do Django. Isso não só torna seu código mais limpo, mas também facilita a atualização de elementos comuns em várias páginas.

Seu base.html está bem estruturado, e essa abordagem não deve interferir em cursos futuros. Na verdade, ao seguir essa prática, você está se preparando bem para projetos mais complexos onde a organização e a reutilização de código são essenciais.

Bons estudos!

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!