Django CSS：无法获取带 CSS 的 HTML 页面

Django CSS 显示 HTML 页面但不包含 CSS

• 修改 CSS 文件位置、设置和 media url 参数均无法解决问题
• CSS 文件位于 /home/justin/test/static/
• 模板位于 /test/templates/
• 设置如下：
  

STATIC_ROOT = '/home/justin/test/static/'
STATIC_URL = '/static/'
STATICFILES_DIRS = (
    '/home/justin/test/static/',
)

• urlpatterns 如下：

urlpatterns = patterns('',

    url(r'^$', 'views.home'),

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

)

• 主模板包含以下3行内容：

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

• 结果：

HTML 代码	输出
<link href="/static/style.css" rel="stylesheet"></link>	正确的文件，但不起作用
<link href="style.css" rel="stylesheet"></link>	无效
<link href="/style.css" rel="stylesheet"></link>	无效

解决方案

答案1

• 在视图的 RequestContext 中传递请求：

def home(request):
    return render_to_response('index.html', locals(), context_instance = RequestContext(request))

• 这样才能将会话数据传递给模板，使 {{ STATIC_URL }} 能够正常工作。

答案2

• 一些建议和需要注意的事项：
  • MEDIA_ 相关设置用于用户上传的文件；而 STATIC_ 相关设置用于应用程序中的文件。
  • STATIC_ROOT 应指向 collectstatic 命令将从所有应用程序中提取所有静态文件的文件系统路径。在将应用程序部署到生产环境时，运行 collectstatic（该命令会覆盖 STATIC_ROOT 所指向目录中的所有内容），然后将此目录的内容复制到映射到 STATIC_URL 指向的 URL 的位置。
  • STATICFILES_DIRS 是存储不属于任何特定应用程序的静态文件的目录。如果设置此位置，则 Django 也会在此处查找静态文件。
  • STATIC_URL 是在 Web 服务器中配置的 URL 路径，用于指向 STATIC_ROOT 中所有文件所在的位置。
  • {% static %} 标记始终指向 STATIC_URL 变量。为了使用此标记，必须在使用该标记的任何模板的顶部添加 {% load staticfiles %}；即使模板从已经包含此加载行的模板继承。
  • urls.py 中不需要任何花哨的内容，除非使用 Django 来提供静态文件（但你应该避免这样做）。使用 Web 服务器处理静态文件。如果在 DEBUG = True 下运行并使用 runserver，则 Django 会在开发期间自动处理静态文件，这是为了方便开发。
  • 对于受 MEDIA_* 设置控制的任何用户上传文件，需要在开发期间手动处理；可以使用 urls.py 中的以下代码片段进行处理。但是，务必注意这仅适用于开发，不要在生产环境中使用：

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = patterns('',
        # ... the rest of your URLconf goes here ...
  )
  if settings.DEBUG:
       urlpatterns += static(settings.MEDIA_URL,
                             document_root=settings.MEDIA_ROOT)

• 请阅读手册中的静态文件部分，本文对其中的要点进行了总结。
• 最后，在视图中使用相关方法时，应使用 render 快捷方式。这样可以确保始终发送正确的请求上下文。