Question

我正在使用带有引导程序的Flask Web框架，对于我的帖子枚举，我在每个（帖子）中都有一个（post）循环输出每个帖子的代码。

我希望每个第一篇文章都是一种颜色，每一篇文章都是另一种颜色，等等。

我的本能方法是在循环之前声明一个整数1，然后修改3该整数来决定发布哪个颜色，然后递增整数。

然而，Flask不会让我声明一个整数i = 0，如此

{{ i = 0 }}

对于这里的人来说，这可能是非常错误的，但我并不完全知道我可以用{{}}做些什么。

任何人都可以告诉我，如果我的方法是完全关闭的，还有另一种更简单的方法可以做到这一点，或者我对自己的做法做错了什么？

Answer 1

如果您想要设计样式，只需使用CSS。

<style type="text/css">
    ul li:nth-child(2) {
        background-color: grey;
    }
</style>

和

<ul>
{% for item in list %}
    <li>{{ item }}</li>
{% endfor %}
</ul>

如需参考，请查看this question and its answers，了解nth-child和this answer作为评分最高的nth-child答案的示例。

Answer 2

最好使用CSS选择器nth-child完成。使用类似的东西：

ul.striped li:nth-child(3n + 0) {
    background: red;
}

ul.striped li:nth-child(3n + 1) {
    background: blue;
}

ul.striped li:nth-child(3n + 2) {
    background: yellow;
}

class="striped"列表现在将使用三种颜色。

Answer 3

为了完整起见，我会加上这个。这不是您可能希望在模板中保留计数器的唯一情况，尽管{{}}不允许您设置变量是正确的，但Flask（jinja2）将允许您使用{％ set =％}。因此，您可以使用模板系统实现所需的结果，以根据生成的类名有条件地分配类和样式。例如，在红色和绿色行之间交替：

{% set count = 0 %}
{% for i in my_list %}
  {% if count % 2 %}
  <li class="odd">
  {% else %}
  <li class="even">
  {% endif %}
  {{ i }}
  </li>
  {% set count = count + 1 %}
{% endfor %}

CSS：

li.odd{ background-color: #f00; }
li.even{ background-color: #0f0; }

这有IE8兼容的好处，尽管现在这是一个非常小的优势。主要的一点是，您可以在模板中设置变量，并且可能存在其他可以理解的情况。

如何使用Flask在列表中设置每个第1，第2，第3个帖子的颜色？

3 个答案: