Servindo Arquivos Estáticos

Certamente, além do HTML dinâmico servido pelo Django, vamos precisar de arquivos estáticos como CSS, JavaScript e imagens. O Django já vem preparado para servir arquivos estáticos. 

Siga os passos com atenção:

• •  Primeiro, crie a seguinte estrutura de pastas e o arquivo style.css:

blog/

└── static/

    └── css/

        └── style.css

style.css será a folha de estilos do template global.

• •  Edite blog/static/css/style.css adicionando alguns estilos para teste:

a { color: steelblue; text-decoration: none; }

a:hover { color: orangered; }

Esses estilos alteram o comportamento dos links padrão, tag <a href...>.

Conectando CSS ao Template

•  Abra blog/templates/_base.html e adicione a tag de template {% load static %} no topo, logo abaixo de <!DOCTYPE html>;

•  Adicione o link do CSS, com a tag <link rel="stylesheet" href="{% static 'css/style.css' %}">, no <head>;

•  Teremos algo como:

<!DOCTYPE html>

{% load static %} {# ← Carrega os arquivos estáticos no template #}

<html lang="pt-BR">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.2/font/bootstrap-icons.min.css">

    <link rel="stylesheet" href="{% static 'css/style.css' %}"> {# ← Carrega as folhas de estilo globais #}

    <title>Blog</title>

    <style>

        ...

    </style>

</head>

<body...

Observe o uso da template tag {% static ... %}. Ela gera o link completo para o arquivo estático.

Testando

Como alteramos a estrutura de funcionamento do site, reinicie o servidor e verifique, na página inicial, os links dos artigos.

CSS do template base

Nosso template base já tem alguns estilos CSS definidos. Vamos transferir eles para a folha de estilos global:

•  Volte a editar blog/templates/_base.html;

•  Selecione (Ctrl+A) e recorte (Ctrl+X) todo o conteúdo da tag <style>...</style>, mas, só o conteúdo, sem a tag;

•  Edite blog/static/css/style.css e cole logo após os estilos existentes;
  Se quiser, pode organizar os estilos...

•  Teremos algo como:

body { background-color: rgb(23, 91, 94); }

a { color: steelblue; text-decoration: none; }

a:hover { color: orangered; }

body>header { background-color: orange; margin-top: 4.5rem; }

body>header i { font-size: 4rem; }

body>main { margin-top: .8rem; }

body>footer { margin-top: .7rem; }

.navbar-brand { font-size: 1.5rem; }

.footer-top a { color: rgb(132, 191, 240); text-decoration: none; margin-left: .7rem; }

.footer-top a:hover { color: var(--bs-warning); }

.footer-botton a { color: var(--bs-light); }

.footer-botton a:hover { color: var(--bs-warning); }

.main-article-section { border-radius: .4rem .4rem 0 0; }

.main-aside { border-radius: 0 0 .4rem .4rem; }

@media screen and (min-width: 768px) {

    .main-aside { min-width: 250px; max-width: 250px; border-radius: 0 .4rem .4rem 0; }

    .main-article-section { border-radius: .4rem 0 0 .4rem; }

}

• •  Em blog/templates/_base.html, apague a tag <style></style>;

Reinicie o servidor do aplicativo e recarregue a página para certificar-se de que o CSS ainda funciona...

Favicon

Vamos adicionar o ícone de favoritos (favicon) ao template base.

• •  Primeiro, precisamos de uma imagem quadrada de pelo menos 128 x 128 pixels, sendo o ideal, 256 x 256 pixels como a imagem abaixo:

• • Crie a pasta blog/static/img e salve a imagem nela para ter blog/static/img/favicon.png.

  •  Adicione o link do favicon no template base blog/templates/_base.html, dentro do <head>...</head>:

<!DOCTYPE html>

{% load static %}

<html lang="pt-BR">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.2/font/bootstrap-icons.min.css">

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

    <link rel="shortcut icon" href="{% static 'img/favicon.png' %}">{# ← Link do `favicon` #}

    <title>Blog</title>

</head>

<body ...

Faça testes e verifique se o favicon foi atualizado!

Resumindo

Sempre que precisar adicionar algum arquivo estático (CSS, JavaScript, imagens...) a um template, salve o conteúdo na estrutura abaixo de blog/static e use a template tag {% static ... %} para gerar o URL completo do recurso.