Inclure CSS et Javascript dans mon modèle django

Je suis un débutant dans Django 1.5 et j'ai appris quelques éléments de base à ce sujet. Mon problème est que je ne peux pas inclure css et javascript dans mon modèle. J'ai lu la documentation à ce sujet, mais comme je l'ai dit. Je suis débutant et je ne peux pas le comprendre clairement. Aidez-moi à connaître la procédure étape par étape pour inclure css et javascript dans mon modèle base.djhtml. Merci.

Ceci est mes paramètres.py

# Django settings for myweblab project. DEBUG = True TEMPLATE_DEBUG = DEBUG import os.path PROJECT_DIR = os.path.dirname(__file__) ADMINS = ( # ('Your Name', '[email protected]'), ) MANAGERS = ADMINS DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', # Add 'postgresql_psycopg2', 'mysql', 'sqlite3' or 'oracle'. 'NAME': 'myweblabdev', # Or path to database file if using sqlite3. # The following settings are not used with sqlite3: 'USER': '', 'PASSWORD': '', 'HOST': '', # Empty for localhost through domain sockets or '127.0.0.1' for localhost through TCP. 'PORT': '', # Set to empty string for default. } } # Hosts/domain names that are valid for this site; required if DEBUG is False # See https://docs.djangoproject.com/en/1.5/ref/settings/#allowed-hosts ALLOWED_HOSTS = [] # Local time zone for this installation. Choices can be found here: # http://en.wikipedia.org/wiki/List_of_tz_zones_by_name # although not all choices may be available on all operating systems. # In a Windows environment this must be set to your system time zone. TIME_ZONE = 'America/Chicago' # Language code for this installation. All choices can be found here: # http://www.i18nguy.com/unicode/language-identifiers.html LANGUAGE_CODE = 'en-us' SITE_ID = 1 # If you set this to False, Django will make some optimizations so as not # to load the internationalization machinery. USE_I18N = True # If you set this to False, Django will not format dates, numbers and # calendars according to the current locale. USE_L10N = True # If you set this to False, Django will not use timezone-aware datetimes. USE_TZ = True # Absolute filesystem path to the directory that will hold user-uploaded files. # Example: "/var/www/example.com/media/" MEDIA_ROOT = os.path.join(PROJECT_DIR, 'media') # URL that handles the media served from MEDIA_ROOT. Make sure to use a # trailing slash. # Examples: "http://example.com/media/", "http://media.example.com/" MEDIA_URL = 'http://localhost:8000/media/' # Absolute path to the directory static files should be collected to. # Don't put anything in this directory yourself; store your static files # in apps' "static/" subdirectories and in STATICFILES_DIRS. # Example: "/var/www/example.com/static/" STATIC_ROOT = '' # URL prefix for static files. # Example: "http://example.com/static/", "http://static.example.com/" STATIC_URL = '/static/' # Additional locations of static files CURRENT_PATH = os.path.abspath(os.path.dirname(os.path.dirname(__file__)).decode('utf-8')) STATICFILES_DIRS = ( os.path.join(CURRENT_PATH, 'media'), # Put strings here, like "/home/html/static" or "C:/www/django/static". # Always use forward slashes, even on Windows. # Don't forget to use absolute paths, not relative paths. ) # List of finder classes that know how to find static files in # various locations. STATICFILES_FINDERS = ( 'django.contrib.staticfiles.finders.FileSystemFinder', 'django.contrib.staticfiles.finders.AppDirectoriesFinder', # 'django.contrib.staticfiles.finders.DefaultStorageFinder', ) # Make this unique, and don't share it with anybody. SECRET_KEY = '1k38*$@ig616^xg#hy=n+yz-e9))s@_x-uq1pp%6xh!89m_r9(' # List of callables that know how to import templates from various sources. TEMPLATE_LOADERS = ( 'django.template.loaders.filesystem.Loader', 'django.template.loaders.app_directories.Loader', # 'django.template.loaders.eggs.Loader', ) MIDDLEWARE_CLASSES = ( 'django.middleware.common.CommonMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', # Uncomment the next line for simple clickjacking protection: # 'django.middleware.clickjacking.XFrameOptionsMiddleware', ) ROOT_URLCONF = 'myweblab.urls' # Python dotted path to the WSGI application used by Django's runserver. WSGI_APPLICATION = 'myweblab.wsgi.application' TEMPLATE_DIRS = ( os.path.join(PROJECT_DIR, 'templates') # Put strings here, like "/home/html/django_templates" or "C:/www/django/templates". # Always use forward slashes, even on Windows. # Don't forget to use absolute paths, not relative paths. ) 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', ) # A sample logging configuration. The only tangible logging # performed by this configuration is to send an email to # the site admins on every HTTP 500 error when DEBUG=False. # See http://docs.djangoproject.com/en/dev/topics/logging for # more details on how to customize your logging configuration. LOGGING = { 'version': 1, 'disable_existing_loggers': False, 'filters': { 'require_debug_false': { '()': 'django.utils.log.RequireDebugFalse' } }, 'handlers': { 'mail_admins': { 'level': 'ERROR', 'filters': ['require_debug_false'], 'class': 'django.utils.log.AdminEmailHandler' } }, 'loggers': { 'django.request': { 'handlers': ['mail_admins'], 'level': 'ERROR', 'propagate': True, }, } }

