如何使用Flask在列表中設置每個第1，第2，第3個帖子的顏色？

Question

我正在使用帶有引導程序的Flask Web框架，對於我的帖子枚舉，我有一個for（post）in（posts）循環輸出每個帖子的代碼。

我想讓每個第一個帖子都有一種顏色，每個第二個帖子另一個，等等。

我的本能方法是在循環之前聲明一個整數為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>

作為參考，回顧這個問題及其答案 ，以及nth-child例子和這個答案作為最高等級的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兼容的好處，盡管現在這是一個非常小的優勢。 主要的外賣點是您可以在模板中設置變量，並且可能存在其他可能有意義的情況。