Écriture de votre première application Django, 6ème partie¶
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.
En 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 ».
Pour de petits projets, ce n’est pas un grand problème car il est possible de simplement 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.
C’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.
Personnalisation de l’apparence de votre application¶
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.
Espaces de noms des fichiers statiques
Tout comme pour les gabarits, nous pourrions plus simplement placer nos fichiers statiques directement dans polls/static (au lieu de créer un sous-répertoire polls), mais ce serait une mauvaise idée. Django choisit le premier fichier statique trouvé correspondant au nom recherché, et si vous aviez un fichier de même nom dans une autre application, Django ne pourrait pas les distinguer. Nous devons pouvoir indiquer à Django le bon fichier et le moyen le plus simple de s’en assurer est d’utiliser les espaces de noms. C’est-à-dire en plaçant ces fichiers statiques dans un autre sous-répertoire nommé d’après l’application.
Écrivez le code suivant dans cette feuille de style (polls/static/polls/style.css) :
li a {
color: green;
}
Ensuite, ajoutez le contenu ci-dessous au début de polls/templates/polls/index.html :
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}" />
La 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. Rechargez 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.
Ajout d’une image d’arrière-plan¶
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) :
body {
background: white url("images/background.gif") no-repeat;
}
Rechargez http://localhost:8000/polls/ et vous devriez voir l’arrière-plan chargé dans le coin supérieur gauche de l’écran.
Avertissement
Bien sûr, la balise de gabarit {% static %} n’est pas disponible dans les fichiers statiques comme votre feuille de style, puisqu’ils ne sont pas générés par Django. Vous devriez toujours utiliser des chemins relatifs pour lier vos fichiers statiques entre eux, car vous pouvez ensuite modifier STATIC_URL (utilisé par la balise de gabarit static pour générer les URL) sans devoir modifier tous les chemins dans les fichiers statiques.
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.
Lorsque 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.
