Arquivos Estáticos

Parte da seção Fundamentos do Django do Journey de Django da Coddy. Lição 20 de 23.

As páginas do café são pretas sobre fundo branco. Uma folha de estilos mudaria isso, e folhas de estilos, scripts e imagens são arquivos estáticos: o servidor os envia como estão, sem uma view. O Django os encontra da mesma forma que encontra os templates, na pasta static/ de cada app instalado, com o nome do app dentro dela novamente:

shop/static/shop/cart.js

O Django os serve em endereços que começam com STATIC_URL, que é "static/" em settings.py, então esse arquivo fica em /static/shop/cart.js. Um template monta o endereço com {% static %}, depois de {% load static %}:

{% load static %}
<script src="{% static 'shop/cart.js' %}"></script>

Um <link rel="stylesheet" href="..."> de uma folha de estilos fica dentro de <head>. Coloque-o em base.html e todas as páginas que o estendem o terão.

Desafio

Fácil

Adicione uma folha de estilos ao site.

Crie menu/static/menu/style.css com pelo menos body { background: #fdf8f2; }.
Em base.html, carregue as tags estáticas e vincule a folha de estilos no <head>, para que todas as páginas vinculem /static/menu/style.css.

Pressione Run: as páginas ficam com um tom creme.

Experimente você mesmo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>{% block title %}Corner Café{% endblock %}</title>
</head>
<body>
    <nav>
        <a href="{% url 'menu:home' %}">Home</a>
        <a href="{% url 'menu:drinks' %}">Drinks</a>
        <a href="{% url 'menu:about' %}">About</a>
    </nav>
    <main>
        {% block content %}{% endblock %}
    </main>
</body>
</html>