Question

我正在尝试根据我正在使用的PageSetting模型修改页面的CSS。我允许用户根据一些PageSetting属性更改页面主题的外观。

class PageSettings(SingletonModel):
    theme = models.IntegerField(choices=THEMES,
                                verbose_name=_("Theme"),
                                default=0)
    base_color = RGBColorField(blank=False,
                               verbose_name=_("Base color"),
                               default="bc0000")

    ...

我想要做的是根据base_color更改css中的某些值。几乎是这样的：

# inside my_theme.css
.side-bar {
  background: {{ pagesetting.base_color }};
  float:left;
  width: {{ pagesetting.sidebar_width}}%

  ...

}

在Django中这是可以理解的吗？我知道我可以做到

<div class="sidebar" style='background-color:#{{pagesetting.base_color}};'>

但是这使得我的HTML难以调试。

Answer 1

您可以在视图文件的<style></style>标记内执行此操作

<style>
    .side-bar {
       background: {{ pagesetting.base_color }};
       float:left;
       width: {{ pagesetting.sidebar_width }};

       ...

    }
</stlye>

Answer 2

无法修改css本身，您必须在html中设置属性。我相信这样做的一个好方法是为元素添加一个预定义的css类。也就是说，在你的css中，你将为你想要的每种风格设置一个课程，并且你将在你的html中添加你想要的那个。

代码示例：

<div class={{ my_style_class_red }}>
 ....
</div>

编辑：如果您有大量选项（例如，如果要自定义元素的大小），则应使用<style>标记并使用python变量修改其参数。

代码示例：

<style>
   h1 {color:{{my_color}};}
   p {color:blue;font-size:{{my_font_size}};}
</style>

Answer 3

在标签 <style> 中执行但在 css 中使用“var”，因此您的 html 不会检测到错误

<style>
  :root {
    --color: {{object.color}};
  }
  li:before{
    content: "\2022";
    color: var(--color);

  }
</style>

Django - css文件中的模板标签

3 个答案: