Templates

Nas aulas sobre HTML você desenvolveu estruturas bem mais complexas e completas do que as que estamos utilizando até o momendo no Django. Por enquanto precisamos construir toda a string HTML dentro da função da view. Isso possui diversas desvantagens.

Apesar das desvantagens listadas acima, existe uma vantagem bastante significativa que obtemos ao construir a string HTML: podemos modificar a página de acordo com os dados mais atualizados do banco de dados. Assim, deixamos de ter apenas páginas que serão sempre iguais (estáticas) e passamos a ter páginas cujo conteúdo pode ser diferente (dinâmica) para cada usuário ou momento de acesso automaticamente.

Os templates HTML do Django unem a possibilidade de criação de páginas dinâmicas com as vantagens de utilizarmos um arquivo .html separado. Um template do Django é basicamente um arquivo HTML com algumas funcionalidades extras: ele é capaz de executar um código parecido com Python. Existem 4 elementos adicionais disponíveis nos templates Django:

• Variáveis: usadas pelo Django para substituir por um valor do contexto atual (explicaremos em breve o que é o contexto);
• Tags: adiciona lógica (ex: if, for) ao template;
• Filtros: podem modificar os valores das variáveis;
• Comentários: análogo aos comentários do Python, são trechos de código que serão ignorados pelo Django ao gerar o HTML.

O processo resumido do uso de templates é:

• Função de view chama a função de renderização de templates (função render) passando o nome do arquivo de template e um dicionário de contexto. As chaves do dicionário de contexto estarão disponíveis no template como nomes de variáveis e os seus valores serão os valores vindos do dicionário. Por exemplo, se a função render for chamada com o dicionário de contexto {"nome": "Maria", "idade": 19}, o template poderá utilizar as variáveis nome (com valor Maria) e idade (com valor 19).
• Django gera um HTML puro a partir do template e devolve para a view.
• A view retorna a resposta HTTP com o HTML gerado.

Abaixo apresentamos um exemplo de template com o mesmo conteúdo das strings que estávamos usando até o momento:

<h1>Get-it</h1>

<ul>
  {# Percorre todas as anotações #}
  {% for note in notes %}

  {# Cria um item da lista com o título da anotação atual #}
  <li>{{ note.title }}</li>

  {% empty %}

  {# Se notes estiver vazio, criamos o elemento abaixo #}
  <li>Nenhuma anotação por enquanto.</li>

  {% endfor %}
</ul>

O exemplo acima possui 3 comentários, uma tag for e uma variável {{ note.title }}, que será substituida pelo título da anotação atual.

Note que a template tag {% for %}{% endfor %} funciona de forma muito parecida com o for do Python. O seu conteúdo é executado para cada elemento na lista fornecida. Uma das principais diferenças é a necessidade do {% endfor %} ao final. Isso acontece porque no HTML as indentações não podem ser utilizadas para definir blocos como no Python. Além disso, existe uma tag intermediária {% empty %}. Tudo o que vier depois dessa tag e antes do fim da tag for é adicionado apenas se o for não percorrer nenhum elemento. Isso é útil, por exemplo, para mostrar uma mensagem para o usuário em casos de listas vazias.

Note também que as variáveis são utilizadas de forma semelhante ao que fazemos para substituir o valor de variáveis em uma string usando f-strings: f'{ note.title }'.

Esse HTML, entretanto, está incompleto. Nosso próximo passo é completá-lo com a estrutura básica de um arquivo HTML.