Includere CSS e Javascript nel mio modello django

Question

Sono un principiante in Django 1.5 e ho imparato alcune cose di base a riguardo. Il mio problema è che non sono in grado di includere css e javascript nel mio modello. Ho letto la documentazione a riguardo ma come ho detto. Sono un principiante e non riesco a capirlo chiaramente. Per favore aiutami a conoscere la procedura passo passo per includere css e javascript nel mio modello base.djhtml. Grazie.

Questo è il mio 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, 
      }, 
     } 
    } 

questo è il mio 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}), 
    ) 

e la mia 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

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

Poi posiziona il js e css file cartella statica nel progetto. Non nella cartella multimediale.

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:

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

In 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 struttura del file di progetto è disponibile here in imgbin.

Answer 2

Legga questo https://docs.djangoproject.com/en/dev/howto/static-files/:

per lo sviluppo locale, se si utilizza runserver o l'aggiunta di staticfiles_urlpatterns al vostro URLconf, il gioco è fatto con la messa a punto - i file statici verranno automaticamente essere serviti a l'impostazione predefinita (per i progetti di nuova creazione ) STATIC_URL di/static /.

e provate:

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

Quindi aggiungere '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 

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

ed eseguirlo:

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

funziona!

Answer 3

Innanzitutto, creare la cartella staticfiles. Dentro quella cartella crea la cartella css, js e 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'), 
) 

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

modello

{% load static %} 

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