A utilização de arquivos estáticos no Django necessita de algumas configurações para ser feita, como veremos neste artigo :)
Curso Django - Fundamentos
Conhecer o cursoConfigurando aplicação
Com a aplicação aberta no PyCharm, precisamos configurar o diretório em que os arquivos estáticos (JS, CSS e IMG) serão armazenados. Para isso, vamos até o final do arquivo settings.py do nosso projeto até encontrar a configuração STATIC_URL, é ela quem define o diretório que os arquivos estáticos serão armazenados.
Por padrão, o Django armazena os arquivos estáticos em um diretório chamado static, localizado na aplicação. Sendo assim, é lá que vamos armazenar os arquivos CSS, JS e IMG da aplicação.
Para isso, o primeiro passo é criar um diretório chamado static na aplicação e, dentro do diretório static, criar uma outra pasta com o nome da aplicação. Por exemplo, se a aplicação possuir o nome “minha_aplicacao”, precisamos criar um diretório static/minha_aplicacao dentro da app que estamos desenvolvendo:
Note que na imagem acima, estamos criando um diretório com o mesmo nome da aplicação “app” dentro do diretório “static” e, dentro do diretório “app”, criamos as pastas para armazenar os arquivos css, js e img.
Com isso, só precisamos armazenar os arquivos estáticos do projeto em seu respectivo diretório. Como exemplo, vamos criar um arquivo css simples e armazená-lo no diretório static/app/css com o nome style.css e com o seguinte conteúdo:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 30px;
}
Curso Django - Templates
Conhecer o cursoUtilizando arquivos nos templates
Agora que já configuramos a localização dos arquivos estáticos e criamos o css de exemplo, precisamos importá-lo em nossos templates. Para isso, o processo é bem simples:
1 - Carregamos a tag static do Django em nosso template (linha 2);
2 - Carregamos o arquivo css utilizando a tag (linha 7). Note que precisamos determinar o caminho, a partir do diretório static, do arquivo css que criamos anteriormente.
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Página de testes</title>
<link rel="stylesheet" href="{% static 'app/css/style.css' %}">
</head>
<body>
<h1>Olá, mundo</h1>
</body>
</html>
Testando aplicação
Agora, ao executar a aplicação e renderizar o template com o css importado, teremos o seguinte resultado:
