Jinja变量传递HTML语法无法渲染及动态树渲染方案咨询

数据老陈

2026-9-29

问题解答

一、Jinja变量中HTML语法正常渲染的方法

你遇到的原始HTML输出是Django/Jinja的默认自动转义机制导致的：为了避免XSS跨站脚本攻击，模板会默认把变量中的HTML特殊字符转义成普通文本显示。
你可以通过两种方式关闭对应变量的转义：

模板层添加safe过滤器：直接修改index.html的变量调用语法即可

<div class="container-fluid">
    {{ test|safe }}
</div>

视图层提前标记安全字符串：在views.py中用mark_safe方法包裹HTML字符串，模板无需额外修改

from django.utils.safestring import mark_safe

test = mark_safe("<h2>Hi This is from django</h2><ol><li>abc</li><li>mno</li><li>xyz</li></ol>")

注意：如果你的HTML字符串中包含用户提交的未过滤内容，关闭转义会有XSS注入风险，请务必提前对内容做安全校验。

二、动态树的更优实现方案

手动在后端拼接HTML字符串维护成本高、容易出错，针对从数据库读取的动态树结构，更推荐以下两种实现方式：

方案1：Jinja宏递归渲染

Jinja支持宏的自调用，完全可以实现递归渲染树结构，不需要手动拼接HTML：

视图层只需要把从数据库查询到的树形结构化数据（每个节点包含内容、子节点列表字段即可）传给模板，不需要处理HTML逻辑
模板中定义递归宏处理节点渲染，示例如下：

{% macro render_node(node) %}
<li class="tree-node">
  <span>{{ node.name }}</span>
  {% if node.children %}
  <ul class="child-node-list">
    {% for child in node.children %}
      {{ render_node(child) }}
    {% endfor %}
  </ul>
  {% endif %}
</li>
{% endmacro %}

<!-- 渲染整棵树 -->
<ul class="tree-root">
{% for root in tree_data %}
  {{ render_node(root) }}
{% endfor %}
</ul>