Flask的Jinja模板渲染时内容被嵌套进strong标签如何解决？

问题根因 #

你遇到的异常是模板标签配对错误导致的DOM结构破损，以及可能存在的未转义HTML标签污染两种原因导致，浏览器在自动修复错位的DOM结构时，会错误插入<strong>标签包裹错位内容，和Jinja本身的渲染逻辑无关。

解决方案 #

1. 修复模板的标签配对逻辑 #

你当前的模板中，带背景的<div>开标签仅在article["main"] == 1时输出，但对应的闭合</div>是每个theme循环固定输出，会出现两种异常情况：

• 单个theme下存在多篇main=1的article：生成多个无对应闭合的div开标签，导致嵌套层级混乱
• 单个theme下没有main=1的article：出现无对应开标签的闭合</div>，触发浏览器DOM自动纠错逻辑

修正后的模板参考如下，确保开闭标签一一对应：

{% for theme in article_data %}
    {# 提前判断当前主题是否存在标记为main的文章 #}
    {% set has_main = theme.article | selectattr('main', 'equalto', 1) | list | length > 0 %}
    {% if has_main %}
        {% set main_article = theme.article | selectattr('main', 'equalto', 1) | first %}
        <div style="background-image: url('{{ main_article.content.image1 }}');" class="theme-item-bg frow space-between">
    {% endif %}
        <div class="wrapper-row space-between pinkfilter">
            <div class="uB theme-item-text">{{ theme.name }}</div>
            <div class="pageChanger waves-effect waves-light btn uL primaryB" page="/nos-articles/{{ theme.name }}" title="{{ theme.name }}">Voir plus d'articles</div>    
        </div>
    {% if has_main %}
        </div>
    {% endif %}
{% endfor %}

2. 检查变量输出的转义配置 #

如果输出的theme.name、article相关字段中包含用户提交的富文本内容，未转义的未闭合<strong>标签会直接插入DOM结构，导致后续内容全部被嵌套：

• 保持Flask默认的AUTOESCAPE配置开启，不要手动关闭自动转义
• 如果不需要输出HTML内容，可使用striptags过滤器移除变量中的所有HTML标签：
  示例：{{ theme.name | striptags }}

3. 排查特殊页面的独有的数据问题 #

即使整体数据结构一致，也需要检查异常页面对应数据中是否存在包含未闭合HTML标签的字段，可通过浏览器开发者工具的Elements面板查看<strong>标签出现的起始位置，快速定位污染源。

内容的提问来源于stack exchange，提问作者Stephen Milic