Django: utilisation des fichiers statiques (CSS, images) en développement

Published: 11 mars 2015

DMCA.com Protection Status

Dans cet article on va présenter un exemple complet pour comprendre comment avec django utiliser les fichiers statiques (CSS, images, etc) sur le serveur de développement. Pour cela considérons le cas suivant, on dispose d'un template trouvé par exemple sur freewebtemplates et on veut utiliser ce template pour notre site développé avec Django (dans ce exemple on a utilisé: ecologicalwebsitetemplate).

1: Créer le site

django-admin.py startproject MonSuperSite
cd MonSuperSite/

2: Créer une simple application

python manage.py startapp MonApp

3: Ajouter les deux répertoires static et templates sous MonApp.

  cd MonApp/
  mkdir static
  mkdir templates

4: Dans le répertoire static, créer le répertoire MonApp

 cd static/
 mkdir MonApp

puis placer dans celui-ci les répertoires css, images et fonts du free template téléchargé sur internet. Au final votre répertoire doit avoir la structure suivante:

 MonSuperSite/MonApp/static/MonApp/css
                                 /images
                                 /fonts

5: Dans le répertoire templates maintenant, créer le répertoire MonApp

 mkdir MonApp

puis placer le fichier principal généralement intitulé: index.html dans le répertoire courant. Au final votre répertoire doit avoir la structure suivante:

 MonSuperSite/MonApp/templates/MonApp/index.thml

6: Ouvrir le fichier index.thml et remplacer la ligne

<link rel="stylesheet" type="text/css" href="css/style.css" />

par

<link rel="stylesheet" href="{{ STATIC_URL }}MonApp/css/style.css" type="text/css">

Pour toutes les images utilisées dans le fichier index.html, remplacer de même par exemple:

<img src="images/little-girl-hugging-the-globe.jpg" alt="Image" />

par

<img src="{{ STATIC_URL }}MonApp/images/little-girl-hugging-the-globe.jpg" alt="Image" />

7: Ouvrir le fichier views.py situé dans le répertoire MonSuperSite/MonApp/ et ajouter les lignes suivantes:

# Create your views here.

from django.shortcuts import render_to_response
from django.template import RequestContext

def index(request):
    return render_to_response("MonApp/index.html", context_instance=RequestContext(request))

8: Ouvrir le fichier urls.py situé dans le répertoire MonSuperSite/MonSuperSite et ajouter les lignes suivantes:

from django.conf.urls import patterns, include, url

urlpatterns = patterns('',
    url(r'^$', 'MonApp.views.index'),
)

9: Ouvrir le fichier settings.py situé dans le répertoire MonSuperSite/MonSuperSite et ajouter MonApp dans INSTALLED_APPS comme ceci:

Django: utilisation des fichiers statiques (CSS, images) en développement
Django: utilisation des fichiers statiques (CSS, images) en développement

INSTALLED_APPS = (
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.sites',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # Uncomment the next line to enable the admin:
    # 'django.contrib.admin',
    # Uncomment the next line to enable admin documentation:
    # 'django.contrib.admindocs',
    'MonApp',
)

10: Lancer la commande

python manage.py runserver

depuis le répertoire MonSuperSite/ et entrer l'url

http://127.0.0.1:8000/

dans votre navigateur internet. Résultat figure ci-contre. Done !

Exemple minimaliste sur comment utiliser les fichiers statiques (CSS, images) en développement avec django. Note: lors du déploiement du site ne pas oublier de récupérer tous les fichiers statiques en lancant la commande

python manage.py collectstatic

Recherches associées

Image

of