Ce tutoriel commence là où le tutoriel 5 s’est achevé. Nous avons construit une application Web de sondage et nous allons maintenant ajouter une feuille de style et une image.
\nEn plus du code HTML généré par le serveur, les applications Web doivent généralement servir des fichiers supplémentaires tels que des images, du JavaScript ou du CSS, utiles pour produire une page Web complète. Dans Django, on appelle ces fichiers des « fichiers statiques ».
\nPour de petits projets, ce n’est pas un grand problème car il est possible de placer les fichiers statiques à un endroit où le serveur Web peut les trouver. Cependant, dans des plus gros projets, surtout pour ceux qui contiennent plusieurs applications, la gestion de plusieurs groupes de fichiers statiques fournis par chaque application commence à devenir plus complexe.
\nC’est le travail de django.contrib.staticfiles : il collecte les fichiers statiques de chaque application (et de tout autre endroit que vous lui indiquez) pour les mettre dans un seul emplacement qui peut être facilement configuré pour servir les fichiers en production.
Commencez par créer un répertoire nommé static dans votre répertoire polls. C’est là que Django va chercher les fichiers statiques, sur le même principe que la recherche de gabarits dans polls/templates/.
Le réglage STATICFILES_FINDERS de Django contient une liste de classes qui savent où aller chercher les fichiers statiques de différentes sources. Une de ces classes par défaut est AppDirectoriesFinder qui recherche un sous-répertoire « static » dans chaque application de INSTALLED_APPS, comme l’application polls de notre tutoriel. Le site d’administration utilise la même structure de répertoires pour ses propres fichiers statiques.
À l’intérieur du répertoire static que vous venez de créer, créez un autre répertoire nommé polls dans lequel vous placez un fichier style.css. Autrement dit, votre feuille de style devrait se trouver à polls/static/polls/style.css. En raison du fonctionnement de AppDirectoriesFinder, vous pouvez vous référez à ce fichier depuis Django avec la syntaxe polls/style.css, sur le même principe utilisé pour se référer aux chemins de gabarits.
Écrivez le code suivant dans cette feuille de style (polls/static/polls/style.css) :
polls/static/polls/style.cssli a {\n color: green;\n}\nEnsuite, ajoutez le contenu ci-dessous au début de polls/templates/polls/index.html :
polls/templates/polls/index.html{% load static %}\n\n<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}">\nLa balise de gabarit {% static %} génère l’URL absolue des fichiers statiques.
C’est tout ce que vous avez à faire pour le développement.
\nDémarrez le serveur (ou redémarrez-le s’il tourne déjà) :
\nLinux / macOS
$ python manage.py runserver\nWindows
...\\> py manage.py runserver\nRechargez http://localhost:8000/polls/ et vous devriez voir que les liens des questions sont verts (style Django !) ce qui signifie que votre feuille de style a été correctement chargée.
Ensuite, nous allons créer un sous-répertoire pour les images. Créez un sous-répertoire images dans le répertoire polls/static/polls/. Dans le répertoire créé, placez une image nommée background.gif. Autrement dit, le chemin de votre image sera polls/static/polls/images/background.gif.
Puis, ajoutez ceci à votre feuille de style (polls/static/polls/style.css) :
polls/static/polls/style.cssbody {\n background: white url("images/background.gif") no-repeat;\n}\nRechargez http://localhost:8000/polls/ et vous devriez voir l’arrière-plan chargé dans le coin supérieur gauche de l’écran.
Ce sont les bases. Pour plus de détails sur les réglages et les autres fonctionnalités inclues dans le module, lisez le manuel des fichiers statiques et la référence des fichiers statiques. La section déploiement des fichiers statiques aborde l’utilisation des fichiers statiques sur un vrai serveur.
\nLorsque vous serez à l’aise avec les fichiers statiques, lisez la partie 7 de ce tutoriel pour apprendre comment personnaliser l’interface d’administration automatique de Django.
\n