如何在Flask中根据条件改变Jinja2条目的显示颜色？

嘿，不用急着上手JavaScript哦——其实用你已经在使用的Jinja模板就能轻松搞定这个需求，而且对新手来说更直接！下面给你两种可行的方案，按需选择：

方案一：用Jinja模板直接渲染（推荐） #

这种方法是在后端渲染页面的时候就直接给条目加上对应的样式类，前端不用额外处理，非常适合静态的博客条目。

1. 先在你的style.css里定义两个颜色类：

/* 匹配apples的红色样式 */
.entry-red {
  color: #ff4444;
}

/* 默认绿色样式 */
.entry-green {
  color: #00C851;
}

2. 然后在Jinja模板里，给每个条目元素添加条件判断的类：

{% for entry in entries %}
  <div class="blog-entry {% if entry.text == 'apples' %}entry-red{% else %}entry-green{% endif %}">
    {{ entry.text }}
  </div>
{% endfor %}

这样当entry.text等于apples时，元素会自动带上entry-red类，显示红色；其他情况则用entry-green类显示绿色。

方案二：用JavaScript动态处理（适合动态内容） #

如果你之后需要让条目内容可以在前端动态修改，并且实时切换颜色，那JavaScript就派上用场了。

在页面的<script>标签里（或者单独的JS文件中）添加这段代码：

// 等页面DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有博客条目元素
  const blogEntries = document.querySelectorAll('.blog-entry');
  
  blogEntries.forEach(entry => {
    // 去除文本前后的空格后判断
    const entryText = entry.textContent.trim();
    if (entryText === 'apples') {
      entry.style.color = '#ff4444';
    } else {
      entry.style.color = '#00C851';
    }
  });
});

对应的模板里只需要给条目统一加个类名就行：

{% for entry in entries %}
  <div class="blog-entry">
    {{ entry.text }}
  </div>
{% endfor %}

小提示 #

作为Web开发新手，优先试试方案一哦——因为你已经在写Jinja模板了，不用额外学习新的知识点，就能快速实现需求。如果之后有动态修改内容的场景，再用方案二也不迟～

内容的提问来源于stack exchange，提问作者G.Brown