Flask Jinja使用{{bg_color}}设置奇偶评论背景色报错，求解决方案

问题分析 #

你遇到的错误大概率是Jinja的变量作用域导致的——在循环内通过{% set %}定义的变量，可能因为作用域限制无法被后续的style属性正确读取，尤其是在部分Jinja版本中，循环内的变量默认仅在当前代码块内有效。

解决方案 #

方案1：直接在style中使用条件表达式（最简便） #

不需要单独定义bg_color变量，直接把判断逻辑嵌入到background-color的取值中，彻底避免作用域问题：

{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Comments {% endblock %}</h1>
    <div style="width: 50%; margin: auto">
        {% for comment in comments %}
            <div style="padding: 10px; background-color: {{ '#e6f9ff' if loop.index % 2 == 0 else '#eee' }}; margin: 20px">
                <p>#{{ loop.index }}</p>
                <p style="font-size: 24px">{{ comment }}</p>
            </div>
        {% endfor %}
    </div>
{% endblock %}

方案2：使用CSS伪类分离样式（推荐，符合前后端分离原则） #

完全不用Jinja处理样式逻辑，通过CSS的:nth-child()伪类直接控制奇偶元素的背景色，代码更简洁易维护：

{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Comments {% endblock %}</h1>
    <div style="width: 50%; margin: auto" class="comments-container">
        {% for comment in comments %}
            <div class="comment-item">
                <p>#{{ loop.index }}</p>
                <p style="font-size: 24px">{{ comment }}</p>
            </div>
        {% endfor %}
    </div>
{% endblock %}

添加对应的CSS代码：

.comments-container .comment-item {
    padding: 10px;
    margin: 20px;
}
.comments-container .comment-item:nth-child(odd) {
    background-color: #eee;
}
.comments-container .comment-item:nth-child(even) {
    background-color: #e6f9ff;
}

方案3：显式声明变量作用域（针对Jinja2.10+） #

如果坚持要使用变量定义，可以简化变量声明的写法，确保变量在当前迭代内可访问：

{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Comments {% endblock %}</h1>
    <div style="width: 50%; margin: auto">
        {% for comment in comments %}
            {% set bg_color = '#e6f9ff' if loop.index % 2 == 0 else '#eee' %}
            <div style="padding: 10px; background-color: {{ bg_color }}; margin: 20px">
                <p>#{{ loop.index }}</p>
                <p style="font-size: 24px">{{ comment }}</p>
            </div>
        {% endfor %}
    </div>
{% endblock %}

说明 #

方案2是最优解，它将样式逻辑从模板中分离，符合前端开发的最佳实践，同时彻底避免了Jinja的变量作用域问题。如果你的Jinja版本较旧，方案1的内联条件表达式兼容性最好，几乎适配所有Jinja版本。

内容的提问来源于stack exchange，提问作者Hamza Khan