Adicionar uma Folha de Estilo e uma Imagem

Introdução

Este tutorial começa onde o tutorial **Criar Alguns Testes Automatizados** parou. Construímos uma aplicação web de enquetes testada, e agora vamos adicionar uma folha de estilo e uma imagem.

Personalize a aparência do seu app

Primeiramente, crie um diretório chamado static no seu diretório polls. O Django procurará arquivos estáticos lá, de forma semelhante a como o Django encontra templates dentro de polls/templates/.

A configuração STATICFILES_FINDERS do Django contém uma lista de finders que sabem como descobrir arquivos estáticos de várias fontes. Um dos padrões é AppDirectoriesFinder, que procura um subdiretório "static" em cada um dos INSTALLED_APPS, como o que acabamos de criar em polls. O site de administração usa a mesma estrutura de diretórios para seus arquivos estáticos.

Dentro do diretório static que você acabou de criar, crie outro diretório chamado polls e, dentro dele, crie um arquivo chamado style.css. Em outras palavras, sua folha de estilo deve estar em polls/static/polls/style.css. Devido à forma como o finder de arquivos estáticos AppDirectoriesFinder funciona, você pode se referir a este arquivo estático no Django como polls/style.css, de forma semelhante a como você referencia o caminho para templates.

Namespacing de arquivos estáticos

Assim como os templates, poderíamos nos safar colocando nossos arquivos estáticos diretamente em polls/static (em vez de criar outro subdiretório polls), mas na verdade seria uma má ideia. O Django escolherá o primeiro arquivo estático que encontrar cujo nome corresponda, e se você tivesse um arquivo estático com o mesmo nome em uma aplicação diferente, o Django seria incapaz de distinguir entre eles. Precisamos ser capazes de apontar o Django para o correto, e a melhor maneira de garantir isso é namespacing eles. Ou seja, colocando esses arquivos estáticos dentro de outro diretório nomeado para a própria aplicação.

Coloque o seguinte código nessa 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" href="{% static 'polls/style.css' %}">

A tag de template {% static %} gera a URL absoluta de arquivos estáticos.

Isso é tudo o que você precisa fazer para desenvolvimento.

Inicie o servidor (ou reinicie-o se já estiver em execução):

python manage.py runserver 0.0.0.0:8080

Recarregue a aba Web 8080 e você deverá ver que os links das perguntas estão verdes (estilo Django!), o que significa que sua folha de estilo foi carregada corretamente.

Adicionando uma imagem de fundo

Em seguida, criaremos um subdiretório para imagens. Crie um subdiretório images no diretório polls/static/polls/. Dentro deste diretório, adicione qualquer arquivo de imagem que você gostaria de usar como fundo. Para os propósitos deste tutorial, estamos usando um arquivo chamado background.png, que você pode encontrar no diretório /tmp/background.png na VM.

Você precisa copiar o /tmp/background.png para polls/static/polls/images/background.png.

Em seguida, adicione uma referência à sua imagem em sua folha de estilo (polls/static/polls/style.css):

body {
  background: white url("images/background.png") no-repeat;
}

Recarregue a aba Web 8080 e você deverá ver o fundo carregado no canto superior esquerdo da tela.

A tag de template {% static %} não está disponível para uso em arquivos estáticos que não são gerados pelo Django, como sua folha de estilo. Você sempre deve usar caminhos relativos para vincular seus arquivos estáticos entre si, porque então você pode alterar STATIC_URL (usado pela tag de template static para gerar suas 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 sobre configurações e outros bits incluídos com o framework, consulte o howto de arquivos estáticos </howto/static-files/index> e a referência de arquivos estáticos </ref/contrib/staticfiles>. Implantando arquivos estáticos </howto/static-files/deployment> discute como usar arquivos estáticos em um servidor real.

Quando você estiver confortável com os arquivos estáticos, leia Personalizando o Site de Administração do Django para aprender como personalizar o site de administração gerado automaticamente pelo Django.

Resumo

Parabéns! Você concluiu o laboratório Adicionar uma Folha de Estilo e uma Imagem. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.