Criando uma primeira aplicação com Django e mysql
Personalizando a aparência de uma app Django
https://docs.djangoproject.com/pt-br/1.11/intro/tutorial06/
Para baixar o código como está até agora, acesse o meu github no link abaixo:
https://github.com/toticavalcanti/django_course/tree/app_appearance
Personalizando a aparência de uma app Django
Agora vamos adicionar uma folha de estilos e uma imagem.
Além do HTML gerado pelo servidor, aplicações web normalmente precisam de outros arquivos – como imagens, JavaScript, ou CSS – necessários para montar (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 consiga encontrar.
Entretanto, em projetos grandes – 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.
Vamos criar o diretório chamado static na pasta polls.
O Django vai procurar os arquivos estáticos nele, 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 app polls que criamos. O site admin usa a mesma estrutura de diretórios para os arquivos estáticos.
Dentro do diretório static que acabou de ser criado, crie outro diretório chamado polls e dentro dele crie um arquivo chamado style.css.
polls/static/polls/style.css
A forma que o buscador de arquivos estáticos AppDirectoriesFinder funciona, possibilita referenciar este arquivo estático no Django simplesmente como polls/style.css, da mesma forma como se referência o caminho para templates.
OBS.
Arquivo estático namespace
Assim como em templates, nós podemos colocar os arquivos estáticos diretamente em polls/static (ao invés de criar outro subdiretório polls).
O Django escolhe o primeiro arquivo static que encontrar com esse nome, se você tem um arquivo static com esse mesmo nome em uma aplicação diferente, o Django não conseguirá distinguir entre eles.
Precisamos apontar o Django para o arquivo correto, a forma mais fácil para isso é usar namespacing. Ou seja, colocar aqueles arquivos static 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 do arquivo polls/templates/polls/index.html:
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}" />
O modelo tag de template {% static %} gera a URL absoluta para os arquivos estáticos.
Isso é tudo que você precisa fazer para o desenvolvimento.
Recarregue http://localhost:8000/polls/ você deverá ver os links das questões em verde (Django style!) isso significa que seu stylesheet foi corretamente carregado.
Agora vamos criar um subdiretório para imagens.
Crie um subdiretório images no diretório polls/static/polls, dentro dele, coloque uma imagem chamada background.gif. polls/static/polls/images/background.gif
Adicione no stylesheet polls/static/polls/style.css o seguinte:
body {
background: white url("images/background.gif") no-repeat right bottom;
}
Recarregue http://localhost:8000/polls/ e você deverá ver a imagem de fundo carregada no lado superior direito da tela.
AVISO
Claro que a tag template {% static %} 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 eles, porque assim, você pode mudar STATIC_URL (usado pela tag template static tag para gerar as URLs) sem ter que modificar um monte de caminhos em seus arquivos estáticos também.
