如何在Django模板中正确渲染嵌套字典与元组结构？

数据结构 #

我有如下嵌套字典结构：

{
'123': {'metric_1': [('url_1', 'caption_1'), ('url_2', 'caption_2'), ('url_3', 'caption_3'), ('url_4', 'caption_4')], 'metric_2': [('url_1', 'caption_1'), ('url_2', 'caption_2'), ('url_3', 'caption_3'), ('url_4', 'caption_4')]}, 
'456': {'metric_1': [('url_1', 'caption_1'), ('url_2', 'caption_2'), ('url_3', 'caption_3'), ('url_4', 'caption_4')], 'metric_2': [('url_1', 'caption_1'), ('url_2', 'caption_2'), ('url_3', 'caption_3'), ('url_4', 'caption_4')]},
'789': {'metric_1': [('url_1', 'caption_1'), ('url_2', 'caption_2'), ('url_3', 'caption_3'), ('url_4', 'caption_4')], 'metric_2': [('url_1', 'caption_1'), ('url_2', 'caption_2'), ('url_3', 'caption_3'), ('url_4', 'caption_4')]}, 
}

预期渲染效果 #

希望渲染成如下格式：

123
metric_1
url_1        url_2        url_3       url_4
caption_1    caption_2    caption_3   caption_4

metric_2
url_1        url_2        url_3       url_4
caption_1    caption_2    caption_3   caption_4


456
metric_1
url_1        url_2        url_3       url_4
caption_1    caption_2    caption_3   caption_4

metric_2
url_1        url_2        url_3       url_4
caption_1    caption_2    caption_3   caption_4


789
metric_1
url_1        url_2        url_3       url_4
caption_1    caption_2    caption_3   caption_4

metric_2
url_1        url_2        url_3       url_4
caption_1    caption_2    caption_3   caption_4

当前模板代码 #

我现在用的模板代码如下：

<div class="grid grid-cols-2 gap-2 p-2">
{% for one_analysis_id, all_metrics in url_dict.items %}
<table>
    <tr><p>Analysis ID: {{ one_analysis_id }}</p></tr>
    {% for metric_name, url_and_caption_tuple_list in all_metrics.items %}
        <tr><p>{{ metric_name }}</p></tr>
        <tr>
        {% for url_and_caption_tuple in url_and_caption_tuple_list %}
            <td><img width="350" height="300" src="{{ url_and_caption_tuple.0 }}"><div>{{ url_and_caption_tuple.1 }}</div></td>
        {% endfor %}
        </tr>
    {% endfor %}
</table>
{% endfor %}
</div>

当前错误效果 #

现在渲染出来的效果是所有metric名称先全部显示，再显示对应的图片和标题，不符合预期：

123
metric_1
metric_2
url_1        url_2        url_3       url_4
caption_1    caption_2    caption_3   caption_4

url_1        url_2        url_3       url_4
caption_1    caption_2    caption_3   caption_4


456
metric_1
metric_2
url_1        url_2        url_3       url_4
caption_1    caption_2    caption_3   caption_4

url_1        url_2        url_3       url_4
caption_1    caption_2    caption_3   caption_4


789
metric_1
metric_2
url_1        url_2        url_3       url_4
caption_1    caption_2    caption_3   caption_4

url_1        url_2        url_3       url_4
caption_1    caption_2    caption_3   caption_4

解决方案 #

问题出在HTML表格的结构上：<p>标签直接放在<tr>里不符合规范，浏览器会把这些<p>标签移出表格，导致metric名称全部堆积显示。需要调整结构，改用更灵活的HTML布局配合CSS来实现预期效果。

修改后的模板代码如下：

<div class="grid grid-cols-2 gap-2 p-2">
{% for one_analysis_id, all_metrics in url_dict.items %}
    <div class="analysis-group">
        <h3>{{ one_analysis_id }}</h3>
        {% for metric_name, url_and_caption_tuple_list in all_metrics.items %}
            <div class="metric-group">
                <h4>{{ metric_name }}</h4>
                <div class="image-grid">
                    {% for url_and_caption_tuple in url_and_caption_tuple_list %}
                        <div class="image-item">
                            <img width="350" height="300" src="{{ url_and_caption_tuple.0 }}">
                            <div>{{ url_and_caption_tuple.1 }}</div>
                        </div>
                    {% endfor %}
                </div>
                <br>
            </div>
        {% endfor %}
        <br><br>
    </div>
{% endfor %}
</div>

配套CSS样式（用于保证排版整齐）：

.image-grid {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.image-item {
    text-align: center;
}

说明 #

1. 放弃表格结构，改用<div>配合Flex布局，避免浏览器自动调整DOM结构导致的排版错误，同时更灵活可控。
2. 每个分析ID作为独立分组，每个metric作为子分组，先显示metric名称，再展示对应的图片和标题，完全匹配预期的顺序。
3. 通过<br>或CSS margin控制不同分组间的间隔，实现预期的换行效果。

内容的提问来源于stack exchange，提问作者Fisher Coder