jinja2 中变量作用域有限，`{% set %}` 在 if-else 块内定义的变量无法在块外访问，导致 `{{ bg_color }}` 报错；应改用单行条件赋值，或更推荐使用 css `:nth-child()` 实现语义化、可维护的奇偶样式分离。
在 Flask 的 Jinja2 模板中，直接在 if-else 块内使用 {% set bg_color = '...' %} 会导致变量作用域受限——Jinja2（尤其是 3.0+ 版本）默认将 {% set %} 定义的变量限制在当前作用域块（如 {% if %}...{% endif %}）内，因此后续 {{ bg_color }} 会因变量未定义而抛出 UndefinedError。
✅ 正确做法一：使用内联条件表达式（推荐，简洁安全）
将颜色逻辑内聚在一行中，避免作用域问题：
<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>⚠️ 注意：loop.index 从 1 开始计数（即第 1 条为奇数），因此 loop.index % 2 == 0 对应偶数项（如第 2、4、6 条），匹配你期望的蓝色 #e6f9ff；奇数项自动获得灰色 #eee。
✅ 更优解法二：用纯 CSS 实现（强烈推荐）
将样式逻辑完全交由 CSS 处理，提升可维护性、可读性与性能：
<div class="comments">
{% for comment in comments %}
<div>
<p>#{{ loop.index }}</p>
<p class="comment-text">{{ comment }}</p>
</div>
{% endfor %}
</div>
<style type="text/css">
.comments {
width: 50%;
margin: auto;
}
.comments > div {
padding: 10px;
margin: 20px;
background-color: #e6f9ff; /* 默认：偶数项 */
}
.comments > div:nth-child(odd) {
background-color: #eee; /* 覆盖：奇数项 */
}
.comment-text {
font-size: 24px;
margin: 0;
}
</style>? 优势说明：
- ✅ 语义清晰：HTML 只负责结构，CSS 负责表现，符合关注点分离原则；
- ✅ 无需模板逻辑：避免 Jinja 变量作用域陷阱，也减少服务端渲染负担；
- ✅ 易于扩展：后续添加 hover、动画或响应式样式时，只需修改 CSS；
- ✅ 兼容性强：nth-child 在所有现代浏览器中稳定支持（包括 IE9+）。
? 补充提示：
- 若需兼容旧版 IE（<9），可回退至 JavaScript 动态添加 class，但 Flask 场景下通常无需考虑；
- Jinja2 中 loop.index0（从 0 开始）也可用于判断，此时偶数项对应 loop.index0 % 2 == 0；
- 避免在 style 属性中拼接大量动态值——复杂样式建议统一抽离至 <style> 或外部 CSS 文件。
综上，优先采用 CSS :nth-child() 方案；若必须用 Jinja 控制颜色，请始终确保 {% set %} 位于其使用位置的同一作用域层级，并优先选用内联条件表达式以规避作用域风险。
