时间戳

首页 > 解决方案 > Django以错误的顺序呈现模板块

django - Django以错误的顺序呈现模板块

问题描述

我在 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 中向下移动。我也看到其他块的这种行为。我很想知道为什么会发生这种情况以及如何避免它。

标签： djangodjango-templates

解决方案

这不是 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>在第二个表格行中添加。）

推荐阅读