在CSS文件中使用Django变量

Question

我正在尝试使用Django模板引擎或任何其他方法创建动态 CSS文件.

目前,我有一个CSS规则,如下所示:

background-image: url('http://static.example.com/example.png');

其中http://static.example.com对应STATIC_URL于Python中的变量.使用Django模板引擎,我理论上可以这样写:

background-image: url('{{ STATIC_URL }}example.png');

我的问题是,如何使用Django模板引擎(或任何其他方法)动态生成CSS？

Answer 1

这里一个非常好的解决方案是使用django-compressor.首先,如果您要提供多个CSS文件,压缩器将通过删除请求数来帮助改善页面加载时间.

压缩/连接文件的副作用是压缩器重写css文件中的url,因此相对引用的静态文件(例如../img/logo.png)自动成为完全限定的url,带有静态文件url(例如http:/ /static.example.com/img/logo.png).

或者,您可以编写自定义过滤器来实现您想要的,或者,您可以将完全静态的CSS和一些动态部分压缩到单个文件中(例如,在基本布局文件中执行此操作):

{% compress css %}
   <link .... />
   <style>
       .some_rule {background-image:{{MEDIA_URL}}/img/logo.png}
   </style>
{% endcompress %}

这也意味着您不必担心效率,因为css/js文件是在首次访问使用它们的模板时生成的,并且它们作为普通文件存储在静态目录中(这是可配置的),因此它们是作为普通的静态文件提供.

Answer 2

你基本上有两个选择:

1. 使用urls.py中的条目等动态地为您的CSS提供服务,就像它是一个HTML页面一样.您的模板文件将只是CSS而不是HTML,但将使用普通的Django模板语法等.

2. 快捷方式:使用相对路径引用背景图像.这可能适用于您的环境,也可能不适用,但这是一种让静态CSS文件引用不同路径的便捷方式,具体取决于托管位置.