Django：如何将颜色作为上下文变量传递给模板

Question

我需要一些帮助：

我希望我的视图将颜色作为上下文参数传递给模板，以覆盖页面显示的 svg 文件中的默认颜色。

我有一个颜色常量列表：

COLORS = {"W": "#ffffff", "V": "#065636", "B": "#0253A5", "R": "#CC1011"}

我的视图定义中有上下文变量的定义：

view_context = {
    'user_display_name': user.user_display,
    'lightcolor': COLORS[user.lightcolor],
}
return render(request, 'pages/page5.html', context=view_context)

在我的模板 (pages/page5.html) 中，我有一个 <style> 部分来定义 CSS 样式：

<style>
    .X {
        /* fill: #065636 !IMPORTANT; */
        fill: "{{ lightcolor }}" !IMPORTANT;
    }
</style>

.X {fill: #065636 !IMPORTANT;} 工作正常

而.X {fill: "{{ lightcolor }}" !IMPORTANT;}

不起作用并被忽略，我猜是因为 lightcolor 是字符串 "#065636" 而不是 RGBcolor #065636

类似地，.X {fill: {{ lightcolor }} !IMPORTANT;} 甚至似乎都不是公认的语法

我在网上找不到任何相关的东西

如何将颜色作为上下文参数传递到模板的 <style> 部分并使其正常工作？

Answer 1

尝试使用内联样式。

例如

<h4 style="color:{{ color }}">Records</h4>

Answer 2

fill 属性是 for setting the color of an SVG shape。假设这就是你想要做的，你的语法应该可以工作。

工作演示：https://repl.it/@JoshG5/Django-Template

views.py

from django.http import HttpResponse
from django.shortcuts import render


def index(request):
  COLORS = {"W": "#ffffff", "V": "#065636", "B": "#0253A5", "R": "#CC1011"}
  view_context = {
    'user_display_name': "foo",
    'lightcolor': COLORS["V"],
  }
  return render(request, 'page.html', context=view_context)

templates/page.html

<style>
    .X {
        /* fill: #065636 !IMPORTANT; */
        fill: {{ lightcolor }} !IMPORTANT;
    }
</style>
<svg height="250px" width="600px" class="X"
      xmlns="http://www.w3.org/2000/svg"
      version="1.1"> 
      <circle class="opacity1" cx="100"
        cy="100" r="50" /> 
      <circle class="opacity2" cx="250"
        cy="100" r="50" /> 
      <circle class="opacity3" cx="400"
        cy="100" r="50" /> 
      <circle class="opacity4" cx="550"
        cy="100" r="50" /> 
</svg>

您应该会看到以所需颜色呈现的圆圈。

如果您尝试填充块或内联元素，请尝试使用color 属性：

.X {
    color: {{ lightcolor }} !important;
}

Answer 3

好的，我找到了问题的根源！我正在 PC 上处理 VS 代码。 当我保存时，我的 html 文件的格式从：

.Y {
        fill: {{darkcolor}} !IMPORTANT;
    }

进入：

    .Y {
        fill: {
                {
                darkcolor
            }
        }

         !IMPORTANT;
    }

填充后的大括号也标记为红色，表示我的语法存在问题（保存和代码重组前后）

如果我设法在 VS 代码之外修改我的文件...一切都很好，一切都在正常工作！

谁能解释我如何避免重新组织这部分代码？ （是因为我的 linter，还是因为其他原因？停止 linting 似乎并没有改变任何东西）