如何根据某些条件更改jinja2条目的颜色？ （使用烧瓶）

Question

我刚刚完成了flask tutorial，一步一步地创建了一个博客Web应用程序。条目通过jinja模板呈现：

<ul class=entries>
    {% for entry in entries %}
        <li><h2>{{ entry.title }}</h2>{{ entry.text|safe }}
    {% else %}
        <li><em>Unbelievable.  No entries here so far</em>
    {% endfor %}
  </ul>

颜色在style.css中定义：

a, h1, h2       { color: #377ba8; }

但是，我真的希望能够根据条件切换条目的颜色。例如，如果entry.text是＆＃39; apples＆＃39;，则它应为红色，否则为绿色。

作为网络开发的血腥菜鸟，我觉得这样的东西可能是javascript，但我只是不知道如何完成这项任务，并感谢你的帮助。

最佳，

gbrown

Answer 1

首先，您应该在CSS中添加一条规则，以便通过在元素中应用类来更改颜色。像这样：

.apples {
    color: red;
}

然后，您需要根据class的值，使您的Jinja模板应用entry.text属性：

<ul class="entries">
    {% for entry in entries %}
        <li {% if entry.text == 'apples' %} class="apples" {% endif %}>
            <h2>{{ entry.title }}</h2>
            {{ entry.text|safe }}
        </li>
    {% else %}
        <li>
            <em>Unbelievable. No entries here so far.</em>
        </li>
    {% endfor %}
</ul>

这项技术在Jinja手册中有描述，例如主题“Highlighting Active Menu Items”。