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.