在 css 文件中使用 Django 模板语法 [英] Use Django template syntax in a css file
问题描述
我有一个 css 文件 home_global.css，其中包含以下内容:
I have a css file home_global.css which has the following in it:
body {
background-image: url("{% static 'citator/citator.jpg' %}");
}
这个静态文件使用:
<link rel="stylesheet" href="{% static 'citator/home_global.css' %}" type="text/css">
然而，背景图像的 url 预计不会解析，而是按字面解析.我想做的是在 css 文件中启用 Django 模板语法.
However the url of the background-image, expectedly, doesn't resolve but is parsed literally. What I would like to do is enable Django template syntax in the css file.
请注意，静态 URL 等均已正确设置，此问题不涉及此问题.
Please note that the static URLs etc are all set up correctly and this question doesn't involve that.
这个问题和我一个月前问的另一个问题非常相似:如何在静态文件中使用 django 模板语法
This question is very similar to another question that I myself asked a month ago: How to use django template syntax in static files
然而，那里提供的答案特定于 javascript，并特别指出阻止这种情况的基本问题是上下文被传递到您的 render() 函数中提到的模板在视图(或任何其他函数中的行为方式相同，例如 render_to-response())."
However, the answer provided there was specific to javascript, and in particular noted that "The fundamental issue that prevents this is that context is passed to the template that is mentioned in your render() function in the view(or any other function the behaves the same way e.g. render_to-response())."
如果我理解正确的话，同样的限制在这里不适用.此外，我随后从 Django 文档中了解到，可以在各种文本文档中使用 Django 模板语法.因此，在我看来，在 this 的情况下，我想在 css 文件中使用它，这应该是可能的.那么，我该怎么做?
If I understand this correctly, the same limitation does not apply here. Furthermore, I've subsequently learned from the Django documentation that it is possible to use Django template syntax in a variety of text documents. It therefore seems to me that in this case, where I want to use it in a css file, this should be possible. So, how can I do this?
推荐答案
正如您正确指出的，Django 模板可用于任何文本文件，而不仅仅是 HTML.但是，您需要确保它们由模板引擎呈现，并提供特定的 url 和视图.
As you correctly pointed out, Django templates can be used for any text file, not just HTML. However, you need to make sure they're rendered by the template engine, providing a specific url and a view.
那样，您可以期望插入所有变量和标签，特别是将静态"替换为 settings.STATIC_URL.但是，我不会坚持在 CSS 文件本身的 url 前面加上/static/"……那是作弊，因为您宁愿动态呈现文件.
That way, you can expect to have all variables and tags interpolated, and in particular to have "static" replaced by settings.STATIC_URL. However, I wouldn't insist in prepending "/static/" to the url of the CSS file itself ... that would be cheating, as you're rather rendering the file dynamically.
实践中:
项目/urls.py
from django.urls import path
from django.views.generic import TemplateView
urlpatterns = [
...
path('css/home_global.css', TemplateView.as_view(
template_name='home_global.css',
content_type='text/css')
),
...
]
该视图相当琐碎，已内联在 urls.py 中.请注意，我还指定了适当的 mimetype 'text/css'.
The view is rather trivial, and has been inlined in urls.py. Please note I also specified the appropriate mimetype 'text/css'.
在这里，我在 url 前面加上了一个 'css/' 前缀，但这不是必需的，而且你的项目中不需要css"文件夹；只要确保模板引擎可以找到home_global.css"；也就是说，把它放在任何已安装应用程序的/template/子文件夹中，或者甚至在项目中，如果它列在已安装的应用程序中:
Here, I prepended a 'css/' prefix to the url, but this is not necessary, and you don't need a "css" folder in your project; just make sure that the template engine can find "home_global.css"; that is, put it in the /template/ subfolder of any installed app, or even in the project if it is listed among the installed apps:
project/templates/home_global.css
project/templates/home_global.css
{% load static %}
body {
background-image: url("{% static 'citator/citator.jpg' %}");
}
您可以通过使用浏览器导航到此 url 来立即检查结果:
You can check immediately the result by navigating to this url with your browser:
http://127.0.0.1:8000/css/home_global.css
呈现文档如下:
body {
background-image: url("/static/citator/citator.jpg");
}
并根据需要将其包含在主模板中:
and include it in main template as required:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/css/home_global.css" type="text/css">
...
如果您需要渲染多个 css 文档，将文件名视为参数可能会很方便，然后对所有文档使用一个视图.在这种情况下，为了简单起见，我会选择基于函数的视图:
Should you need to render many css documents, it might be convenient to treat the filename as parameter, then use a single view for all documents. In this case I would opt for a function based view, for simplicity:
urls.py:
from django.urls import path
from . import views
urlpatterns = [
...
path('css/<str:filename>.css', views.css_renderer),
...
]
哪里:
views.py
from django.shortcuts import render
def css_renderer(request, filename):
return render(request, filename + '.css', {}, content_type="text/css")
并在您的主模板中:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/css/home_global.css" type="text/css">
<link rel="stylesheet" href="/css/another.css" type="text/css">
<link rel="stylesheet" href="/css/yet_another.css" type="text/css">
...
这篇关于在 css 文件中使用 Django 模板语法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
