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

Question

我刚刚完成了Flask教程，并逐步创建了博客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是'apples'，则应为红色，否则为绿色。

作为Web开发的血腥菜鸟，我觉得类似的东西可能是javascript，但我只是看不到如何完成此任务，因此感谢您的帮助。

最好，

棕褐色

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手册中进行了介绍，例如，主题为“突出显示活动菜单项”。