OUJOOD.COM
Préparer le dossier static
Avant d'utiliser des fichiers statiques, il faut créer un dossier pour les accueillir. Par convention, on le nomme static et on le place au même niveau que le dossier templates du projet.C'est dans ce dossier que seront stockés tous les fichiers statiques : feuilles de style, scripts JavaScript, images, PDF, ou tout autre fichier servi directement au navigateur sans traitement côté serveur.
Pour que Django sache où chercher ce dossier, vérifiez que
STATICFILES_DIRS est bien configuré dans settings.py :
STATICFILES_DIRS = [BASE_DIR / 'static']Sans cette ligne, Django ne trouvera pas les fichiers placés dans votre dossier static local.
Ajouter et utiliser un fichier CSS
Créez un fichiermon_style.css dans le dossier static et ajoutez-y quelques règles CSS :
Fichier mon_style.css 📋 Copier le code
body {
background-color: lightblue;
font-family: verdana;
}
Modifier le template
Pour utiliser ce fichier CSS dans un template, deux étapes sont nécessaires. D'abord charger le système de fichiers statiques en tout début de fichier :{% load static %}
Puis déclarer la feuille de style dans le <head> avec la balise {% static %}, qui génère automatiquement le bon chemin :
<link rel="stylesheet" href="{% static 'mon_style.css' %}">
Après modification, redémarrez le serveur pour que les changements soient pris en compte. Voici le template complet :
Fichier template.html 📋 Copier le code
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>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>Consultez la page menu_principal.html pour voir son contenu HTML.</p>
<p>Dans le fichier mon_style.css, vous pouvez voir à quoi ressemble la feuille de style.</p>
<hr>
{% include 'pied_de_page.html' %}
</body>
</html>
Ajouter et utiliser un fichier JavaScript
La procédure est identique à celle du CSS : on charge{% load static %}, puis on déclare le fichier avec {% static %}.Créez un fichier
mon_javascripts.js dans le dossier static :
Fichier mon_javascripts.js 📋 Copier le code
function maFonction() {
alert("Bonjour à partir d'un fichier javascript!");
}
Modifier le template
Incluez le script dans le<head> du template, puis ajoutez un bouton qui déclenche la fonction :
<script src="{% static 'mon_javascripts.js' %}"></script>
<button onclick="maFonction()">Clique-moi !</button>Voici le template complet avec CSS et JavaScript :
Fichier template.html 📋 Copier le code
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>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>
<p>Consultez la page menu_principal.html pour voir son contenu HTML.</p>
<button onclick="maFonction()">Clique-moi !</button>
<hr>
{% include 'pied_de_page.html' %}
</body>
</html>
Ajouter et utiliser une image
Pour afficher une image stockée dans le dossier static, la démarche est la même. Placez votre fichier image (.jpg, .png, .gif, etc.) dans le dossier static, puis référencez-la dans le template avec {% static %} :
<img src="{% static 'bananes.jpg' %}" alt="image de bananes">
Toujours après {% load static %} en début de fichier. Exemple complet :
Fichier template.html 📋 Copier le code
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>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>
Par carabde | Mis à jour le 01 juin 2026