OUJOOD.COM
Pourquoi un dossier static séparé ?
Django distingue deux types de fichiers : les fichiers Python qui contiennent la logique de l'application, et les fichiers statiques — CSS, JavaScript, images, polices — qui sont servis directement au navigateur sans traitement. Cette séparation permet à Django de les gérer indépendamment, notamment en production où ils sont souvent servis par un CDN ou un serveur web dédié (Nginx, Apache).
En développement, créez un dossier static/ dans votre application (au même niveau que templates/). C'est là que vous placez tous les fichiers servis tels quels au navigateur.
Ajouter une feuille de style CSS
Créez le fichier membres/static/mon_style.css et ajoutez quelques règles de base :
body {
background-color: lightblue;
font-family: verdana;
}
Référencer le CSS dans un template
Pour utiliser un fichier statique dans un template Django, deux étapes sont nécessaires : charger le moteur de fichiers statiques avec {% load static %}, puis construire l'URL du fichier avec {% static 'nom_du_fichier' %}.
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Mon template</title>
<link rel="stylesheet" href="{% static 'mon_style.css' %}">
</head>
<body>
<h1>Bonjour</h1>
{% include "menu_principal.html" with menu="Tutoriels" sponsor="oujood.com" %}
<p>Voici mon site web.</p>
<p>Le fichier mon_style.css applique un fond bleu clair et la police Verdana.</p>
<hr>
{% include 'pied_de_page.html' %}
</body>
</html>
{% load static %} doit toujours être placé en première ligne du template, avant toute autre balise. {% static 'mon_style.css' %} génère l'URL complète vers le fichier — Django s'occupe du chemin réel selon la configuration.
Remarque : après toute modification d'un fichier statique ou d'un template, redémarrez le serveur de développement (Ctrl+C puis python manage.py runserver) pour que les changements soient pris en compte.
Ajouter un fichier JavaScript
Le principe est identique au CSS. Créez membres/static/mon_javascripts.js :
function maFonction() {
alert("Bonjour depuis un fichier JavaScript !");
}
Dans le template, déclarez le script avec {% static %} et ajoutez un bouton qui appelle la fonction :
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Mon template</title>
<link rel="stylesheet" href="{% static 'mon_style.css' %}">
<script src="{% static 'mon_javascripts.js' %}"></script>
</head>
<body>
<h1>Bonjour</h1>
{% include "menu_principal.html" with menu="Tutoriels" sponsor="oujood.com" %}
<p>Voici mon site web.</p>
<button onclick="maFonction()">Clique-moi !</button>
<hr>
{% include 'pied_de_page.html' %}
</body>
</html>
Ajouter une image
Les images suivent exactement la même logique. Placez votre fichier image (PNG, JPG, GIF...) dans membres/static/, puis référencez-le dans le template :
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Mon template</title>
<link rel="stylesheet" href="{% static 'mon_style.css' %}">
</head>
<body>
<h1>Bonjour</h1>
{% include "menu_principal.html" with menu="Tutoriels" sponsor="oujood.com" %}
<p>Voici des bananes :</p>
<img src="{% static 'bananes.jpg' %}" alt="image de bananes">
<hr>
{% include 'pied_de_page.html' %}
</body>
</html>
La balise {% static 'bananes.jpg' %} génère l'URL correcte quelle que soit la configuration du projet. C'est la bonne pratique — ne jamais écrire l'URL en dur dans le template.
Par carabde | Mis à jour le 05 mai 2025