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:
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
Liens | Site |
---|---|
Managing static files (CSS, images) | Django Doc |
Django | Django |
freewebtemplates | reewebsitetemplates |
Django won't serve static files while using development server | stackoverflow |