marcos.santos@imed.edu.

br
Escola de Ciência da Computação e Sistemas de Informação

Gerenciamento de arquivos estáticos

(ex.: imagens, JavaScript, CSS)
Sites geralmente precisam servir arquivos adicionais como imagens, JavaScript ou CSS. No
Django, nós nos referimos a estes arquivos como «arquivos estáticos». O Django fornece
django.contrib.staticfiles para ajudar você a gerenciar eles.

1. Certifique-se de que django.contrib.staticfiles está

incluído no seu INSTALLED_APPS.
2. Em seu arquivo de configurações, settings,
defina STATIC_URL, por exemplo:

STATIC_URL = '/static/'

Obs.: deve ser criada uma pasta chamada

STATIC dentro do seu APP e criada, uma
subpasta, com o nome do APP, onde será
alocado todos os arquivos estáticos do seu
projeto.

3. Nos seus templates, use uma url hardcoded como

/static/my_app/example.jpg ou, preferencialmente,
use a tag de template static para construir a URL
para um dado caminho relativo usando a definição
de armazenamento em STATICFILES_STORAGE (isso torna muito mais fácil
quando você quiser trocar para uma rede de entrega de conteúdo (CDN) para
servir os arquivos).
{% load static %}
<img src="{% static "my_app/example.jpg" %}" alt="My image"/>
Ou
<link href="static/front/css/style.css" rel="stylesheet">

1
 marcos.santos@imed.edu.br
Escola de Ciência da Computação e Sistemas de Informação

Orientação a Arquivo no HTML

É possível separar partes comuns nos templates, como cabeçalho, menus, rodapés, etc.… para
que a manutenção do software se torne algo mais simples.

1. Passo 1: Separe o trecho de código HTML que deseja repetir em outros

templates, e salve ele como .html.
2. Passo 2: Utilize o comando include em seus templates.
{% include "front/componentes/header.html" %}

Enviando Valores para o Template

Para enviar dados para uma Template utilizamos o arquivo views que serve de controlador
para a comunicação com o HTML.

Ex.:
def index(request):

x = "Teste"

contexto = {'x': x}

return render(request, 'front/capa.html',contexto)

Perceba que a variável contexto, é do tipo abre e fecha chaves. Uma espécie de lista, onde um
índice é informado e após os dois pontos, é passado o valor.

Recebendo valores e criando HTML

dinâmico
Para pegar o valor de determinado índice enviado ao template basta utilizar o seguinte
comando, indicando qual o nome do índice:

{{x}}
Para apresentar uma lista de valores, oriundos de uma lista, por exemplo, podemos usar o
comando FOR, conforme o exemplo a seguir:

{% for i in x %}
{{i}}
<br>
{% endfor %}