Jinja2 电子邮件模板

Question

我正在尝试使用 Jijna2 制作响应式 HTML 电子邮件模板，它几乎很简单

<!DOCTYPE html>
<html>
    <body>
    <p><strong>Hello</strong>,</p>
    <p>Below are the deals running on <a href="https://www.{{ url }}.com">{{ url }}</a> at <strong>{{ date }}</strong>:</p>
    <p>&nbsp;</p>
    
    <ul>
        {% for image in images %}
          <a href="{{ image }}">
            <img src="{{ image }}" width=500" height="200">
          </a>
        {% endfor %}
    </ul>
    <p><strong>Regards,</strong></p>
    <p>Team</p>
    </body>
</html>

当前显示的是：

全屏时：

在这种情况下如何使其响应并保持图像一张一张的显示。全屏或移动屏幕时不能并排显示！

Answer 1

早上好，Ahmed，您可以插入 css 您需要做出响应的代码，如示例所示：

<style type="text/css">
    body {
        margin: 0;
        padding: 0;
    }

    table,
    td,
    tr {
        vertical-align: top;
        border-collapse: collapse;
    }

    * {
        line-height: inherit;
    }

    a[x-apple-data-detectors=true] {
        color: inherit !important;
        text-decoration: none !important;
    }
</style>
<style id="media-query" type="text/css">
    @media (max-width: 520px) {

        .block-grid,
        .col {
            min-width: 320px !important;
            max-width: 100% !important;
            display: block !important;
        }

Answer 2

您可以简单地在图像容器 li 上使用 class，然后使用 css

使 class 的宽度为 100%

所以在你的情况下：

<style>
.full-width{
    width: 100%;
}
</style>
<!DOCTYPE html>
<html>
    <body>
    <p><strong>Hello</strong>,</p>
    <p>Below are the deals running on <a href="https://www.{{ url }}.com">{{ url }}</a> at <strong>{{ date }}</strong>:</p>
    <p>&nbsp;</p>
    
    <ul>
        {% for image in images %}
          <li class="full-width">
          <a href="{{ image }}">
            <img src="{{ image }}" height="200">
          </a>
          </li>
        {% endfor %}
    </ul>
    <p><strong>Regards,</strong></p>
    <p>Team</p>
    </body>
</html>

应该可以解决问题。

Answer 3

我不认为这是响应式的，但为了让图像彼此重叠，您可以尝试将它们作为列表项并使用 list-style: none 隐藏列表项目符号，例如：

<!DOCTYPE html>
<html>
    <body>
    <p><strong>Hello</strong>,</p>
    <p>Below are the deals running on <a href="https://www.{{ url }}.com">{{ url }}</a> at <strong>{{ date }}</strong>:</p>
    <p>&nbsp;</p>
    
    <ul style="list-style: none">
      <li>
          <a href="#">
            <img src="https://via.placeholder.com/500x200" width=500" height="200">
          </a>
    <li/>
    <li>
          <a href="#">
            <img src="https://via.placeholder.com/500x200" width=500" height="200">
          </a>
    <li/>
    </ul>
    <p><strong>Regards,</strong></p>
    <p>Team</p>
    </body>
</html>

或者正如我在评论中告诉您的那样，使锚点 link 具有全宽，例如：<a href="{{ image }}" style="width:100%">

Jinja2 电子邮件模板

Jinja2 Email Template

html

python

django

jinja2

flask