如何在Django中使用静态文件夹来管理CSS和JavaScript？

Question

我刚开始学习django框架，创建了一个简单的欢迎页面，现在我想在我的项目中加入一个css文件。但是我无法成功应用这个css文件，出现了一个错误，提示“NetworkError: 404 NOT FOUND - /static/css/hai.css”。

这是我的项目结构

settings.py 文件

BASE_DIR = os.path.dirname(os.path.dirname(__file__))
STATIC_URL = '/static/'
TEMPLATE_DIRS=(
os.path.join(os.path.dirname(BASE_DIR),"static","templates"),
)
if DEBUG:
  MEDIA_URL='/media/'
  STATIC_ROOT=os.path.join(os.path.dirname(BASE_DIR),"static","static-only")
  MEDIA_ROOT=os.path.join(os.path.dirname(BASE_DIR),"static","media")
  STATICFILE_DIRS=(
  os.path.join(os.path.dirname(BASE_DIR),"static","static"),
  )

urls.py 文件

if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL,document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

base.html 文件

<link href="/static/css/bootstrap.min.css" rel="stylesheet">

我还尝试了以下链接，但还是无法应用css：https://www.youtube.com/watch?v=8t80DMAAps8

Answer 1

试着做一个简单的文件，像这样：

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

STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)

STATIC_URL = '/static/'

TEMPLATE_DIRS=(
    os.path.join(OUTER_DIR, "static", "templates"),
)

MEDIA_URL='/media/'
STATIC_ROOT = os.path.join(OUTER_DIR, "static", "static-only")
MEDIA_ROOT = os.path.join(OUTER_DIR, "static", "media")

STATICFILE_DIRS=(
    os.path.join(OUTER_DIR, "static"),
)

然后，在你的代码中使用 {% static %} 这个模板标签。

{% load staticfiles %}
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet" />

用这个来测试一下：

DEBUG = True
TEMPLATE_DEBUG = DEBUG

如果你把 DEBUG 关掉，那么你需要添加：

if not settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL,document_root=settings.STATIC_ROOT)
    urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

现在你这样设置的时候是不需要的。

不过，templates 文件夹不应该放在 static 文件夹里。一般来说，templates 和 static 需要的具体文件应该放在你的 Django 项目里，而不是分开放。

Answer 2

Django会自动把静态文件收集到一个叫做STATIC_ROOT的地方，这个地方可以通过STATIC_URL来访问。你可以把一些基础的静态文件，比如bootstrap，放在你的项目包里（项目包就是一个包含init.py文件的文件夹）。具体路径是simpleform > static > bootstrap > 把bootstrap包里的所有目录复制过来：css、fonts、js。同时，你的应用静态文件可以放在signup > static > 也要创建css和js目录。

比如，如果hai.css是你在base.html中会用到的基本css文件，就把它放到simpleform > static > css > hai.css这个位置。

settings.py

这是你应该如何让项目的静态文件可用：

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

而对于应用的静态文件：

STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)

你还需要设置一个目录，让Django知道在哪里存放收集到的静态文件和上传的媒体文件（以及访问这些文件的链接）。例如，可以设置为src > static和src > media：

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

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

simpleform.urls

if settings.DEBUG:
    # static files (images, css, javascript, etc.)
    urlpatterns += patterns(
        '',
        url(r'^media/(?P<path>.*)$', 'django.views.static.serve', {
        'document_root': settings.MEDIA_ROOT}),

        url(r'^static/(?P<path>.*)$', 'django.views.static.serve', {
        'document_root': settings.STATIC_ROOT}),
)

template

{% load staticfiles %}

<link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet" media="screen">
<link href="{% static 'css/hai.css' %}" rel="stylesheet" media="screen">

Answer 3

我觉得这只是个拼写错误。你需要在 STATICFILE 后面加一个 S，这样它看起来应该是：

STATICFILES_DIRS=(
  os.path.join(os.path.dirname(BASE_DIR),"static","static"),
  )

希望这样能解决问题。