在我的Django模板中包含CSS和Javascript

Question

在我的Django模板中包含CSS和Javascript

30

我是Django 1.5的初学者，已经学了一些基础知识。我的问题是，我无法在模板中包含CSS和JavaScript。我已经阅读了相关文档，但正如我所说，我作为新手不能清楚地理解它。请帮助我逐步了解如何在base.djhtml模板中包含CSS和JavaScript。谢谢。

这是我的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,
            },
        }
    }

这是我的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}),
    )

以及我的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>

- Jonathan Cañaveral Senence

你的模板代码是什么样子的？ - Cianan Sims

目前还没有出现任何错误，我只是不知道如何在我的模板中包含CSS和JavaScript。 - Jonathan Cañaveral Senence

<!DOCTYPE > <html> <head>  <title> {% block title %} {% endblock %} </title> </head> <body> {% block content %} {% endblock %} </body> </html> - Jonathan Cañaveral Senence

如果你在HTML方面有困难，那么在尝试Django项目之前应该先去学习它。 - Cianan Sims

这里有一个教程。 - Benyamin Jafari

显示剩余2条评论

3个回答

17

请参考Django关于静态文件的文档。

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

然后将你的js和css文件放在项目中的static文件夹中。 不要放在media文件夹中。

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

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

在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}),
)

项目文件结构可以在这里的imgbin找到。

- arulmr

在url.py中会是什么？当我尝试查看源代码并点击media/css/style.css时，它会显示文件未找到。 - Jonathan Cañaveral Senence

我已经更新了我的回答。但是它应该可以在没有这个的情况下工作。你能否发布你的 STATIC_ROOT、STATIC_URL 和 STATICFILES_DIRS 设置，并确保 'django.contrib.staticfiles' 被包含在你的 INSTALLED_APPS 设置中？ - arulmr

我已更新问题，请检查我的文件，谢谢。 - Jonathan Cañaveral Senence

你能否发布一下你项目的文件结构？同时，MEDIA_ROOT和STATICFILES_DIRS不应该指向同一个文件夹。请更改其中任意一个。 - arulmr

嗨，这是我的文件结构图像：http://neumerance.webs.com/filestructure.png - Jonathan Cañaveral Senence

3

阅读此文档：https://docs.djangoproject.com/en/dev/howto/static-files/：

对于本地开发，如果您正在使用runserver或将staticfiles_urlpatterns添加到您的URLconf中，则已完成设置 - 您的静态文件将在默认情况下（对于新创建的项目）自动服务于STATIC_URL / static /。

并尝试：

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

然后将'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

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

运行它：

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

它有效了！

- Leonid Shvechikov

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- catherine · Accepted Answer

首先，创建一个名为staticfiles的文件夹，在该文件夹内创建css、js和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'),
)

主要 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()

模板

{% load static %}

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