Fichiers statiques

Fait partie de la section Les bases de Django du Journey Django de Coddy. Leçon 20 sur 23.

Les pages du café sont noires sur blanc. Une feuille de style changerait cela, et les feuilles de style, les scripts et les images sont des fichiers statiques : le serveur les envoie tels quels, sans passer par une vue. Django les trouve comme il trouve les modèles, dans le dossier static/ de chaque application installée, avec le nom de l’application répété à l’intérieur :

shop/static/shop/cart.js

Django les sert à des adresses qui commencent par STATIC_URL, qui vaut "static/" dans settings.py ; ce fichier se trouve donc à l’adresse /static/shop/cart.js. Un modèle construit l’adresse avec {% static %}, après {% load static %} :

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

La balise <link rel="stylesheet" href="..."> d’une feuille de style se place dans le <head>. Ajoute-la à base.html et toutes les pages qui en héritent l’auront.

Défi

Facile

Ajoute une feuille de style au site.

Crée menu/static/menu/style.css avec au moins body { background: #fdf8f2; }.
Dans base.html, charge les balises static et lie la feuille de style dans <head>, afin que chaque page lie /static/menu/style.css.

Appuie sur Exécuter : les pages prennent une teinte crème.

Essayez vous-même

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