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 en noir 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 vue. Django les trouve comme il trouve les modèles, dans le dossier static/ de chaque application installée, avec à nouveau le nom de l’application à l’intérieur :

shop/static/shop/cart.js

Ils sont accessibles à l’adresse STATIC_URL, définie sur "static/" dans settings.py, donc ce fichier est accessible à 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 <head>. Ajoutez-la à base.html et toutes les pages qui en héritent l’auront.

Défi

Facile

Créez menu/static/menu/style.css avec au minimum body { background: #fdf8f2; }.
Dans base.html, chargez les balises static et ajoutez le lien vers la feuille de style dans <head>, afin que chaque page pointe vers /static/menu/style.css.

Cliquez sur Run : les pages prennent une teinte crème. Ouvrez /static/menu/style.css pour voir le fichier servi par Django.

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>