--- title: "Écriture de votre première application Django, 6ème partie" version: 5.1 locale: fr source: https://docs.djangoproject.com/fr/5.1/intro/tutorial06/ canonical: https://djangodocs.dev/fr/5.1/intro/tutorial06/ --- # Écriture de votre première application Django, 6ème partie Ce tutoriel commence là où le [tutoriel 5](/fr/5.1/intro/tutorial05/) 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 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. > **Où obtenir de l’aide :** > > Si vous rencontrez des problèmes dans le parcours de ce tutoriel, rendez-vous dans la section [Obtenir de l’aide](/fr/5.1/faq/help/) de la FAQ. ## 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`](/fr/5.1/ref/settings/#std-setting-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`](/fr/5.1/ref/settings/#std-setting-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 meilleur moyen 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`) : *`polls/static/polls/style.css`* ```css li a { color: green; } ``` Ensuite, ajoutez le contenu ci-dessous au début de `polls/templates/polls/index.html` : *`polls/templates/polls/index.html`* ```html+django {% load static %} ``` 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. Démarrez le serveur (ou redémarrez-le s’il tourne déjà) : ```console $ python manage.py runserver ``` *Windows* ```doscon ...\> py manage.py runserver ``` 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 ce répertoire, ajoutez le fichier image que vous souhaitez utiliser comme arrière-plan. Dans le cadre de ce tutoriel, nous utiliserons un fichier nommé `background.png`, dont le chemin complet sera `polls/static/polls/images/background.png`. Puis, ajoutez une référence à votre image dans la feuille de style (`polls/static/polls/style.css`) : *`polls/static/polls/style.css`* ```css body { background: white url("images/background.png") 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. > **Warning** > > La balise de gabarit `{% static %}` n’est pas disponible dans les fichiers statiques qui ne sont pas générés par Django, comme une feuille de style. Vous devriez toujours utiliser des **chemins relatifs** pour lier vos fichiers statiques entre eux, car vous pouvez ensuite modifier [`STATIC_URL`](/fr/5.1/ref/settings/#std-setting-STATIC_URL) (utilisé par la balise de gabarit [`static`](/fr/5.1/ref/templates/builtins/#std-templatetag-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](/fr/5.1/howto/static-files/) et la [référence des fichiers statiques](/fr/5.1/ref/contrib/staticfiles/). La section [déploiement des fichiers statiques](/fr/5.1/howto/static-files/deployment/) 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](/fr/5.1/intro/tutorial07/) pour apprendre comment personnaliser l’interface d’administration automatique de Django.