在 jinja2 模板中，`{% set %}` 定义的变量具有块级作用域，若在 `if-else` 内部赋值，外部无法访问，导致 `{{ bg_color }}` 报错；应改用单行条件表达式或改用 css `:nth-child()` 实现奇偶交替样式。
Jinja2 的变量作用域规则常被初学者忽略：在 {% if %}...{% else %}...{% endif %} 块内通过 {% set bg_color = '...' %} 声明的变量，仅在该块内部有效。因此，当模板执行到 background-color: {{ bg_color }} 时，该变量已超出作用域，Jinja2 会报 undefined variable 错误（如 jinja2.exceptions.UndefinedError）。
✅ 正确做法是将变量声明提升至循环体顶层，并使用 Jinja2 的内联条件表达式（ternary-like syntax）：
<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><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/2019" title="飞书多维表格"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175679978185950.png" alt="飞书多维表格" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/2019" title="飞书多维表格">飞书多维表格</a>
<p>表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版</p>
</div>
<a href="/ai/2019" title="飞书多维表格" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p style="font-size: 24px">{{ comment }}</p>
</div>
{% endfor %}
</div>? 注意：loop.index 从 1 开始计数（即第 1 条为奇数），因此 loop.index % 2 == 0 对应偶数项（如第 2、4、6 条），匹配蓝色 #e6f9ff；其余为灰色 #eee。
⚠️ 更推荐的工程化方案：完全交由 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;
background-color: #e6f9ff; /* 默认偶数项背景 */
margin: 20px;
}
.comments > div:nth-child(odd) {
background-color: #eee; /* 奇数项覆盖为灰色 */
}
.comment-text {
font-size: 24px;
margin: 0;
}
</style>? 优势说明：
- ✅ 作用域无忧：无需在模板中管理变量生命周期；
- ✅ 可维护性强：样式集中于
- ✅ 语义更佳：HTML 专注结构，CSS 专注表现；
- ✅ 兼容性好：nth-child 在现代浏览器中广泛支持（包括所有 Flask 默认适配的前端环境）。
? 小结：Jinja2 不是 JavaScript，其变量不具备函数/块外提升特性。遇到类似问题，优先考虑——
① 是否可通过内联表达式简化变量声明；
② 是否更适合交由 CSS（如 :nth-child, :nth-of-type）或前端框架处理；
③ 避免在模板中编写复杂逻辑，保持视图层轻量、可测试、易协作。
