如何使用动态 CSS 呈现模板

我想在视图中创建一个动态CSS文件，然后渲染一个加载该CSS文件的模板。根据为视图提供的参数，每次调用视图时，CSS 在某些位置可能具有不同的值。我该怎么做呢？（我应该补充一点，我没有用Python/Django编写文件的经验。

这是一个我认为它应该如何工作的简化示例：

# urls.py
urlpatterns = patterns('',
    (r'^myview/(?P<color>[0-9a-f]{6})/$', create_css_file),
)
# views.py
def create_css_file(request, color):
    raw = "@charset 'UTF-8';nn"
    raw += "body {n"
    raw += "  color: #" + color + ";n"
    raw += "}nn"
    f = open('mydynamic.css', 'r+')
    f.write(raw)
    return render_to_response('mytemplate.html', locals())
# mytemplate.html
{% extends "base.html" %}
{% block head %}
    <link rel="stylesheet" media="screen" href="{{ f.name }}" />
{% endblock %}

由于某种原因，这不起作用，尽管在生成的 HTML 页面的源代码中，看起来 CSS 文件已正确加载。f甚至可以正确到达模板，因为当我将<link>...行更改为

<link rel="stylesheet" media="screen" href="{{ f }}" />

（f而不是f.name）。但是 HTML 在没有所需颜色设置的情况下呈现。谁能告诉我为什么会这样？

我

怀疑存在一些路径问题，我玩弄了很多不同的路径，但无济于事。

请不要建议我准备几个硬编码的CSS文件（正如我在类似问题的答案中发现的那样），因为会有数百种可能性。

如果你绝对需要，你可以动态创建一个css文件。

您可以在 urls.py 中创建条目。您可以为您想要的任何内容命名 url，这可能看起来像外部世界的静态.css文件，但会动态创建。

(r'^(?P<color>[0-9a-f]{6})/dynamic.css$', dynamic_css)

def dynamic_css(request, color):
   """
   Create a css file based on a color criteria,
   or any other complicated calculations necessary
   """
   # do custom element positionting.
   return render_to_response('dynamic.css', {'color': color})

# dynamic.css    
body {
  background-color: {{ color }}
}

没有理由为此编写 css 文件。现在您可以只包含

<link rel="styleshee" type="text/css" href="/purple/dymamic.css" />

在您的模板中。

如前所述，这不应该仅用于更改一种颜色。这可以在您的模板中完成。如果您必须执行这样的事情，那么实现缓存可能是一个好主意，因为每次请求页面时，它都必须动态生成可能是性能开销的.css。这更像是一个示例，用于显示您可以根据需要命名 urls.py 条目的任何名称。并以您想要的任何方式将它们包含在 html 中，即。如果需要动态创建自定义 JavaScript 文件，则可以在 urls.py 中创建一个条目，然后创建一个生成.js文件的视图。

views.py：

def create_css_file(request, color):
    f = color
    return render_to_response('mytemplate.html', locals())

模板：

<body style = "color:{{f}}!important;">

不要即时创建css文件，这是不必要的。

我采纳了@CatPlusPlus的建议：计算视图中的必要值，并向模板传递一个包含整个CSS的很长的字符串（raw）。在模板中，我像这样包含它：

<style media="screen">{{ raw|safe }}</style>

感谢大家的努力！

相关内容

最新更新

热门标签：