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):

polls/static/polls/style.css
li a {
    color: green;
}

Em seguida, adicione o seguinte no topo de “polls//templates/polls/index.html”:

polls/templates/polls/index.html
{% load staticfiles %}

<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}" />

{% load staticfiles %} carrega o {% static %} template tag da biblioteca de template staticfiles. O {% static %} template tag gera as URL absolutas do arquivo estático.

Isso é tudo que você precisa fazer para o desenvolvimento. Recarregue http://localhost:8000/polls/` e você deve ver que os links das questões estão verdes (Django style!) isso significa que seu stylesheet foi corretamente carregado.

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):

polls/static/polls/style.css
body {
    background: white url("images/background.gif") no-repeat right bottom;
}

Recarregue http://localhost:8000/polls/ e você deve ver o fundo carregado no lado superior direito da tela.

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.

Back to Top