Templates são modelos de páginas-html renderizadas com models e views e retornados pelo Django aos navegadores solicitantes.
Nos templates do Django, você pode renderizar variáveis colocando-as entre colchetes duplos {{ }}.
template.html<h1>Olá {{ primeiro_nome }}, como você está?</h1>
A variável primeiro_nome no exemplo acima é enviado para o template por meio de uma view.
views.py:from django.http import HttpResponse
from django.template import loader
def testando(request):
template = loader.get_template('template.html')
context = {
'primeiro_nome': 'Linus',
}
return HttpResponse(template.render(context, request))
Como você pode ver na visualização acima, criamos um objeto chamado context e o preenchemos com dados, e o enviamos como o primeiro parâmetro no método template.render().
Você também pode criar variáveis diretamente no template, usando a {% with %}tag template:
template.html:{% with primeiro_nome="Tobias" %}
<h1>Olá {{ primeiro_nome }}, como você está?</h1>
Você aprenderá mais sobre tags de modelo no próximo capítulo.
O exemplo acima mostrou uma abordagem fácil de como criar e usar variáveis em um modelo.
Normalmente, a maioria dos dados externos que você deseja usar em um modelo vem de um modelo.
Criamos um modelo nos capítulos anteriores, chamado Livros, usaremos este modelo nos próximos capítulos deste tutorial.
Para obter dados do modelo Livros, teremos que importá-lo no arquivo de visualizações e extrair dados dele na visualização:
views.py:from django.http import HttpResponse, HttpResponseRedirect
from django.template import loader
from .models import Livros
def testing(request):
meus_livros = Livros.objects.all().values()
template = loader.get_template('template.html')
context = {
'meus_livros': meus_livros,
}
return HttpResponse(template.render(context, request))
Agora podemos usar os dados no modelo.
Usamos a tag template do Django {% for %} para percorrer os membros.
template.html:<ul>
{% for x in meus_livros %}
<li>{{ x.primeiro_nome }}</li>
{% endfor %}
</ul>
Nos templates do Django, você pode executar lógica de programação como executar instruções if e laços for.
Essas palavras-chave if e for, são chamadas de "tags de modelo" no Django.
Para executar as tags de modelo, as colocamos {% %} entre colchetes.
template.html:{% if cumprimento == 1 %}
<h1>Olá</h1>
{% else %}
<h1>Até logo</h1>
{% endif %}
As tags de template são uma maneira de dizer ao Django que aqui vem algo mais do que HTML simples.
As tags de template nos permitem fazer alguma programação no servidor antes de enviar o HTML para o cliente.
template.html:<ul>
{% for x in meus_livros %}
<li>{{ x.primeiro_nome }}</li>
{% endfor %}
</ul>
Nos próximos capítulos você aprenderá sobre as tags de template mais comuns.
Uma lista de todas as tags de template:
Tag | Descrição |
---|---|
autoescape | Especifica se o modo Autoescape estiver ligado ou desligado |
block | Especifica uma seção de bloco |
comment | Especifica uma seção de comentários |
csrf_token | protege as formas das falsificações de solicitação de local transversal |
cicle | Especifica o conteúdo a ser usado em cada ciclo de um loop |
debug | Especifica informações de depuração |
extends o | especifica um modelo pai |
filter | filtra o conteúdo antes de devolvê -lo |
firstof de | retorna a primeira variável não vazia |
for | especifica um loop para |
if | especifica uma declaração if |
ifchanged | usado para loops. Produz um bloco apenas se um valor tiver mudado desde a última iteração |
incluir | especifica o conteúdo/modelo incluído |
load | carrega tags de modelo de outra biblioteca |
lorem | produz texto aleatório |
now | produz a data/hora atual |
regroup | classifica um objeto por um grupo |
resetcycle | usado em ciclos. Redefina o ciclo |
spaceless | remove o espaço em branco entre as tags HTML |
templatetag | produz uma etiqueta de modelo especificada |
url | Retorna a parte absoluta de URL de um URL |
verbatim | Especifica o conteúdo que não deve ser renderizado pelo mecanismo de modelo |
widthratio | calcula um valor de largura com base na ração entre um determinado valor e um valor máximo |
with | especifica uma variável a ser usada no bloco |
Uma instrução if avalia uma variável e executa um bloco de código se o valor for verdadeiro.
{% if cumprimento == 1 %}
<h1>Olá</h1>
{% endif %}
A palavra-chave elif como que diz "se a condição anterior não for verdadeira, então tente esta outra condição".
{% if cumprimento == 1 %}
<h1>Olá</h1>
{% elif cumprimento == 2 %}
<h1>Bem vindo</h1>
{% endif %}
A palavra-chave else captura qualquer coisa que não seja capturada pelas condições anteriores.
{% if cumprimento == 1 %}
<h1>Olá</h1>
{% elif cumprimento == 2 %}
<h1>Bem vindo</h1>
{% else %}
<h1>Até Logo</h1>
{% endif %}
Os exemplos acima usam o operador "==", que é usado para verificar se uma variável é igual a um valor, mas existem muitos outros operadores que você pode usar, ou você pode até mesmo descartar o operador se quiser apenas verificar se uma variável não está vazia.
{% if cumprimento %}
<h1>Olá</h1>
{% endif %}
{% if cumprimento == 2 %}
<h1>Olá</h1>
{% endif %}
{% if cumprimento != 1 %}
<h1>Olá</h1>
{% endif %}
{% if cumprimento < 3 %}
<h1>Olá</h1>
{% endif %}
{% if cumprimento <= 3 %}
<h1>Olá</h1>
{% endif %}
{% if cumprimento > 1 %}
<h1>Olá</h1>
{% endif %}
{% if cumprimento >= 1 %}
<h1>Olá</h1>
{% endif %}
O operador and verificar se duas condições são verdadeiras.
{% if cumprimento == 1 and day == "Quinta-feira" %}
<h1>Olá Weekend!</h1>
{% endif %}
O operador
{% if cumprimento == 1 or cumprimento == 5 %}
<h1>Olá</h1>
{% endif %}
{% if cumprimento == 1 and day == "quinta-feira" or cumprimento == 5 %}
Parênteses não são permitidos em declarações if no Django, então quando você combina os operadores and e or, é importante saber que os parênteses são adicionados para and mas não para or.
Significando que o exemplo acima é lido pelo interpretador assim:
{% if (cumprimento == 1 and day == "Quinta-feira") or cumprimento == 5 %}
Para verificar se um determinado item está presente em um objeto.
{% if 'Banana' in frutas %}
<h1>Olá</h1>
{% else %}
<h1>Até Logo</h1>
{% endif %}
Para verificar se um determinado item não está presente em um objeto.
{% if 'Banana' not in frutas %}
<h1>Olá</h1>
{% else %}
<h1>Até Logo</h1>
{% endif %}
Verifique se dois objetos são iguais.
Este operador é diferente do operador "==", porque o operador "==" verifica os valores de dois objetos, mas o operador is verifica a identidade de dois objetos.
Na view temos dois objetos, x e y, com os mesmos valores:
views.py:
from django.http import HttpResponse
from django.template import loader
def testing(request):
template = loader.get_template('template.html')
context = {
'x': ['Maçã', 'Banana', 'Cereja'],
'y': ['Maçã', 'Banana', 'Cereja'],
}
return HttpResponse(template.render(context, request))
Os dois objetos têm o mesmo valor, mas é o mesmo objeto?
{% if x is y %}
<h1>YES</h1>
{% else %}
<h1>NO</h1>
{% endif %}
Vamos tentar o mesmo exemplo com o operador "==":
{% if x == y %}
<h1>YES</h1>
{% else %}
<h1>NO</h1>
{% endif %}
Como dois objetos podem ser iguais? Bem, se você tiver dois objetos que apontam para o mesmo objeto, o isoperador avalia como verdadeiro:
Vamos demonstrar isso usando a tag {% with %}, que nos permite criar variáveis no template.
{% with var1 = var2 = x %}
{% if var1 == var2 %}
<h1>SIM</h1>
{% else %}
<h1>NÃO</h1>
{% endif %}
{% endwith %}
Para verificar se dois objetos não são iguais.
{% if x is not y %}
<h1>YES</h1>
{% else %}
<h1>NO</h1>
{% endif %}
Um laço (loop) for é usado para iterar uma sequência, como fazer um laço em itens em uma matriz, uma lista ou um dicionário.
Percorra os itens de uma lista:
{% for x in frutas%}
<h1>{{ x }}</h1>
{% endfor %}
Percorra uma lista de dicionários:
{% for x in carros %}
<h1>{{ x.marca }}</h1>
<p>{{ x.modelo }}</p>
<p>{{ x.ano }}</p>
{% endfor %}
Os dados em um modelo são como uma tabela com linhas e colunas.
O model Livros que criamos anteriormente tem cinco linhas e cada linha tem três colunas:
Num | TÍTULO | AUTOR |
---|---|---|
1 | O Dia de Amanhã | Jorge Dias |
2 | O Sol Amarelo | Maria Amélia |
3 | A Viagem | Joana Martins |
4 | Carros em Fuga | José Silva |
5 | O Baralho do Mágico | Ana Torres |
Quando buscamos os dados do model, ele vem como um objeto QuerySet, com formato semelhante ao exemplo de nomes acima: uma lista com dicionários.
<QuerySet [
{
'id': 1,
'titulo_livro': 'O Dia de Amanhã',
'autor_livro': 'Jorge Dias'
},
{
'id': 2,
'titulo_livro': 'O Sol Amarelo',
'autor_livro': 'Maria Amélia'
},
{
'id': 3,
'titulo_livro': 'A Viagem',
'autor_livro': 'Joana Martins'
},
{
'id': 4,
'titulo_livro': 'Carros em Fuga',
'autor_livro': 'José Silva'
},
{
'id': 5,
'titulo_livro': 'O Baralho do Mágico',
'autor_livro': 'Ana Torres'
}
]>
Faça um laço pelos itens buscados em um banco de dados:
{% for x in livros %}
<h1>{{ x.id }}</h1>
<p>
{{ x.titulo_livro }}
{{ x.autor_livro }}
</p>
{% endfor %}
A palavra-chave reversed é usada quando você deseja fazer o loop na ordem inversa.
{% for x in livros reversed %}
<h1>{{ x.id }}</h1>
<p>
{{ x.titulo_livro }}
{{ x.autor_livro }}
</p>
{% endfor %}
A palavra-chave empty pode ser usada se você quiser fazer algo especial se o objeto estiver vazio.
{% for x in emptytestobject %}
<li>{{ x.titulo_livro }}</li>
{% empty %}
<li>No livros</li>
{% endfor %}
A palavra-chave empty também pode ser usada se o objeto não existir:
{% for x in myobject %}
<li>{{ x.titulo_livro }}</li>
{% empty %}
<li>Sem livros</li>
{% endfor %}
O Django tem algumas variáveis que estão disponíveis para você dentro de um loop:
A iteração atual, começando em 1.
<ul>
{% for x in frutas %}
<li>{{ forloop.counter }}</li>
{% endfor %}
</ul>
A iteração atual, começando em 0.
<ul>
{% for x in frutas %}
<li>{{ forloop.counter0 }}</li>
{% endfor %}
</ul>
Permite testar se o laço está em sua primeira iteração.
Desenhe um fundo azul para a primeira iteração do loop:
<ul>
{% for x in frutas %}
<li
{% if forloop.first %}
style='background-color:lightblue;'
{% endif %}
>{{ x }}</li>
{% endfor %}
</ul>
Permite testar se o loop está em sua última iteração.
Desenhe um fundo azul para a última iteração do loop.
<ul>
{% for x in frutas %}
<li
{% if forloop.last %}
style='background-color: lightblue;'
{% endif %}
>{{ x }}</li>
{% endfor %}
</ul>
A iteração atual se você começar no final e contar para trás, terminando em 1.
<ul>
{% for x in frutas %}
<li>{{ forloop.revcounter }}</li>
{% endfor %}
</ul>
A iteração atual se você começar no final e contar para trás, terminando em 0.
<ul>
{% for x in frutas %}
<li>{{ forloop.revcounter0 }}</li>
{% endfor %}
</ul>
Comentários permite que você tenha seções de código que devem ser ignoradas.
<h1>Sejam todos bem-vindos</h1>
{% comment %}
<h1>Bem-vindos senhoras e senhores</h1>
{% endcomment %}
Você pode adicionar uma mensagem ao seu comentário para ajudá-lo a lembrar por que escreveu o comentário ou como mensagem para outras pessoas que estão lendo o código.
Adicione uma descrição ao seu comentário:
<h1>Sejam todos bem-vindos</h1>
{% comment "esta era a mensagem original" %}
<h1>Bem-vindos senhoras e senhores</h1>
{% endcomment %}
Você também pode usar as tags {## ... #} ao comentar o código, o que pode ser mais fácil para comentários menores.
Comente a palavra "todos".
<h1>Bem vindos{## todos#}</h1>
As views são escritas em Python e os comentários em Python são escritos com o caractere #.
Comente uma seção na exibição.
from django.http import HttpResponse
from django.template import loader
def testing(request):
template = loader.get_template('template.html')
#context = {
## 'var1': 'John',
#}
return HttpResponse(template.render())
A tag cycle permite que você execute tarefas diferentes para diferentes iterações.
A tag cycle recebe argumentos, a primeira iteração usa o primeiro argumento, a segunda iteração usa o segundo argumento etc.
{% cycle 'lightblue' 'pink' 'yellow' 'coral' 'grey' %}
Se você quiser ter uma nova cor de fundo para cada iteração, você pode fazer isso com a cycletag:
<ul>
{% for x in livros %}
<li style='background-color:{% cycle 'lightblue' 'pink' 'yellow' 'coral' 'grey' %}'>
{{ x.titulo_livro }}
</li>
{% endfor %}
</ul>
Se o ciclo chegar ao fim dos argumentos, ele recomeçará:
<ul>
{% for x in livros %}
<li style='background-color:{% cycle 'lightblue' 'pink' %}'>
{{ x.titulo_livro }}
</li>
{% endfor %}
</ul>
No primeiro exemplo, os valores dos argumentos foram exibidos diretamente no ciclo, mas você também pode manter os valores dos argumentos em uma variável e usá-la posteriormente:
Armazene os valores de cor em uma variável chamada bgcolor e use-a como cor de fundo posteriormente no loop:
<ul>
{% for x in livros %}
{% cycle 'lightblue' 'pink' 'yellow' 'coral' 'grey' as bgcolor silent %}
<li style='background-color:{{ bgcolor }}'>
{{ x.titulo_livro }}
</li>
{% endfor %}
</ul>
Você notou a palavra-chave silent? Certifique-se de adicionar isso, ou então os valores dos argumentos serão exibidos duas vezes na saída.
Mesmo exemplo acima, mas sem a palavra-chave silent:
<ul>
{% for x in livros %}
{% cycle 'lightblue' 'pink' 'yellow' 'coral' 'grey' as bgcolor %}
<li style='background-color:{{ bgcolor }}'>
{{ x.titulo_livro }}
</li>
{% endfor %}
</ul>
Você pode forçar o ciclo a reiniciar usando a tag resetcycle:
Reinicie o ciclo após 3 ciclos:
<ul>
{% for x in livros %}
{% cycle 'lightblue' 'pink' 'yellow' 'coral' 'grey' as bgcolor silent %}
{% if forloop.counter == 3 %}
{% resetcycle %}
{% endif %}
<li style='background-color:{{ bgcolor }}'>
{{ x.titulo_livro }}
</li>
{% endfor %}
</ul>
A tag extends permite adicionar um modelo pai para o modelo atual.
Isso significa que você pode ter uma página mestra que atua como pai para todas as outras páginas:
minha_pagina_mestra.html:
<html>
<body>
<h1>Bem-vindo</h1>
{% block minha_mensagem %}
{% endblock %}
</body>
</html>
template.html:
{% extends 'minha_pagina_mestra.html' %}
{% block minha_mensagem %}
<p>Esta página tem uma página mestra</p>
{% endblock %}
Você coloca placeholders no template master, dizendo ao Django onde colocar qual conteúdo.
O Django usa a tag block, para criar placeholders:
master.html:<html>
<body>
{% block myheading %}
{% endblock %}
{% block minha_mensagem %}
{% endblock %}
</body>
</html>
Os templates que utilizam o template master, utilizam a {% block %}tag para criar o conteúdo que será exibido no placeholder com o mesmo nome:
template.html:{% extends 'minha_pagina_mestra.html' %}
{% block myheading %}
<h1>Livros</h1>
{% endblock %}
{% block minha_mensagem %}
<ul>
{% for x in livros %}
<li>{{ x.titulo_livro }}</li>
{% endfor %}
</ul>
{% endblock %}
A tag include permite incluir um modelo dentro do modelo atual.
Isso é útil quando você tem um bloco de conteúdo que é o mesmo para muitas páginas.
footer.html:<p>Você chegou ao final desta página, obrigado pelo seu tempo.</p>
<b>template.html:</b>
$code django
<h1>Olá</h1>
<p>Esta página contém um rodapé em um template.</p>
{% include 'footer.html' %}
Você pode enviar variáveis para o modelo usando a palavra-chave with.
No arquivo de inclusão, você faz referência às variáveis usando a sintaxe do nome da {{ variável : }}
meu_menu.html:<div>HOME | {{ me }} | ABOUT | FORUM | {{ sponsor }}</div>
template.html:
<!DOCTYPE html>
<html>
<body>
{% include meu_menu.html with me="TOBIAS" sponsor="W3SCHOOLS" %}
<h1>Bem vindo</h1>
<p>Esta é a minha página</p>
</body>
</html>
Com o caractere pipe | seguido por um nome de filtro, você pode executar um valor por meio de um filtro antes de retorná-lo.
O nome do filtro define o que o filtro fará com o valor.
Retorne a variável firstnamecom letras maiúsculas:
<h1>Olá {{ titulo_livro|upper }}, como você está?</h1>
Você pode adicionar mais de um filtro adicionando caracteres | de barra vertical seguidos de nomes de filtro:
Retorna o primeiro caractere da variável titulo_livro, em letras minúsculas:
<h1>Olá {{ titulo_livro|first|lower }}, como você está?</h1>
A tag filter permite que você execute uma seção inteira de código por meio de um filtro e a retorne de acordo com as palavras-chave do filtro.
Retorne a variável titulo_livro com letras maiúsculas:
{% filter upper %}
<h1>Olá everyone, como você está?</h1>
{% endfilter %}
Para adicionar vários filtros, separe as palavras-chave com a barra vertical |:
Filtros separados com o caractere pipe:
{% filter upper|linenumbers %} Olá!
meu nome é
Roberto.
Qual o seu nome?{% endfilter %}
Uma lista de todas as palavras-chave de filtro:
palavra-chave | Descrição |
---|---|
add | adiciona um valor especificado. |
addslashes | adiciona uma barra antes de qualquer caractere de cotação, para escapar de strings. |
capfirst | Retorna a primeira letra em maiúsculas. |
center | centra o valor no meio de uma largura especificada. |
cut | remove qualquer caractere ou frases especificadas. |
date | Retorna as datas no formato especificado. |
default | Retorna um valor especificado se o valor for falso. |
default_if_none | Retorna um valor especificado se o valor não for. |
dictsort | classifica um dicionário pelo valor fornecido. |
dictsortreversed | classifica um dicionário revertido, pelo valor fornecido. |
divisibleby | Retorna true se o valor puder ser dividido pelo número especificado, caso contrário, retorna falsa. |
escape | escapa do código HTML de uma string. |
escapejs | escapa do código JavaScript de uma string. |
filesizeformat | Retorna um número em um formato de tamanho de arquivo. |
first | Retorna o primeiro item de um objeto (para strings, o primeiro caractere é retornado). |
floatformat | rodadas números flutuantes para um número especificado de decimais, padrão um decimal. |
force_escape | escapa do código HTML de uma string. |
get_digit | Retorna um dígito específico de um número. |
iriencode | Converta um IRI em uma corda amigável de URL. |
join | Retorna os itens de uma lista em uma string. |
json_script |
Retorna um objeto em um objeto JSON cercado por tags |
last | último retorna o último item de um objeto (para strings, o último caractere é retornado). |
length | Retorna o número de itens em um objeto ou o número de caracteres em uma string. |
length_is | retorna true se o comprimento for o mesmo que o número especificado |
linebreaks | Retorna o texto com <br> em vez de quebras de linha e com <p> em vez de mais de uma quebra de linha. |
linebreaksbr | Retorna o texto com com <br> em vez de quebras de linha. |
linenumbers | Retorna o texto com números de linha para cada linha. |
ljust | deixado alinhe o valor de acordo com uma largura especificada |
lower | retorna o texto em letras minúsculas. |
make_list | converte um valor em um objeto de lista. |
Phone2Numeric | converte números de telefone com letras em números de telefone numéricos. |
pluralize | adiciona um 's' no final de um valor se o valor numérico especificado não for 1. |
pprint | |
random | retorna um item aleatório de um objeto |
rjust | A direita alinha o valor de acordo com uma largura especificada |
safe | marca que este texto é seguro e não deve ser escapado html. |
safeseq | marca cada item de um objeto como seguro e o item não deve ser escapado em HTML. |
slice | Retorna uma fatia especificada de um texto ou objeto. |
slugify | converte o texto em uma palavra longa de casal alfanumérica. |
stringformat | converte o valor em um formato especificado. |
striptags | remove tags html de um texto. |
time | Retorna um horário no formato especificado. |
timesince | Retorna a diferença entre duas datas. |
timeuntil | Retorna a diferença entre duas datas. |
title | Casos superiores O primeiro caractere de cada palavra em um texto, todos os outros caracteres são convertidos em minúsculas. |
truncathars | reduz uma string para o número especificado de caracteres. |
truncatchars_html | reduz uma string para o número especificado de caracteres, não considerando o comprimento de nenhuma tag HTML. |
truncatewords | reduz uma string para o número especificado de palavras. |
truncatewords_html | reduz uma string para o número especificado de palavras, não considerando nenhuma tag HTML. |
unordered_list | Retorna os itens de um objeto como uma lista HTML não ordenada. |
upper | Retorna o texto nas letras mais altas. |
urlencode | URL codifica uma string. |
urlize | Retorna qualquer URLs em uma string como links html. |
urlizetrunc | Retorna qualquer URLs em uma string como links HTML, mas reduz os links para o número especificado de caracteres. |
wordcount | Retorna o número de palavras em um texto. |
wordwrap | envolva palavras em um número especificado de caracteres. |
yesno | converte valores booleanos em valores especificados. |
i18n | |
l10n | |
tz |