Include CSS and Javascript in my django template [duplicate]

Question

I am a newbie in Django 1.5 and I have learn some basic things about it. My problem is , I am not able to include css and javascript in my template. I have read the documentation about it but as i have said. I am a newbie and i can't understand it clearly. Please help me know the step by step procedure to a include css and javascript in my base.djhtml template. Thanks.

This is my settings.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,             },         }     } 

this is my 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}),     ) 

and my 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> 

Answer 1

First, create staticfiles folder. Inside that folder create css, js, and img folder.

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'), ) 

main 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() 

template

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