Ajouter une feuille de style et une image

Introduction

Ce tutoriel commence là où **Create Some Automated Tests** s'est arrêté. Nous avons construit une application de sondage web testée, et nous allons maintenant ajouter une feuille de style et une image.

Personnaliser l'aspect de votre application

Tout d'abord, créez un répertoire appelé static dans votre répertoire polls. Django cherchera les fichiers statiques là, de la même manière que Django trouve les templates dans polls/templates/.

La configuration STATICFILES_FINDERS de Django contient une liste de chercheurs qui savent découvrir les fichiers statiques à partir de diverses sources. L'un des paramètres par défaut est AppDirectoriesFinder qui recherche un sous-répertoire "static" dans chacun des INSTALLED_APPS, comme celui dans polls que nous venons de créer. Le site d'administration utilise la même structure de répertoire pour ses fichiers statiques.

Dans le répertoire static que vous venez de créer, créez un autre répertoire appelé polls et à l'intérieur de celui-ci, créez un fichier appelé style.css. En d'autres termes, votre feuille de style devrait se trouver à polls/static/polls/style.css. En raison de la façon dont le chercheur de fichiers statiques AppDirectoriesFinder fonctionne, vous pouvez vous référer à ce fichier statique dans Django sous le nom polls/style.css, de la même manière que vous référencez le chemin des templates.

Espaçage des noms de fichiers statiques

Comme pour les templates, nous pourrions peut-être nous passer de placer nos fichiers statiques directement dans polls/static (au lieu de créer un autre sous-répertoire polls), mais ce serait en fait une mauvaise idée. Django choisira le premier fichier statique qu'il trouvera dont le nom correspond, et si vous aviez un fichier statique avec le même nom dans une autre application, Django ne serait pas capable de les distinguer. Nous devons être en mesure de pointer Django sur le bon fichier, et le meilleur moyen de s'assurer de cela est de les espacer. C'est-à-dire, en plaçant ces fichiers statiques à l'intérieur d'un autre répertoire nommé pour l'application elle-même.

Placez le code suivant dans cette feuille de style (polls/static/polls/style.css):

li a {
  color: green;
}

Ensuite, ajoutez le code suivant en haut de polls/templates/polls/index.html:

{% load static %}

<link rel="stylesheet" href="{% static 'polls/style.css' %}">

La balise de modèle {% static %} génère l'URL absolue des fichiers statiques.

Voilà tout ce que vous avez besoin de faire pour le développement.

Démarrez le serveur (ou le redémarrez s'il est déjà en cours d'exécution):

python manage.py runserver 0.0.0.0:8080

Rechargez l'onglet Web 8080 et vous devriez voir que les liens de 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 tout fichier image que vous souhaitez utiliser comme arrière-plan. Dans le cadre de ce tutoriel, nous utilisons un fichier nommé background.png, que vous pouvez trouver dans le répertoire /tmp/background.png de la machine virtuelle.

Vous devez copier /tmp/background.png dans polls/static/polls/images/background.png.

Ensuite, ajoutez une référence à votre image dans votre feuille de style (polls/static/polls/style.css):

body {
  background: white url("images/background.png") no-repeat;
}

Rechargez l'onglet Web 8080 et vous devriez voir l'arrière-plan chargé en haut à gauche de l'écran.

La balise de modèle {% static %} n'est pas disponible pour être utilisée dans les fichiers statiques qui ne sont pas générés par Django, comme votre feuille de style. Vous devriez toujours utiliser des chemins relatifs pour lier vos fichiers statiques les uns aux autres, car ainsi vous pouvez changer STATIC_URL (utilisé par la balise de modèle static pour générer ses URL) sans avoir à modifier une multitude de chemins dans vos fichiers statiques également.

Voici les bases. Pour plus de détails sur les paramètres et autres éléments inclus dans le cadre, consultez le guide pratique sur les fichiers statiques </howto/static-files/index> et la référence sur les fichiers statiques </ref/contrib/staticfiles>. Le déploiement des fichiers statiques </howto/static-files/deployment> traite de la manière d'utiliser les fichiers statiques sur un serveur réel.

Lorsque vous serez à l'aise avec les fichiers statiques, lisez Personnalisation du site d'administration de Django pour apprendre à personnaliser le site d'administration automatiquement généré par Django.

Sommaire

Félicitations ! Vous avez terminé le laboratoire Ajouter une feuille de style et une image. Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.