Django以错误的顺序呈现模板块答案

【问题标题】：Django renders template blocks in wrong orderDjango以错误的顺序呈现模板块
【发布时间】：2021-06-19 15:12:25
【问题描述】：

我在 Django 中渲染模板时遇到问题。块似乎没有出现在定义它们的 DOM 位置。这是我的代码：

我正在使用基本模板 (base.html)：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Partwell Transactional Email</title>
        <style>
        ...
        </style>
    </head>

    <body>
        <span class="preheader">Partwell email</span>
        <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
            <tr>
                <td>&nbsp;</td>
                <td class="container">
                    <div class="content">
                        <!-- START MAIN CONTENT AREA -->
                        <div class="content-main">
                            {% block content %} {% endblock content %}
                            {% block content_extended %} {% endblock content_extended %}
                        </div>
                        <!-- END MAIN CONTENT AREA -->
                        {% block unsubscribe %} {% endblock unsubscribe %}
                        <!-- START FOOTER -->
                        <div class="footer">
                            <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td class="content-block">
                                        {% block behalf %} {% endblock behalf %}
                                    </td>
                                </tr>
                                <tr>
                                    <br />
                                    <span class="apple-link">********Amtsgericht Charlottenburg *********</span>
                                    <span class="apple-link">&nbsp;*****</span>
                                    <br />
                                </tr>
                            </table>
                        </div>
                        <!-- END FOOTER -->
                    </div>
                </td>
                <td>&nbsp;</td>
            </tr>
        </table>
    </body>
</html>

还有一个扩展基本模板的模板。此模板也是所有交易电子邮件的基本模板 (tenant-base.html)：

{% extends "base.html" %}
{% block behalf %}
    This email was sent on behalf of {{ tenant.name }}.
{% endblock behalf %}

最终，我使用tenant-base.html 来创建最终模板：

{% extends "tenant-base.html" %}

{% block content %}
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="main">
        <tr>
            [...]
        </tr>
    </table>
{% endblock content %}

最终的结果是这样的：

您可以看到behalf 块被渲染得比最初定义的要低。它不是模板中定义的最后一行，但它在 dom 中向下移动。我也看到其他块的这种行为。我很想知道为什么会发生这种情况以及如何避免它。

【问题讨论】：

标签： django django-templates

【解决方案1】：

这不是 Django 模板问题，而是因为您的 <tr>...</tr> 之一内部没有 <td>...</td>。

如果我把你的页脚改成这个就可以了：

<div class="footer">
    <table role="presentation" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td class="content-block">
                {% block behalf %} {% endblock behalf %}
            </td>
        </tr>
        <tr>
            <td>
                <br />
                <span class="apple-link">********Amtsgericht Charlottenburg *********</span>
                <span class="apple-link">&nbsp;*****</span>
                <br />
            </td>
        </tr>
    </table>
</div>

（请注意表格第二行添加的<td>...</td>。）

【讨论】：

谢谢！这是一个很大的帮助！