django 在模板中包含静态文件？

Question

guys iam a newbee to django.. i was trying to load static files like images and css into my template.. but its not working.. here's the code

-----------settings.py----------

"""

Generated by 'django-admin startproject' using Django 1.8.2.

For more information on this file, see
https://docs.djangoproject.com/en/1.8/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/1.8/ref/settings/
"""

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
import os

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/1.8/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '#####################################'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
)

MIDDLEWARE_CLASSES = (
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'django.middleware.security.SecurityMiddleware',
)

ROOT_URLCONF = 'hostel_management.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['hostel_management/templates/'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'hostel_management.wsgi.application'


# Database
# https://docs.djangoproject.com/en/1.8/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}


# Internationalization
# https://docs.djangoproject.com/en/1.8/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.8/howto/static-files/

STATIC_URL = 'hostel_management/static/'


STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
    '/var/www/static/',
)

---------urls.py---------

from django.conf.urls import include, url
from django.contrib import admin
from views import index

urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),
    url(r'^index/$', index)

]

------index.html------

{% load static from staticfiles %}
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="{% static "scripts.js" %></script>
     <img src="{% static "large-image.jpg" %}" alt="img" />

neither the image nor the js file is loaded..

the filesystem is as follows

hostel_management
├── manage.py
├──hostel_management
|   ├──templates
├──static
|   ├──large_image.jpg
|   ├──script.js

Answer 1

You say that you have script.js but you try to get scripts.js .

{% load static %}
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="{% static 'script.js' %></script>
     <img src="{% static "large-image.jpg" %}" alt="img" />

Also you have to move static folder to the place where your manage.py is placed and set STATIC_URL = '/static/'

Answer 2

There is an error in the way you load the static files. Load it this way:

<link rel="stylesheet" href="{% static "script.js" %}">

I think there is an error on you settings.py

where your way of loading static file is :

STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),"/var/www/static/',

this is the way according to the django docs,

STATIC_URL = '/static/' 
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

if you can give a full folder structure in your project then telling you the exact changes will be possible.

Answer 3

Change your static url to

STATIC_URL = '/static/'

In your template, put following line in start

{% load staticfiles %}

For static files which are required in your whole project, you can put them in same directory in which you have manage.py. For static files which are tied to a specific app, you can use following settings in your settings.py. Like in your case

STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
'hostel_management/static/',

)

There is no need to include url in urls.py as you have done. This is not suitable for production use. You can also try it by moving your templates directory at same level as your static file directory.

Answer 4

add app name into Installed Apps[]

    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'hello_world',#add here
)