File statici

Fa parte della sezione Fondamenti di Django del percorso Django di Coddy. Lezione 20 di 23.

Le pagine del caffè sono nere su sfondo bianco. Un foglio di stile cambierebbe questa situazione, e i fogli di stile, gli script e le immagini sono file statici: il server li invia così come sono, senza una vista. Django li trova come trova i template, nella cartella static/ di ogni app installata, con il nome dell'app ripetuto al suo interno:

shop/static/shop/cart.js

Vengono serviti all'indirizzo STATIC_URL, "static/" in settings.py, quindi il percorso di quel file è /static/shop/cart.js. Un template costruisce l'indirizzo con {% static %}, dopo {% load static %}:

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

Il <link rel="stylesheet" href="..."> di un foglio di stile va in <head>. Inseriscilo in base.html e lo otterranno tutte le pagine che lo estendono.

Sfida

Facile

Crea menu/static/menu/style.css con almeno body { background: #fdf8f2; }.
In base.html, carica i tag statici e collega il foglio di stile in <head>, così ogni pagina collega /static/menu/style.css.

Premi Esegui: le pagine diventano color crema. Apri /static/menu/style.css per vedere il file servito da Django.

Provalo tu

<!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>