Escrevendo sua primeira aplicação Django, parte 6¶
Este tutorial começa onde o Tutorial 5 parou. Nós construímos uma aplicação web de enquete testada, e agora nós vamos adicionar uma folha de estilos e uma imagem.
Além do HTML gerado pelo servidor, aplicações web normalmente precisam servir outros arquivos – como imagens, JavaScript, ou CSS – necessário para renderizar a página web completa. No Django, nós chamamos estes arquivos de “arquivos estáticos”.
Para projetos pequenos, isto não é um grande problema, porque você pode simplesmente manter os arquivos estáticos em algum lugar que o seu servidor web consegue encontrar. Entretanto, em grandes projetos – especialmente aqueles comprometidos com múltiplas apps – lidar com múltiplos conjuntos de arquivos estáticos provindos de cada aplicação começa a se tornar complicado.
É para isto que o django.contrib.staticfiles serve: ele coleciona os arquivos estáticos de cada uma de suas aplicações (e qualquer outro lugar que você especifique) em um único local que pode ser facilmente servido em produção.
Personalize a aparência do seu app¶
Primeiro, crie um diretório chamado static no seu diretório polls. O Django vai procurar os arquivos estáticos ali, de maneira similar a como o Django encontra os templates dentro de polls/templates/.
A configuração STATICFILES_FINDERS do Django contém uma lista de buscadores que sabem como descobrir os arquivos estáticos de diversas fontes. Um dos padrões é o AppDirectoriesFinder que procura por um subdiretório “static” em cada uma das INSTALLED_APPS, como a polls que nós acabamos de criar. O site admin usa a mesma estrutura de diretórios para os arquivos estáticos.
Com o diretório static que você acabou de criar, crie outro diretório chamado polls e com ele crie um arquivo chamado style.css. Em outras palavras, o seu stylesheet deve ficar em polls/static/polls/style.css. Por conta da forma que o buscador de arquivos estáticos AppDirectoriesFinder funciona, você pode referênciar este arquivo estático no Django simplesmente como polls/style.css, similarmente como você referência o caminho para templates.
Arquivo estático namespace
Assim como templates, nós podemos nos safar somente colocando os arquivos estáticos diretamente em polls/static (ao invés de criar outro subdiretório polls), mas na verdade isso seria uma má idéia. O Django vai escolher o primeiro o arquivo estático que encontrar com aquele nome, e se você tem um arquivo estático com aquele mesmo nome em uma aplicação diferente, o Django não conseguiria distinguir entre elas. Nós precisamos poder apontar o Django para o arquivo correto, e a forma mais fácil de garantir isso é por usar um namespacing com eles. Isto é, colocando aqueles arquivos estáticos dentro de outro diretório com o mesmo nome da aplicação.
Coloque o seguinte código na sua folha de estilo (polls/static/polls/style.css):
li a {
color: green;
}
Em seguida, adicione o seguinte no topo de “polls//templates/polls/index.html”:
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}">
O modelo tag {% static %} gera a URL absoluta para arquivos estáticos.
Isso é tudo que você precisa fazer para o desenvolvimento.
Inicie o servidor (ou reinicie se estiver em execução):
$ python manage.py runserver
...\> py manage.py runserver
Reload http://localhost:8000/polls/ and you should see that the question
links are green (Django style!) which means that your stylesheet was properly
loaded.
Adicionar uma imagem de fundo¶
Após, nós vamos criar o subdiretório para imagens. Crie um subdiretório images no diretório polls/static/polls. Dentro deste diretório, coloque uma imagem chamada background.gif. Em outras palavras, coloque sua imagem em polls/static/polls/images//background.gif.
Então, adicione em seu stylesheet (polls/static/polls/style.css):
body {
background: white url("images/background.gif") no-repeat;
}
Reload http://localhost:8000/polls/ and you should see the background
loaded in the top left of the screen.
Aviso
Claro que o {% static %} template tag não está disponível para uso em arquivos estáticos como o seu stylesheet que não são gerados pelo Django. Você deve sempre usar caminhos relativos para conectar seus arquivos estáticos entre cada um, porque assim, você pode mudar STATIC_URL (usado pelo static template tag para gerar as URLs) sem ter que modificar um monte de caminhos em seus arquivos estáticos também.
Estes são os básicos. Para mais detalhes nas configurações e outras coisas incluídas no framework veja o howto arquivos estáticos. Fazendo deploy de arquivos estáticos discute como usar arquivos estáticos em um servidor real.
Quando você estiver confortável com os arquivos estáticos, leia parte 7 deste tutorial para aprender como customizar o site do admin auto-gerado do Django.
