Fichiers Statiques Django

PythonTechLe Framework Django1 Comment

1 - A propos des fichiers statiques django

Les application Web doivent généralement servir des fichiers supplémentaires tels que des images, code javaScript ou CSS... Dans Django, nous appelons ces fichiers des 'fichiers statiques' (static files en anglais). Django fournit django.contrib.staticfiles pour vous aider à gérer les fichiers statics.

Nous allons décrire comment pouvons nous mettre en place ces fichiers statiques:
Commençons par créer un répertoire nommé 'static' à la racine de notre projet mysite:

Créons ensuite 3 autres sous répertoires:

  1. css/ pour les feuilles de style css
  2. js/ pour les fichiers de script js ( javascript)
  3. img/ pour les fichiers images

Voici l'arboressence finale:

2 - Configuration des fichiers statiques au niveau du fichier settings.py

- Assurez-vous que django.contrib.staticfiles est inclus dans la liste  INSTALLED_APPS du fichier settings.py:

- Dans votre fichier settings.py, définissez STATIC_URL:

settings.py 
STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static/'),
]

3 - Configuration des fichiers statiques au niveau du template

Dans votre fichier index.html du template, ajoutez entre les balises <head> et </head> le code:

{% load static %}

Maintenant afin que le contenu css et javascript  soit accessible par le template, il faut ajouter entre les balises <head> et </head> les codes suivants:

<link rel="stylesheet" type ="text/css" href="{%  static 'css/votre_feuille_de_styles.css'  %}" />
<script src="{% static '/js/votre_fichier_javascript.js' %}" type="text/javascript"></script>

On peut maintenant se demander, comment accéder à un fichier du contenu statique, à titre d'exemple comment afficher une image contenu dans le dossier 'static/img/' ?
Dans ce cas, la balise IMG html doit être améliorée afin qu'elle puisse afficher une image:

<img src="{% static  '/img/votre_image.extension'  %}" >

 

 

 

 

 

Post Views: 6 786
Acheter sur Très Facile !

1 thought on “Fichiers Statiques Django”

  1. Ping : Cours Python | Cours Python Très Facile

Leave a Reply