У меня есть ссылка внутри моего CSS файла, который ссылается на статическое изображение:
#logo
{
background: url('/static/logo.png')
}
Это работает отлично на моей машине dev, но не на моей производственной среде, так как url должен быть static.mydomain.com/logo.png. Как динамически изменять файл css в соответствии с STATIC_URL в моем файле настроек?
Используйте относительный путь. Относительно папки, в которой находится файл css
Вы можете перемещать любой CSS, содержащий статические пути к встроенному CSS, содержащемуся в шаблоне.
то есть.
<div style="background: url('{% static 'logo.png' %}')"></div>
Ловушка здесь заключается в том, что она не будет работать для запросов @media, вам нужно поместить их в блок, например.
<style>
@media (min-width: 1200px){
background: url('{% static 'logo.png' %}');
}
</style>
См. этот аналогичный вопрос о стеке.
Единственный способ сделать то, что вы хотите, - это создать свой CSS через Django. HTML обычно ассоциируется с представлениями и шаблонами Django, но на самом деле вы можете вернуть любой тип файла: CSS, JavaScript, обычный текст и т.д. Однако это добавит на ваш сайт накладные расходы, поэтому установка правильных заголовков HTTP и серверных кэширование сгенерированного файла будет очень важным.
Основной метод:
return render_to_response('stylesheet.css',
{ 'domain': 'http://static.mydomain.com/' },
context_instance=RequestContext(request),
mimetype='text/css'
)
В качестве альтернативы вы можете настроить хосты в своей системе, которые преобразуют статические домены обратно в localhost для целей разработки. Затем вы можете ссылаться на домен как обычно, но он по-прежнему будет извлекаться из ваших файлов разработки. Кроме того, если в вашей системе установлен Ruby, вы можете использовать рубигем под названием Ghost. Он позволяет легко создавать, включать, отключать и удалять пользовательские хосты прямо из командной строки без суеты.
Если вы хотите использовать тег {% static %} в своем CSS файле, вы должны использовать тег {% include%}. Вот пример для этого:
foo.html
{% load static %}
{% load i18n %}
{% load widget_tweaks %}
<!DOCTYPE html>
<html>
<head>
<style>
{% include "path/to/custom_styles_1.css" %}
</style>
<link rel="stylesheet" href="{% static 'css/custom_styles_2.css' %}">
</head>
<body>
<!-- Your HTML body -->
</body>
</html>
custom_styles_1.css
{% load static%}
{
background: url('{% static "/img/logo.png" %}')
}
custom_styles_2.css
.fa {
position: relative;
text-align: center;
font-family: BTitrBold;
font-size: 3.5em;
}
.name {
position: absolute;
top: 37%;
right: 15%;
}
.school {
position: absolute;
top: 530px;
right: 200px;
}
.id {
position: absolute;
top: 700px;
right: 200px;
}
.degree {
position: absolute;
top: 740px;
left: 195px;
}
custom_styles_1.css - это файл CSS, который содержит тег {% static %}. Вы должны интегрировать его с вашим файлом foo.html с тегом {% include %}. Таким образом, Django поместит все необходимые стили в нужное место и правильно отобразит статические теги.
custom_styles_2.css - это обычный файл CSS, расположенный в STATIC_ROOT, поэтому вы можете без проблем использовать для него тег {% static %}.
Возможно, существует способ заставить django обрабатывать файл CSS, как шаблон (я не очень хорошо знаком с django), но вместо этого вы можете попробовать другое решение: используйте динамический язык стилей, например LESS или Sass. С LESS это будет так же просто, как
@base: "//static.example.com/"
#logo {
background: url(%("%s/logo.png", @base))
}
Если вы используете django-libsass для генерации css, вы можете использовать пользовательские функции для соединения django и прекомпилятора sass.
На самом деле функция static уже реализована, и вы можете использовать ее:
.foo {
background: url(static("myapp/image/bar.png"));
}
как описано здесь: https://github.com/torchbox/django-libsass#custom-functions
Я попробовал решение Amir, и я все еще не в состоянии заставить вещи работать. Похоже, django не обрабатывает тег шаблона {% static%} внутри файла css {% includes%}.
$ pip list | grep -i django
Django 2.2.1
base.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
{% include 'aws_s3.css' %}
</style>
</head>
aws_s3.css
{% load static %}
body {
color: #333333;
background-color: #FFFFFF;
background-image: url("{% static '/img/cf_wonderful_pic.png' %}");
background-repeat: repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
margin: 0;
padding: 0;
}
Debug = True
SuspiciousOperation at /
Attempted access to '/img/cf_wonderful_pic.png' denied.
Request Method: GET
Request URL: https://archdb.xxxxx.com/
Django Version: 2.2.1
Exception Type: SuspiciousOperation
Exception Value:
Attempted access to '/img/cf_wonderful_pic.png' denied.
Error during template rendering
In template /app/templates/aws_s3.css, error at line 6
Attempted access to '/img/cf_wonderful_pic.png' denied.
1 {% load static %}
2
3 body {
4 color: #333333;
5 background-color: #FFFFFF;
6 background-image: url("{% static '/img/cf_wonderful_pic.png' %}");
7 background-repeat: repeat-x;
8 font-family: Arial, Helvetica, sans-serif;
9 font-size: 100%;
10 margin: 0;
11 padding: 0;
Если ваши изображения не слишком велики, вы можете использовать URI данных, которые могут быть встроены прямо в файл css без каких-либо ссылок. Они выглядят так:
.box-with-background {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgI=')
background-repeat: repeat;
}
Обычно они немного дольше, чем показанные мной. Вы можете сгенерировать их с помощью javascript, и вы можете найти некоторые онлайн-генераторы.