在flask專案中實現上圖效果，採用使用自定義過濾器的形式對 span 標籤的 class 指定。

1、定義過濾器

# common.py

def do_index_class(index):
    """自定義過濾器"""
    if index == 0:
        return "first"
    elif index == 1:
        return "second"
    elif index == 2:
        return "third"
    else:
        return ""

2、在 flask 專案 app 建立的函式裡面註冊過濾器

from info.utils.common import do_index_class
# 新增自定義過濾器
app.add_template_filter(do_index_class, "index_class")

3、 index.html 中使用自定義過濾器（loop.index0 | indexClass ）

loop.index0:當前迴圈的索引

{% for news in data.click_news_list %}
    <li><span class="{{ loop.index0 | indexClass }}"
 
>{{ loop.index }}</span></li>
{% endfor %}

4、檢視

@app.route('/')
def index():
    data = {
        "click_news_list": ['aaa', 'bbb','ccc'],
    }
    return render_template('./index.html', data=data)

5、css

.first{
    background: #f33;
    color:#fff;
}

.second{
    background:
 
#ff722b;
    color:#fff;
}

.third{
    background:#fa3;
    color:#fff;