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.
\nAlé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”.
\nPara 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.
\nÉ 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.
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.
Coloque o seguinte código na sua folha de estilo (polls/static/polls/style.css):
polls/static/polls/style.cssli a {\n color: green;\n}\nEm seguida, adicione o seguinte no topo de “polls//templates/polls/index.html”:
\npolls/templates/polls/index.html{% load static %}\n\n<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}" />\nO modelo tag {% static %} gera a URL absoluta para arquivos estáticos.
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.
\nApó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.cssbody {\n background: white url("images/background.gif") no-repeat right bottom;\n}\nRecarregue http://localhost:8000/polls/ e você deve ver o fundo carregado no lado superior direito da tela.
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.
\nQuando 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.
\n