Écriture de votre première application Django, 6ème partieLien vers cette rubrique
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 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 applicationLien vers cette rubrique
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 {
color: green;
}
Ensuite, ajoutez le contenu ci-dessous au début de polls/templates/polls/index.html :
polls/templates/polls/index.html{% load static %}
<link rel="stylesheet" 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.
Démarrez le serveur (ou redémarrez-le s’il tourne déjà) :
Linux / macOS
$ python manage.py runserver
Windows
...\> 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-planLien vers cette rubrique
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.cssbody {
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.
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.