Использование переменной Django в файле CSS
Я пытаюсь создать динамический файл CSS, используя механизм шаблонов Django или любые другие средства.
В настоящее время у меня есть правило 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?
Ответы
Ответ 1
В основном у вас есть два варианта:
-
Поддерживайте свой CSS динамически, используя запись в urls.py и т.д., как если бы это была страница HTML. Ваш шаблонный файл будет просто CSS вместо HTML, но будет использовать обычный синтаксис шаблона Django и т.д.
-
Ярлык. Ссылка на фоновое изображение с относительным путем. Это может быть или не быть возможно для вашей среды, но это удобный способ иметь статический файл CSS с ссылками на разные пути в зависимости от того, где он размещен.
Ответ 2
Очень хорошее решение здесь - использовать django-compressor. Во-первых, если вы обслуживаете более одного файла CSS, компрессор будет помогать улучшить время загрузки страницы, отбросив количество запросов.
Побочным эффектом сжатия/конкатенации файлов является то, что компрессор перезаписывает URL-адреса в файле css, поэтому относительно статические файлы с ссылкой (например../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 генерируются при первом доступе к шаблону, который их использует, и они хранятся как обычные файлы в вашем статическом каталоге (это настраивается), поэтому они обслуживаются как обычные, статические файлы.