C'est mon url.py

  from django.conf.urls import patterns, include, url from django.conf import settings from myweblab.views import index # Uncomment the next two lines to enable the admin: from django.contrib import admin admin.autodiscover() urlpatterns = patterns('', # Examples: # url(r'^$', 'myweblab.views.home', name='home'), # url(r'^myweblab/', include('myweblab.foo.urls')), # Uncomment the admin/doc line below to enable admin documentation: # url(r'^admin/doc/', include('django.contrib.admindocs.urls')), # Uncomment the next line to enable the admin: url(r'^admin/', include(admin.site.urls)), url(r'^$', index, name="index"), ) urlpatterns += patterns('', url(r'^static/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.STATIC_URL, 'show_indexes': True}), )

Et mon base.djhtml

  <!DOCTYPE > <html> <head> <!-- css and javascript template should be here --> <title> {% block title %} {% endblock %} </title> <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/style.css" /> <script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.8.3.min.js"></script> </head> <body> {% block content %} {% endblock %} </body> </html>

Tout d'abord, créez le dossier staticfiles . À l'intérieur de ce dossier, créez le dossier css, js et img.

Settings.py

 import os PROJECT_DIR = os.path.dirname(__file__) DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NAME': os.path.join(PROJECT_DIR, 'myweblabdev.sqlite'), 'USER': '', 'PASSWORD': '', 'HOST': '', 'PORT': '', } } MEDIA_ROOT = os.path.join(PROJECT_DIR, 'media') MEDIA_URL = '/media/' STATIC_ROOT = os.path.join(PROJECT_DIR, 'static') STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(PROJECT_DIR, 'staticfiles'), )

Principal urls.py

 from django.conf.urls import patterns, include, url from django.conf.urls.static import static from django.contrib import admin from django.contrib.staticfiles.urls import staticfiles_urlpatterns from myweblab import settings admin.autodiscover() urlpatterns = patterns('', ....... ) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) urlpatterns += staticfiles_urlpatterns()

modèle

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

Reportez-vous Django docs sur les fichiers statiques .

Dans settings.py :

 import os CURRENT_PATH = os.path.abspath(os.path.dirname(__file__).decode('utf-8')) MEDIA_ROOT = os.path.join(CURRENT_PATH, 'media') MEDIA_URL = '/media/' STATIC_ROOT = 'static/' STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(CURRENT_PATH, 'static'), )

Ensuite, placez votre dossier statique js et css dans votre projet. Pas dans le dossier multimédia.

Dans views.py :

 from django.shortcuts import render_to_response, RequestContext def view_name(request): #your stuff goes here return render_to_response('template.html', locals(), context_instance = RequestContext(request))

Dans template.html :

 <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/style.css" /> <script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.8.3.min.js"></script>

Dans urls.py :

 from django.conf import settings urlpatterns += patterns('', url(r'^media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT, 'show_indexes': True}), )

La structure du fichier de projet se trouve ici dans imgbin .

Lisez ceci https://docs.djangoproject.com/en/dev/howto/static-files/ :

Pour le développement local, si vous utilisez runserver ou que vous ajoutez staticfiles_urlpatterns à votre URLconf, vous avez terminé la configuration – vos fichiers statiques seront automatiquement diffusés par défaut (pour les projets nouvellement créés) STATIC_URL de / static /.

Et essaye:

 ~/tmp$ django-admin.py startproject myprj ~/tmp$ cd myprj/ ~/tmp/myprj$ chmod a+x manage.py ~/tmp/myprj$ ./manage.py startapp myapp

Ensuite, ajoutez 'myapp' à INSTALLED_APPS ( myprj/settings.py ).

 ~/tmp/myprj$ cd myapp/ ~/tmp/myprj/myapp$ mkdir static ~/tmp/myprj/myapp$ echo 'alert("hello!");' > static/hello.js ~/tmp/myprj/myapp$ mkdir templates ~/tmp/myprj/myapp$ echo '<script src="{{ STATIC_URL }}hello.js"></script>' > templates/hello.html

Modifier myprj/urls.py :

 from django.conf.urls import patterns, include, url from django.views.generic import TemplateView class HelloView(TemplateView): template_name = "hello.html" urlpatterns = patterns('', url(r'^$', HelloView.as_view(), name='hello'), )

Et exécutez-le:

 ~/tmp/myprj/myapp$ cd .. ~/tmp/myprj$ ./manage.py runserver

Ça marche!