在我的 django 模板中包含 CSS 和 Javascript [重复]
Posted
技术标签:
【中文标题】在我的 django 模板中包含 CSS 和 Javascript [重复]【英文标题】:Include CSS and Javascript in my django template [duplicate] 【发布时间】:2013-03-07 16:03:36 【问题描述】:我是 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>
【问题讨论】:
你的模板代码是什么样的? 还没有失败,我只是不知道如何在我的模板中包含 css 和 javascript请参考django docs on static files。
在 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 文件夹放入您的项目中。 不在媒体文件夹中。
在 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),
)
项目文件结构见here in imgbin。
【讨论】:
url.py 中的内容是什么?当我尝试查看源代码并单击 media/css/style.css 时,它说找不到文件 我已经更新了我的答案。但是没有这个它应该可以工作。您能否发布您的STATIC_ROOT
、STATIC_URL
和STATICFILES_DIRS
设置并确保'django.contrib.staticfiles',
包含在您的INSTALLED_APPS
设置中?
我已经更新了问题请检查我的文件谢谢
你能把你项目的文件结构也贴出来吗? MEDIA_ROOT
和 STATICFILES_DIRS
也不应该指向同一个文件夹。更改其中任何一个。
嗨,这是我的文件结构图片neumerance.webs.com/filestructure.png【参考方案2】:
阅读此https://docs.djangoproject.com/en/dev/howto/static-files/:
对于本地开发,如果您使用的是 runserver 或添加 staticfiles_urlpatterns 到你的 URLconf,你已经完成了设置—— 您的静态文件将自动默认提供(对于 新创建的项目)/static/ 的 STATIC_URL。
然后尝试:
~/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
有效!
【讨论】:
【参考方案3】:首先,创建 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' %">
【讨论】:
admin.autodiscover() 是做什么的? @py_ios_dev docs.djangoproject.com/en/2.2/ref/contrib/admin/…以上是关于在我的 django 模板中包含 CSS 和 Javascript [重复]的主要内容,如果未能解决你的问题,请参考以下文章
如何在我的 Sendgrid 事务模板中包含 Jinja2 模板