Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Sugestão] Melhorando o DRY no ultimo desafio

No final do curso, o instrutor deixa o exercicio de criar o template pro header e pro menu lateral da navegação. No código-solução disponível, foi criado um novo partials chamado _menu.html com o seguinte conteudo:

{% load static %}
<div class="pagina-inicial">
    <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>
    <main class="principal">
        <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>

O que funciona perfeitamente. Mas o fato das tags <div class="pagina-inicial"> e <main class="principal"> estarem sendo abertas no partials e sendo fechadas lá nos templates da imagem.html e imagem.html me incomodou profundamente.

Então, uma solução pra isso é separar ainda mais os pedaços de código. Você pode fazer uma base.html assim:

{% load static %}

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alura Space</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'styles/style.css' %}">

</head>

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

</html>

Agora as tags estão no mesmo arquivo e os templates pro index e imagem tem só o conteúdo da página.

Aí eu me pergunto. Tem algum efeito colateral em dividir o código assim ou é só questão de escolha mesmo?

Abraço!

2 respostas
solução!

Olá, Mayk.

Tudo bem?

Sua pergunta é muito relevante e mostra que você está pensando de maneira crítica sobre a organização do código, o que é ótimo.

A abordagem que você sugeriu é absolutamente válida e é, na verdade, uma prática comum em muitos projetos Django. Separar o código em diferentes arquivos de template para diferentes partes da página (como cabeçalho, rodapé, menu de navegação, etc.) pode tornar o código mais organizado e mais fácil de manter.

A ideia de ter um arquivo base.html que inclui todos os componentes comuns a todas as páginas é uma excelente prática. Isso permite que você mantenha a consistência em todo o site e faça alterações em um único lugar, se necessário, em vez de ter que alterar o mesmo código em vários arquivos de template.

Quanto à sua pergunta sobre possíveis efeitos colaterais, em geral, não há nenhum problema em dividir o código dessa maneira. No entanto, é importante lembrar que, ao fazer isso, você está adicionando uma camada extra de complexidade ao seu projeto. Isso significa que você precisa ter certeza de que está nomeando seus arquivos de forma clara e mantendo-os organizados de maneira lógica, para que seja fácil para você (ou qualquer outra pessoa que possa trabalhar no projeto no futuro) entender a estrutura do projeto.

Espero ter ajudado. Qualquer dúvida manda aqui. Bons estudos!

Boa, Renan! Valeu pelo feedback! Pois é. Eu estou acostumado com projetos orientados a objeto. Mas esse mundo de webdev é novo pra mim. Ainda me confunde um pouco como cada pedaço de um mesmo app tá espalhado em vários lugares diferentes :P