Include CSS and Javascript in my django template

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    your email example com               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 lt path gt         django views static serve     document root   settings STATIC URL   show indexes   True            and my base djhtml       lt  DOCTYPE  gt       lt html gt           lt head gt               lt  -- css and javascript template should be here -- gt               lt title gt                     block title                       endblock                 lt  title gt               lt link rel  stylesheet  type  text css  href     STATIC URL   css style css    gt               lt script type  text javascript  src     STATIC URL   js jquery-1 8 3 min js  gt  lt  script gt           lt  head gt           lt body gt                 block content                   endblock             lt  body gt       lt  html gt

User · Answer

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      lt link rel  stylesheet  href     static  css style css      gt

User · Answer

Refer django docs on static files   In 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        Then place your js and css files static folder in your project  Not in media folder   In 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     In template html    lt link rel  stylesheet  type  text css  href     STATIC URL   css style css    gt   lt script type  text javascript  src     STATIC URL   js jquery-1 8 3 min js  gt  lt  script gt    In urls py   from django conf import settings urlpatterns    patterns         url r  media   P lt path gt         django views static serve     document root   settings MEDIA ROOT   show indexes   True        Project file structure can be found here in imgbin

User · Answer

Read this https   docs djangoproject com en dev howto static-files       For local development  if you are using runserver or adding   staticfiles urlpatterns to your URLconf  you   re done with the setup       your static files will automatically be served at the default  for   newly created projects  STATIC URL of  static     And try     tmp  django-admin py startproject myprj   tmp  cd myprj    tmp myprj  chmod a x manage py   tmp myprj    manage py startapp myapp   Then add  myapp  to INSTALLED APPS  myprj settings py      tmp myprj  cd myapp    tmp myprj myapp  mkdir static   tmp myprj myapp  echo  alert  hello       gt  static hello js   tmp myprj myapp  mkdir templates   tmp myprj myapp  echo   lt script src     STATIC URL   hello js  gt  lt  script gt    gt  templates hello html   Edit 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        And run it     tmp myprj myapp  cd      tmp myprj    manage py runserver   It works

[javascript] Include CSS and Javascript in my django template

Examples related to javascript

Examples related to css

Examples related to django