Django - css 文件中的模板标签答案

【问题标题】：Django - Template tags inside css fileDjango - css 文件中的模板标签
【发布时间】：2015-12-21 23:39:13
【问题描述】：

我正在尝试根据我正在使用的 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 变得丑陋且难以调试。

【问题讨论】：

您可以在 <style> 标记中执行此操作，但我不确定这是否是最佳做法

标签： python css django

【解决方案1】：

没有办法修改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>

【讨论】：

我也想过这个问题，但是如果其中一个设置（即侧边栏宽度）是完全可定制的，那么您需要半无限数量的类，这对我来说似乎很奇怪。不过，如果您有四五个不同的选项，这将起作用。
在这种情况下，您应该修改
您也可以修改元素标签中的样式，例如
，但正如@wilbur 所指出的，您已经说过您没有不想用那个。

【解决方案2】：

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

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

  }
</style>

【讨论】：

【解决方案3】：

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

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

       ...

    }
</stlye>

【讨论】：

【解决方案4】：

有同样的问题，对我来说，我不得不在 base.html 中使用样式标签

<style>
@font-face {
    font-family: "Booter - Zero Zero";
    src: url('../static/fonts/Booter\ -\ Zero\ Zero.woff') format('woff'), url('../static/fonts/Booter\ -\ Zero\ Zero.woff2') format('woff2');

    font-weight: normal;
    font-style: normal;
}

.main-header {
    background-color: rgba(0, 0, 0, .6);
    background-image: url(static/images/header_background.jpg);
    background-blend-mode: multiply;
    background-size: cover;
    padding-bottom: 30px;
}

【讨论】：