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。
✅ 正确做法一：使用内联条件表达式（推荐，简洁安全）
将颜色逻辑内聚在一行中，避免作用域问题：
⚠️ 注意：loop.index 从 1 开始计数（即第 1 条为奇数），因此 loop.index % 2 == 0 对应偶数项（如第 2、4、6 条），匹配你期望的蓝色 #e6f9ff；奇数项自动获得灰色 #eee。
✅ 更优解法二：用纯 CSS 实现（强烈推荐）
将样式逻辑完全交由 CSS 处理，提升可维护性、可读性与性能：
? 优势说明：
- ✅ 语义清晰：HTML 只负责结构，CSS 负责表现，符合关注点分离原则；
- ✅ 无需模板逻辑：避免 Jinja 变量作用域陷阱，也减少服务端渲染负担；
- ✅ 易于扩展：后续添加 hover、动画或响应式样式时，只需修改 CSS；
- ✅ 兼容性强：nth-child 在所有现代浏览器中稳定支持（包括 IE9+）。
? 补充提示：
- 若需兼容旧版 IE（
- Jinja2 中 loop.index0（从 0 开始）也可用于判断，此时偶数项对应 loop.index0 % 2 == 0；
- 避免在 style 属性中拼接大量动态值——复杂样式建议统一抽离至
综上，优先采用 CSS :nth-child() 方案；若必须用 Jinja 控制颜色，请始终确保 {% set %} 位于其使用位置的同一作用域层级，并优先选用内联条件表达式以规避作用域风险。
#{{ loop.index }}
{{ comment }}