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 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 novamente dentro dela:

shop/static/shop/cart.js

Esses arquivos são servidos em STATIC_URL, "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>

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

Desafio

Fácil

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 em <head>, para que todas as páginas vinculem /static/menu/style.css.

Pressione Executar: as páginas ficam em tom creme. Abra /static/menu/style.css para ver o arquivo servido pelo Django.

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>