为什么 django 不解析和替换我的 css 文件中的模板标签？答案

【问题标题】：Why isn't django isn't parsing and replacing the template tags in my css file?为什么 django 不解析和替换我的 css 文件中的模板标签？
【发布时间】：2016-02-06 10:43:39
【问题描述】：

这是我的设置文件中的一个 sn-p

STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'static_cdn')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'media_cdn')

我的基本目录中还有一个名为 static 的文件夹，其中还有一个名为 css 的文件夹，其中存放了我的 blog.css 样式。

我的 html 文件通过以下方式链接到我的 css 文件：

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

媒体文件（图片）没有问题。命令行显示静态文件正在被收集到static_cdn和

`/static/css/blog.css HTTP/1.1" 200 39`

虽然我认为这意味着 django 可以毫无问题地找到我的 css 文件，但是项目中没有显示样式。

最后，我的 css 文件中的一个块，到目前为止唯一的块：

body: {
  background: url("{% static 'images/jumbotron.jpg' %}");

}

谁能指出我正确的方向？谢谢

【问题讨论】：

你用 CSS 加载静态文件了吗？？？
是的，我做到了。没有效果。所以我把它取下来了
尝试在你的 CSS 文件中使用普通的 url 地址 ... 例如 background: url("../images/jumbotron.jpg"); .... 如果工作你的静态 url 是错误的
就是这样做的。没有效果。顺便把你的建议复制粘贴了

标签： css django

【解决方案1】：

把它放在你的 css 文件中不会像你期望的那样工作。

// /static/css/blog.css 

body: {
  background: url("{% static 'images/jumbotron.jpg' %}");
}

要解决此特定问题，请遵循其他答案中的建议。我将尝试解释为什么您当前的方法不起作用。

django 模板引擎不会解析您的 css 文件，除非您明确告诉它这样做。模板对于处理内容通常会从一个请求更改为下一个请求的 html 非常有用。

Css 文件完全不同。最好使用 Sass 或 Stylus 等样式表处理器构建一次，然后为每个访问者提供相同的 css 文件。

或者你可以手工编写普通的旧 css，这对于小型项目来说更好。学习 css 预处理本身就是一个项目。

理论上，您可以使用 django 视图在每个请求上动态地提供生成的 css 文件，但这似乎是在浪费处理周期。

如果你真的想在你的 css 中使用 django 模板标签，最好在你的 html 页面的头部使用内联样式表。您可以将所有页面通用的样式放在 css 文件中，并将自定义动态内容放在头部。这样的事情可能会奏效。

{% load staticfiles %}
<head>
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
<style>
    body: { background: url("{% static 'images/jumbotron.jpg' %}"):}
</style>
</head>

这可用于 myspace 样式的页面，您希望用户能够使用他们自己选择的自定义字体和背景图像来破坏他们自己的页面。

【讨论】：

谢谢。我已经切换到普通的 CSS 样式，即：body: { background: url("images/jumbotron.jpg"); } 仍然没有区别。
首先：确认您可以使用完整的预期 url 在浏览器中打开图像。 http://example.com/static/images/jumbotron.jpg 图片 url 必须是相对于 css url 的路径。查看您的问题，名为css 的文件夹中的css 和图像在images 中。是 css http://example.com/static/css/blog.css 的 url 吗？那么相对 url 应该是"../images/jumbotron.jpg"。但其他人已经提出了这一建议。
在我的 html 文件中使用显示照片在浏览器中
我的回答解释了为什么这在 css 中不起作用。当您点击该链接时，浏览器中显示的网址是什么？
是的。谢谢你。我已经想通了这个问题。它实际上在一小时前得到了回答，但我错过了那个帖子。非常感谢你的帮助。我学到了很多

【解决方案2】：

在你的 CSS 文件中删除 : 并使用正常的 url 地址

body{
    background: url('../images/jumbotron.jpg');
    direction:rtl;
}

如果你的css文件和图片文件夹在同一目录下使用

`images/jumbotron.jpg`

否则你应该使用

`../images/jumbotron.jpg`

还要检查您的地址和文件名是否存在格式错误、大写等小错误。

要验证您应该使用哪个路径作为相对 url，请确认您可以使用完整的预期 url 在浏览器中打开图像。

http://example.com/static/images/jumbotron.jpg

图片 url 必须是相对于 css url 的路径。看看你的问题，一个名为css的文件夹中的css，图像在图像中。如果这是 css 网址：

http://example.com/static/css/blog.css?

那么相对url应该是"../images/jumbotron.jpg"

【讨论】：

【解决方案3】：

你应该使用正常的方式来使用静态图片：

body {
   background: url('images/jumbotron.jpg');
}

有关文件夹结构的更多信息，请参阅文档中的 this example。

【讨论】：