Python后端传值至HTML模板时Jinja2内联样式语法报错求助

核心问题 #

你在模板中直接使用{{ card_heights }}会把整个列表渲染成字符串（比如[312, 330, 325]），导致CSS的height属性值变成height: [312, 330, 325]px，这是完全无效的CSS语法，进而触发Jinja2的解析报错。

修复步骤 #

1. 修正后端代码细节：
   首先，Python的random()函数返回0-1的浮点数，你需要300-340的整数，应该用random.randint()；另外避免用内置函数list做变量名，防止冲突：

   import random
   
   card_heights = [random.randint(300, 340) for _ in range(len(games_list))]
   return render_template(
       'search_results.html',
       games_list=games_list,
       platform_to_image=platform_to_image,
       card_heights=card_heights
   )
   

2. 模板中配对遍历数据：
   在模板里用zip把游戏列表和高度列表配对，取出每个卡片对应的单个高度值：

   {% for game, height in zip(games_list, card_heights) %}
       <div class="card h-100 m-2" style="border-radius: 13px; width: 304.8px; height: {{ height }}px;">
           <!-- 卡片内容，比如游戏名称、封面等 -->
       </div>
   {% endfor %}
   

   如果Jinja2未默认启用zip，改用过滤器写法：

   {% for game, height in games_list|zip(card_heights) %}
       <!-- 同上卡片代码 -->
   {% endfor %}
   

内容的提问来源于stack exchange，提问作者Luis Pereira