Neste artigo veremos como criar templates no Django, atrela-los nas views e vamos adicionar um arquivo CSS.
Fala galera, tudo certo? Para quem não sabe esse post é parte de uma sequência em que vamos criar um projeto completo mostrando todos os recursos do Django, e neste falaremos sobre templates.
Posts anteriores e repositório:
Confira os posts anteriores a este:
Para quem quer clonar o projeto ou dar um fork clique aqui!
Iniciando com templates:
Bom, neste post é onde vamos aprender a utilizar o recurso de templates do Django, não retornaremos mais apenas uma string como resposta, e sim um template com HTML e por fim adicionaremos arquivos estáticos para dar estilo, o famoso CSS.
De início precisamos criar a estrutura de pastas que abrigará os templates, crie as seguintes pastas dentro do app blog:
templates/blog/
Esta é uma estrutura do Django e recomendada na documentação, o framework vai identificar a pasta templates e entrará nela para procurar as views.
Também devemos criar dois arquivos HTML, que darão início ao processo de front-end, dentro da pasta templates/blog, crie o arquivo base.html, nele vamos ter toda a estrutura base como chamadas de estáticos, meta tags, e etc.
Uma boa prática para não termos de repetir toda vez que criarmos um HTML, ou seja, vamos poder criar várias páginas aproveitando o mesmo esqueleto, segue o código que deve conter nele:
{% load static %}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>
<body>
<div class="row">
{% block content %}
{% endblock %}
</div>
</body>
</html>
Vamos explicar alguns novos conceitos sobre os templates:
- {% código %}: Sempre que houver código entre {% e %} estaremos utilizando as templates tags do Django, a convenção que ele utiliza para o modificar código do HTML;
- {{ código }}: código entre duas chaves serve para ‘emular’ código de Python, por exemplo pegar propriedades de um objeto para imprimir na tela;
- {% block X }{% endblock %}: Estamos abrindo um espaço para inserir código, provavelmente virá de outro template, repare que adicionamos o recurso em duas partes, uma servirá para o título da página ser dinâmico, e o outro o content servirá para os conteúdos de cada página, assim estes dois espaços serão dinâmicos;
- {% load static %}: Com a ajuda de static poderemos carregar arquivos estáticos como CSS e JS no projeto;
- {% static ‘css/styles.css’ %}: Aqui estamos carregando o arquivo de CSS principal de nossa aplicação com a ajuda do static, que criará um path para a pasta de arquivos estáticos e carregará o styles.css;
Note também que inserimos um HTML básico, algumas meta tags, enfim uma estrutura básica de HTML que não cobriremos aqui.
Agora vamos criar um arquivo que será o template da lista de posts, e preencherá o block title e content, crie o arquivo post_list.html na mesma pasta do base, insira o seguinte código:
{% extends 'blog/base.html' %}
{% block title %}Listagem de Posts{% endblock %}{% block content %}
<h1>Esta é a listagem de posts</h1>
<p>Aqui teremos alguns posts para mostrar.</p>
{% endblock %}Novos termos:
- extends: Com esta instrução é que conseguimos reaproveitar o HTML base;
- block title e content: Com estas instruções tudo que está entre as tags do Django, vão substituir as marcações de bloco no template base;
Praticamente mágica, não?
Dando continuidade, vá no arquivo views.py do app blog e ajuste a função post_list para:
from django.shortcuts import render
from django.http import HttpResponse
def post_list(request):
return render(request, 'blog/post_list.html')
# não mexa no restante, só até a função post_list
Importamos a função render, que fará exatamente o que o nome diz, renderizar um template HTML.
Além disso o nosso retorno mudou, inserimos o request, que é obrigatório como primeiro parâmetro, sempre passar a requisição, e por fim entregamos o template que desejamos atrelar a view.
Vamos testar o que fizemos até agora, na pasta do projeto ligue o servidor:
python3 manage.py runserver
A tela que você verá deve ser a seguinte:
Até aqui já vimos como criar um template base para o nosso projeto, estender a uma view e criar uma view para uma url.
O próximo passo é fazer com que o CSS que importamos no base funcione, assim teremos a possibilidade de adicionar assets ao projeto.
Para a nossa sorte e por o Django ser muito bem feito, essa parte é fácil, note a última linha do arquivo settings.py, ela tem a constante:
STATIC_URL = '/static/'
Ou seja, os arquivos estáticos devem estar dentro de uma pasta chamada static no nosso app, nosso próximo passo é criar esta pasta, já aproveite e crie a css também, dentro de static, ficaremos com o seguinte diretório:
myproject/blog/static/css
Esta pasta css vem lá do arquivo base, além disso precisamos ter um arquivo chamado styles.css dentro dela, crie-o com o seguinte código para testes:
.row h1 {
color: red;
}Agora se você está com o servidor aberto feche-o, sempre que adicionamos arquivos novos devemos reabrir o server, para o Django contabilizar estas novas adições e execute o comando para abri-lo novamente e entre na URL fornecida pelo menos, devemos ver a seguinte página:
Nosso CSS está funcionando!
Da mesma forma que a lista de posts, vamos criar os templates/blog para a página Sobre Nós e Contato, na pasta templates crie o arquivo about-us.html com o seguinte código:
{% extends 'blog/base.html' %}
{% block title %}Título do post{% endblock %}{% block content %}
<h1>Sobre nós</h1>
<p>Esta é a história do blog...</p>
{% endblock %}Na mesma página crie o contact.html:
{% extends 'blog/base.html' %}
{% block title %}Título do post{% endblock %}{% block content %}
<h1>Quer entrar em contato conosco?</h1>
{% endblock %}E é claro, nosso arquivo views.py do app blog deve redirecionar para as novas views e ficar assim:
from django.shortcuts import render
from django.http import HttpResponse
def post_list(request):
return render(request, 'blog/post_list.html')
def about(request):
return render(request, 'blog/about_us.html')
def contact(request):
return render(request, 'blog/contact.html')
Agora você pode fazer o teste das novas URLs e criar mais algumas para treinar caso queira, lembrando que deve reiniciar o servidor.
Conclusão:
Com este artigo conseguimos atrelar views a template, ou seja, agora podemos criar um site estático em Django, e logo mais aprenderemos como deixá-lo dinâmico com os models.
Também vimos como adicionar arquivos estáticos, que são de suma importância no dia de hoje, seja para adicionar CSS as páginas ou funcionalidades de JavaScript.
No próximo artigo pretendo inserir Bootstrap no projeto, assim poderemos utilizar uma biblioteca moderna e muito usada nos dias de hoje para adiantar grande parte do nosso trabalho.
Espero que tenham gostado, batam aquela palminha e deem aquele follow que me ajuda muito, motiva a gente ver a notificação que alguém seguiu ou curtiu. 🙂
Confira também o nosso canal do Youtube com muito conteúdo sobre programação, clicando aqui.
Caso tenham alguma dúvida, escrevem na área de comentários abaixo.
Obrigado e até o próximo!
Cara muito obrigado, to gostando muito de suas postagem
Obrigado Joselio, fico feliz por ter gostado!
Verifiquei que foi gerado o diretorio e arquivos: templates/blog/list.html e quando foi criado a função que está redenrizando a pagina chama o template post_list.html
def post_list(request):
return render(request, ‘blog/post_list.html’)
Obs: Desculpa se falei alguma besteira kkk
Oi Cezar, ta certo sim, na verdade temos que criar o arquivo post_list.html, já arrumei, obrigado!
Boa tarde, estou com problemas para identificar o template, alguma dica ou solução?
opa João, pode colocar o erro aqui? abraço
eu ja resolvi o erro, era divergencia no nome do arquivo, obrigado
Um artigo muito top, arrasou, continue postando esses conteúdos, são de muita ajuda para nós iniciantes.
Se possível, faça um post ensinando como fazer uma página de upload e download de arquivos utilizando Django. Grata!