Jinja2为何忽略初始变量格式？Flask模板CSS渲染异常解决方案

为什么会出现这个问题？ #

这其实是HTML属性解析规则和Jinja2渲染逻辑共同导致的小坑：
你写的代码<div class="column" style= {{ column.color }}>里，style属性没有用引号包裹整个值，而column.color的内容background: lightgreen包含空格。Jinja2渲染后会输出style= background: lightgreen，HTML解析器看到空格后，会把background:当成style的属性值，剩下的lightgreen被误判为一个新的HTML属性，最终就变成了style="background:" lightgreen=""这种错误结构，CSS自然无法生效。

怎么解决？ #

只需要把Jinja2变量放在style属性的引号内部就行，修改后的代码如下：

<div class="column" style="{{ column.color }}">

这样Jinja2会把column.color的完整值插入到引号中，渲染后的HTML就是符合预期的：

<div class="column" style="background: lightgreen">

浏览器就能正确识别这个style属性，背景色也会正常显示为浅绿色。

如果你的column.color是动态生成的内容，只要确保它是安全的（没有恶意代码风险），直接这么写就没问题，不需要额外的过滤器——毕竟核心问题就是缺少属性引号导致的解析错误，不是内容转义的问题。

内容的提问来源于stack exchange，提问作者John Mitchell