Construindo um blog com Django - parte 2
Continuando o post anterior, agora vamos falar um pouco sobre a estrutura do nosso blogue, vamos decidir como queremos ele.
Nosso blogue será composto por uma página home, uma com post
inteiro, página de pesquisa com filtros de tags e categorias, estas serão
as "classificações" de nossos post, e sem esquecer a página de login e
cadastro também.
Já decidido quais páginas queremos, vamos partir pro código.
Primeiro criaremos nosso index.html em
blog/frontend então a árvore da nossa pasta
blog ficará a seguinte:
Em nosso index.html vamos colar
o snippet do Bootstrap5. Deixaremos apenas a primeira tag <script>,
removeremos as outras duas abaixo.
Servidor de testes
Caso não queira desenvolver rodando servidor, recomendo o plugin Live Server para VSCode, mas você também pode rodar um servidor de testes local usando Python, para isso basta rodarpython -m SimpleHTTPServer ou
python3 -m http.server dentro de blog/frontend.
Agora vamos de fato pro código.
Vamos começar criando nosso querido e precioso header.
Logo abaixo do início da tag <body> vamos adicionar a
<header> e dentro adicionaremos
este snippet, agora vamos tirar o trecho
<a class="navbar-brand" href="#">Navbar</a> e
também a tag <form>, ficando assim
Agora antes da tag <nav> vamos adicionar uma
div e dar as classes .d-flex,
.flex-column, .flex-md-row, e
.justify-content-center. Dentro dela vamos colocar apenar um
<h1>LOGO</h1> e rodar nosso
servidor de testes.
Troquei
<nav class="navbar navbar-expand-lg navbar-light bg-light">
por
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
Já vimos que ta tudo funcionando, então agora vamos "configurar" nossa navbar.
Começaremos substituindo todas os elementos <li> em
nav por:
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Por Categoria</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Por Tag</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contatos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sobre</a>
</li>
Agora já devemos ter uma navbar mais agradável.
Que tal começarmos a estruturar o corpo do nosso blog? Legal!
Começaremos adicionando um elemento <main> logo abaixo do nosso
header e colocando a classe .container-xl nele como mostrado
<header>
...Código cortado para facilitar a visualização
</header>
<main class="container-xl"></main>
E você deve estar me perguntando o porquê de usar container-xl e não
container ou container-fluid, e a resposta é simples. Porque
queremos que em telas bem maiores o corpo de nosso blog não preencha toda a
tela automaticamente, mas fique com uma largura fixa para telas maiores que
1140px de largura, o que não aconteceria na última opção, e na primeira
teríamos um resultado parecido com a última
Saiba mais nessa tabelinha do próprio BS
Dentro da nossatag <main> agora vamos adicionar as linhas
<div class="col-12 col-md-7"></div>
<aside class="col-12 col-md-4"></aside>
A segunda linha, elemento aside vai ser nossa sidebar que em telas
maiores que 768px aparece do lado direito, do contrário vai pra baixo. A
primeira linha é onde vamos colocar os posts em estaque na nossa home; mas pra
isso vamos adicionar mais umas duas classes ao nosso main ficando assim:
<main class="container-xl d-md-flex justify-content-evenly">
<div class="col-12 col-md-7"></div>
<aside class="col-12 col-md-4"></aside>
</main>
E esta parte já meio que ficou muito grande. Na próxima parte criaremos nossos
artigos em destaque na nossa main > div e ainda adicionaremos
elementos a nossa sidebar.
Obrigado até aqui e até a próxima!!
Comentários
Postar um comentário
O que achou do artigo?