如何在Django中使用CSS?


110

我正在使用Django创建应用程序,并且想知道如何使Django使用我的CSS文件?我需要做什么设置才能使Django查看css文件?

注意:在本地计算机上

Answers:


48

如果您使用的是开发服务器,请遵循django项目的管理静态文件的操作指南来设置URL,然后在模板中引用媒体文件-例如,来自的图像文件夹中的图像/site_media/images/foo.gif


25
简要介绍一下这些Django文档-确保为您使用的Django版本选择文档。静态文件的版本之间似乎发生了很大的变化。
山姆·史达琳

3
@Sam很有意思。我无法弄清楚静态文件对我的生命。然后,更改django安装的版本,然后瞧。实际上,这就是我要做的所有事情,因为显然我在寻找错误版本的文档。
乔什·布朗

36

更笼统地说,您是在问如何从Django提供静态文件。如果您在Apache下运行,则应阅读http://docs.djangoproject.com/en/dev/howto/deployment/modpython/

如果您正在运行开发服务器(例如,在笔记本电脑上),请阅读http://docs.djangoproject.com/en/dev/howto/static-files/

请注意有关Django开发服务器的庞大的免责声明

  • 使用此服务器效率低下且不安全。
  • 请勿在生产环境中使用此功能。
  • 仅将此用于开发。

“请勿在生产环境中使用它。” 您介意对此进行扩展吗?
克里斯,

@克里斯:是的,声明有点含糊。我指的是Django开发服务器。尽管我已经在生产站点上运行了几次,但在调试棘手的问题时只用了很短的时间。
彼得·罗威尔

感谢您的澄清,我正在查看在apache上运行的django部署,想知道我做错了什么。:)
克里斯(Chris)

1
真好 我喜欢这3个项目以不同的方式说同一件事。谢谢你的提醒。
科比·约翰2011年

13
我绝对喜欢在答案发布4.5年后才来投票的人。我不知道如果他们甚至知道Django的在11/08 ......大概不会。这不是代表点是找到我,它的无知和傲慢的只是一个被提示的显示组合waaay迟到了。我想知道他们如何评价我的帖子到1987年的comp.lang.c?最好不要问。
彼得·罗威尔

13

这也造成了我一段时间的问题(找不到404错误)。对我而言,缺少的一点是STATICFILES_DIRS在settings.py中编辑元组,以实现以下目的:

STATICFILES_DIRS = (
    # 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.
    os.path.join(os.path.dirname(__file__),'media').replace('\\','/'),
)

然后,这在django项目的顶层的名为“ media”的文件夹中拾取了我的CSS文件。

我也有:

MEDIA_ROOT = ''
MEDIA_URL = ''
STATIC_ROOT = ''
STATIC_URL = '/media/'

(请确保已经领先/以上STATIC_URL

当然,如上所述,您需要从HTML文件中正确包含CSS文件。我有:

<link href="{{ STATIC_URL }}css/ea_base.css" rel="stylesheet" type="text/css" media="screen" />

最后,一个清晰,简单而优雅的解决方案。django 1.5正常工作。
pbarill

#即使在Windows上,也始终使用正斜杠。.replace('\\','/')是没有必要的。

12

我需要进行哪些设置才能使Django查看CSS文件?

没有。

确保您的模板包括CSS文件(与标准HTML一样),并将CSS文件放在媒体服务器上。

需要说明的是:强烈建议您使用Django从其他服务器实例中提供所有媒体(不是动态html的所有内容)。实施方法完全取决于您,但是大多数人会创建一个子域。


2
嗨奥莉 我知道这篇文章已经接近3年了,但这仍然是将CSS链接到Django模板的最佳方法吗?将CSS链接到abs URL(例如static.example.com),然后将所有静态文件存储在该URL上,这似乎是最容易的。
cp3 2011年


0

将css与django一起使用的最简单方法是将其作为静态文件添加到模板中。

但这有点像ajax,我没有找到任何能说明如何以标准方式包含它的内容。

如果您想优化django的大小,则有一个css-compressor模块。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.