Gerenciando arquivos estáticos no Django

Uma aplicação web frequentemente depende de arquivos estáticos, como imagens, arquivos CSS e JavaScript. Neste tema, como configurar e organizar arquivos estáticos em projetos Django.

Configuração Padrão

Ao criar um novo projeto Django, ele já vem configurado para lidar com arquivos estáticos. O arquivo settings.py inclui a variável STATIC_URL, que define o caminho base para esses arquivos. Por padrão, seu valor é:

STATIC_URL = 'static/'

Além disso, a aplicação django.contrib.staticfiles está incluída na lista INSTALLED_APPS, o que habilita a coleta e o gerenciamento de arquivos estáticos:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'hello', # Aplicação criada
]

Organização do projeto Django com arquivos estáticos

Com essa configuração inicial, o Django está pronto para gerenciar arquivos estáticos dentro do projeto.

Com o valor padrão de STATIC_URL, os arquivos estáticos podem ser armazenados em um diretório chamado static dentro de cada aplicação. Para manter uma estrutura organizada, é recomendável separar os arquivos por tipo em subdiretórios. Por exemplo:

static/images: para imagens.
static/css: para arquivos CSS.
static/js: para arquivos JavaScript.

Dentro do diretório static/images, um arquivo de imagem como forest.jpg pode ser adicionado. No diretório static/css, pode ser criado um arquivo styles.css com definições de estilo simples:

body {
  font-family: Verdana;
}
h1 {
  color: navy;
}
img {
  width: 350px;
}

Com essa estrutura, os arquivos estáticos estão organizados e prontos para ser utilizados em templates.

Uso de Arquivos Estáticos em Templates

PROGRAMICIO
hello/
|-- migrations/
|-- static/
|   |-- css/
|   |   |-- styles.css
|   |-- images/
|       |-- forest.jpg
|-- templates/
|-- __init__.py
|-- admin.py
|-- apps.py
|-- models.py
|-- tests.py
|-- views.py
programicio/
|-- __init__.py
|-- asgi.py
|-- settings.py
|-- urls.py
|-- wsgi.py

Para utilizar arquivos estáticos em templates, é necessário carregar o módulo static no início do arquivo HTML com o comando {% load static %}. Esse comando deve ser inserido logo após a declaração do DOCTYPE.

Os arquivos estáticos são referenciados utilizando a tag {% static %}, que gera o caminho correto para o arquivo. Um exemplo de template que aplica estilos e exibe uma imagem seria:

<!DOCTYPE html>
{% load static %}
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="{% static 'css/styles.css' %}" />
    <title>Exemplo Django</title>
  </head>
  <body>
    <h1>Floresta no Inverno</h1>
    <img src="{% static 'images/forest.jpg' %}" alt="Floresta no inverno" />
  </body>
</html>

Usando arquivos estáticos em templates

Ao executar a aplicação, o template será renderizado em uma página web que aplica os estilos e exibe a imagem.

Navegador exibindo arquivo estático enviado pelo servidor Django

Configuração de Diretórios Personalizados para Arquivos Estáticos

Se os arquivos estáticos precisarem ser armazenados fora do diretório padrão static ou se for necessário definir múltiplos diretórios, a variável STATICFILES_DIRS em settings.py pode ser configurada. Essa variável aceita uma lista de caminhos adicionais para os arquivos estáticos:

STATICFILES_DIRS = [
    BASE_DIR / "static",
    "/var/www/static/",
    "/diretorio_adicional/"
]

Essa configuração permite adicionar múltiplos locais de armazenamento para arquivos estáticos, oferecendo flexibilidade em diferentes cenários.

Documentação oficial:

How to manage static files (e.g. images, JavaScript, CSS) - Django