Django HTML 电子邮件模板不会在电子邮件中加载 css-6ren

Django HTML 电子邮件模板不会在电子邮件中加载 css

转载作者：行者123 更新时间：2023-12-03 14:48:54

我正在从 Django 发送 HTML 电子邮件，如下所示:

template_html = "email/deposit_email.html"
                email_context = Context({ 'contact': contact, 'amount': amount})

                subject, from_email, to = 'Deposit Successfully created.', settings.EMAIL_HOST_USER, contact_email
                text_content = "Thank you for depositing the amount of " + str(amount) + "."

                html = loader.get_template(template_html)
                html_content = html.render(email_context)
                msg = EmailMultiAlternatives(subject, text_content, from_email, [to])
                msg.attach_alternative(html_content, "text/html")
                msg.send()

我收到一封没有任何 css 的电子邮件。我使用以下方法在 Django 中加载了模板本身:

return render(request, 'templatename_html')

该模板在 django 中的所有 css 都正确加载，但在 gmail 中发送电子邮件时却没有。怎么了？

最佳答案

正如其他开发人员提到的电子邮件客户端不加载外部 css，因此您必须内联它。手动内联 css 是一个糟糕的决定。有一些库可以内联 css。其中之一是django-inlinecss .您可以保持代码原样。您需要做的就是安装 django-inlinecss 并更改“deposit_email.html”。我不知道它看起来如何，因为你还没有发布它，所以我给你一个简单的标题例子，比如我以前成功使用过的电子邮件模板。

{% load inlinecss %}
{% inlinecss "css/email.css" %}

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
  <table class="body">
    <tr>
      <td class="center" align="center" valign="top">
        <center>

          <table class="row header">
            <tr>
              <td class="center" align="center">
                <center>

                  <table class="container">
                    <tr>
                      <td class="wrapper last">

                        <table class="twelve columns">
                          <tr>
                            <td>
                              <img src="your_header_link">
                            </td>
                            <td class="expander"></td>
                          </tr>
                        </table>

                      </td>
                    </tr>
                  </table>

                </center>
              </td>
            </tr>
          </table>

          <table class="container">
            <tr>
              <td>
                <table class="row">
                  <tr>
                    <td class="wrapper last">

                      <table class="twelve columns">
                        <tr>
                          <td>

                            {% block content %} Email {% endblock %}

                            <td class="expander"></td>
                        </tr>
                      </table>

                      </td>
                  </tr>
                </table>
                </td>
            </tr>
          </table>

        </center>
        </td>
    </tr>
  </table>
</body>

</html>
{% endinlinecss %}

这里没有太多事情发生。第一行加载 inlinecss 标签。

{% load inlinecss %}

第二行以 html 开头，这将是 css 内联的。它还加载 email.css，它可以是 django 项目中的任何静态文件。

{% inlinecss "css/email.css" %}

在基于表格的模板之后，该模板具有带有 Django 块“内容”的标题和正文。
最后一行是

{% endinlinecss %}

内联结束。如您所见，我内联了整个模板。我建议拥有一个或多个包含模板结构的父电子邮件模板，而不是对特定电子邮件使用模板继承。通过这种方式，您需要指定模板并内联您的 css 一次。

最后但并非最不重要的。为了让表格模板很好地发挥作用，您需要 email.css 样式。 CSS 有点大，但本质上很简单。在此基础上添加您自己的样式。

        #outlook a {
            padding: 0;
        }

        body {
            width: 100% !important;
            min-width: 100%;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            margin: 0;
            padding: 0;
        }

        .ExternalClass {
            width: 100%;
        }

        .ExternalClass,
        .ExternalClass p,
        .ExternalClass span,
        .ExternalClass font,
        .ExternalClass td,
        .ExternalClass div {
            line-height: 100%;
        }

        #backgroundTable {
            margin: 0;
            padding: 0;
            width: 100% !important;
            line-height: 100% !important;
        }

        img {
            outline: none;
            text-decoration: none;
            -ms-interpolation-mode: bicubic;
            width: auto;
            max-width: 100%;
            float: left;
            clear: both;
            display: block;
        }

        center {
            width: 100%;
            min-width: 580px;
        }

        a img {
            border: none;
        }

        p {
            margin: 0 0 0 10px;
        }

        table {
            border-spacing: 0;
            border-collapse: collapse;
        }

        td {
            word-break: normal;
            -webkit-hyphens: auto;
            -moz-hyphens: auto;
            hyphens: auto;
            border-collapse: collapse !important;
        }

        table, tr, td {
            padding: 0;
            vertical-align: top;
            text-align: left;
        }

        hr {
            color: #d9d9d9;
            background-color: #d9d9d9;
            height: 1px;
            border: none;
        }

        /* Responsive Grid */

        table.body {
            height: 100%;
            width: 100%;
        }

        table.container {
            width: 580px;
            margin: 0 auto;
            text-align: inherit;
        }

        table.row {
            padding: 0px;
            width: 100%;
            position: relative;
        }

        table.container table.row {
            display: block;
        }

        td.wrapper {
            padding: 10px 20px 0px 0px;
            position: relative;
        }

        table.columns,
        table.column {
            margin: 0 auto;
        }

        table.columns td,
        table.column td {
            padding: 0px 0px 10px;
        }

        table.columns td.sub-columns,
        table.column td.sub-columns,
        table.columns td.sub-column,
        table.column td.sub-column {
            padding-right: 10px;
        }

        td.sub-column, td.sub-columns {
            min-width: 0px;
        }

        table.row td.last,
        table.container td.last {
            padding-right: 0px;
        }

        table.one {
            width: 30px;
        }

        table.two {
            width: 80px;
        }

        table.three {
            width: 130px;
        }

        table.four {
            width: 180px;
        }

        table.five {
            width: 230px;
        }

        table.six {
            width: 280px;
        }

        table.seven {
            width: 330px;
        }

        table.eight {
            width: 380px;
        }

        table.nine {
            width: 430px;
        }

        table.ten {
            width: 480px;
        }

        table.eleven {
            width: 530px;
        }

        table.twelve {
            width: 580px;
        }

        table.one center {
            min-width: 30px;
        }

        table.two center {
            min-width: 80px;
        }

        table.three center {
            min-width: 130px;
        }

        table.four center {
            min-width: 180px;
        }

        table.five center {
            min-width: 230px;
        }

        table.six center {
            min-width: 280px;
        }

        table.seven center {
            min-width: 330px;
        }

        table.eight center {
            min-width: 380px;
        }

        table.nine center {
            min-width: 430px;
        }

        table.ten center {
            min-width: 480px;
        }

        table.eleven center {
            min-width: 530px;
        }

        table.twelve center {
            min-width: 580px;
        }

        table.one .panel center {
            min-width: 10px;
        }

        table.two .panel center {
            min-width: 60px;
        }

        table.three .panel center {
            min-width: 110px;
        }

        table.four .panel center {
            min-width: 160px;
        }

        table.five .panel center {
            min-width: 210px;
        }

        table.six .panel center {
            min-width: 260px;
        }

        table.seven .panel center {
            min-width: 310px;
        }

        table.eight .panel center {
            min-width: 360px;
        }

        table.nine .panel center {
            min-width: 410px;
        }

        table.ten .panel center {
            min-width: 460px;
        }

        table.eleven .panel center {
            min-width: 510px;
        }

        table.twelve .panel center {
            min-width: 560px;
        }

        .body .columns td.one,
        .body .column td.one {
            width: 8.333333%;
        }

        .body .columns td.two,
        .body .column td.two {
            width: 16.666666%;
        }

        .body .columns td.three,
        .body .column td.three {
            width: 25%;
        }

        .body .columns td.four,
        .body .column td.four {
            width: 33.333333%;
        }

        .body .columns td.five,
        .body .column td.five {
            width: 41.666666%;
        }

        .body .columns td.six,
        .body .column td.six {
            width: 50%;
        }

        .body .columns td.seven,
        .body .column td.seven {
            width: 58.333333%;
        }

        .body .columns td.eight,
        .body .column td.eight {
            width: 66.666666%;
        }

        .body .columns td.nine,
        .body .column td.nine {
            width: 75%;
        }

        .body .columns td.ten,
        .body .column td.ten {
            width: 83.333333%;
        }

        .body .columns td.eleven,
        .body .column td.eleven {
            width: 91.666666%;
        }

        .body .columns td.twelve,
        .body .column td.twelve {
            width: 100%;
        }

        td.offset-by-one {
            padding-left: 50px;
        }

        td.offset-by-two {
            padding-left: 100px;
        }

        td.offset-by-three {
            padding-left: 150px;
        }

        td.offset-by-four {
            padding-left: 200px;
        }

        td.offset-by-five {
            padding-left: 250px;
        }

        td.offset-by-six {
            padding-left: 300px;
        }

        td.offset-by-seven {
            padding-left: 350px;
        }

        td.offset-by-eight {
            padding-left: 400px;
        }

        td.offset-by-nine {
            padding-left: 450px;
        }

        td.offset-by-ten {
            padding-left: 500px;
        }

        td.offset-by-eleven {
            padding-left: 550px;
        }

        td.expander {
            visibility: hidden;
            width: 0px;
            padding: 0 !important;
        }

        table.columns .text-pad,
        table.column .text-pad {
            padding-left: 10px;
            padding-right: 10px;
        }

        table.columns .left-text-pad,
        table.columns .text-pad-left,
        table.column .left-text-pad,
        table.column .text-pad-left {
            padding-left: 10px;
        }

        table.columns .right-text-pad,
        table.columns .text-pad-right,
        table.column .right-text-pad,
        table.column .text-pad-right {
            padding-right: 10px;
        }

        /* Block Grid */

        .block-grid {
            width: 100%;
            max-width: 580px;
        }

        .block-grid td {
            display: inline-block;
            padding: 10px;
        }

        .two-up td {
            width: 270px;
        }

        .three-up td {
            width: 173px;
        }

        .four-up td {
            width: 125px;
        }

        .five-up td {
            width: 96px;
        }

        .six-up td {
            width: 76px;
        }

        .seven-up td {
            width: 62px;
        }

        .eight-up td {
            width: 52px;
        }

        /* Alignment & Visibility Classes */

        table.center, td.center {
            text-align: center;
        }

        h1.center,
        h2.center,
        h3.center,
        h4.center,
        h5.center,
        h6.center {
            text-align: center;
        }

        span.center {
            display: block;
            width: 100%;
            text-align: center;
        }

        img.center {
            margin: 0 auto;
            float: none;
        }

        .show-for-small,
        .hide-for-desktop {
            display: none;
        }

        /* Typography */

        body, table.body, h1, h2, h3, h4, h5, h6, p, td {
            color: #222222;
            font-family: "Helvetica", "Arial", sans-serif;
            font-weight: normal;
            padding: 0;
            margin: 0;
            text-align: left;
            line-height: 1.3;
        }

        h1, h2, h3, h4, h5, h6 {
            word-break: normal;
        }

        h1 {
            font-size: 40px;
        }

        h2 {
            font-size: 36px;
        }

        h3 {
            font-size: 32px;
        }

        h4 {
            font-size: 28px;
        }

        h5 {
            font-size: 24px;
        }

        h6 {
            font-size: 20px;
        }

        body, table.body, p, td {
            font-size: 14px;
            line-height: 19px;
        }

        p.lead, p.lede, p.leed {
            font-size: 18px;
            line-height: 21px;
        }

        p {
            margin-bottom: 10px;
        }

        small {
            font-size: 10px;
        }

        a {
            color: #2ba6cb;
            text-decoration: none;
        }

        a:hover {
            color: #2795b6 !important;
        }

        a:active {
            color: #2795b6 !important;
        }

        a:visited {
            color: #2ba6cb !important;
        }

        h1 a,
        h2 a,
        h3 a,
        h4 a,
        h5 a,
        h6 a {
            color: #2ba6cb;
        }

        h1 a:active,
        h2 a:active,
        h3 a:active,
        h4 a:active,
        h5 a:active,
        h6 a:active {
            color: #2ba6cb !important;
        }

        h1 a:visited,
        h2 a:visited,
        h3 a:visited,
        h4 a:visited,
        h5 a:visited,
        h6 a:visited {
            color: #2ba6cb !important;
        }

        /* Panels */

        .panel {
            background: #f2f2f2;
            border: 1px solid #d9d9d9;
            padding: 10px !important;
        }

        .sub-grid table {
            width: 100%;
        }

        .sub-grid td.sub-columns {
            padding-bottom: 0;
        }

        /* Buttons */

        table.button,
        table.tiny-button,
        table.small-button,
        table.medium-button,
        table.large-button {
            width: 100%;
            overflow: hidden;
        }

        table.button td,
        table.tiny-button td,
        table.small-button td,
        table.medium-button td,
        table.large-button td {
            display: block;
            width: auto !important;
            text-align: center;
            background: #2ba6cb;
            border: 1px solid #2284a1;
            color: #ffffff;
            padding: 8px 0;
        }

        table.tiny-button td {
            padding: 5px 0 4px;
        }

        table.small-button td {
            padding: 8px 0 7px;
        }

        table.medium-button td {
            padding: 12px 0 10px;
        }

        table.large-button td {
            padding: 21px 0 18px;
        }

        table.button td a,
        table.tiny-button td a,
        table.small-button td a,
        table.medium-button td a,
        table.large-button td a {
            font-weight: bold;
            text-decoration: none;
            font-family: Helvetica, Arial, sans-serif;
            color: #ffffff;
            font-size: 16px;
        }

        table.tiny-button td a {
            font-size: 12px;
            font-weight: normal;
        }

        table.small-button td a {
            font-size: 16px;
        }

        table.medium-button td a {
            font-size: 20px;
        }

        table.large-button td a {
            font-size: 24px;
        }

        table.button:hover td,
        table.button:visited td,
        table.button:active td {
            background: #2795b6 !important;
        }

        table.button:hover td a,
        table.button:visited td a,
        table.button:active td a {
            color: #fff !important;
        }

        table.button:hover td,
        table.tiny-button:hover td,
        table.small-button:hover td,
        table.medium-button:hover td,
        table.large-button:hover td {
            background: #2795b6 !important;
        }

        table.button:hover td a,
        table.button:active td a,
        table.button td a:visited,
        table.tiny-button:hover td a,
        table.tiny-button:active td a,
        table.tiny-button td a:visited,
        table.small-button:hover td a,
        table.small-button:active td a,
        table.small-button td a:visited,
        table.medium-button:hover td a,
        table.medium-button:active td a,
        table.medium-button td a:visited,
        table.large-button:hover td a,
        table.large-button:active td a,
        table.large-button td a:visited {
            color: #ffffff !important;
        }

        table.secondary td {
            background: #e9e9e9;
            border-color: #d0d0d0;
            color: #555;
        }

        table.secondary td a {
            color: #555;
        }

        table.secondary:hover td {
            background: #d0d0d0 !important;
            color: #555;
        }

        table.secondary:hover td a,
        table.secondary td a:visited,
        table.secondary:active td a {
            color: #555 !important;
        }

        table.success td {
            background: #5da423;
            border-color: #457a1a;
        }

        table.success:hover td {
            background: #457a1a !important;
        }

        table.alert td {
            background: #c60f13;
            border-color: #970b0e;
        }

        table.alert:hover td {
            background: #970b0e !important;
        }

        table.radius td {
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
        }

        table.round td {
            -webkit-border-radius: 500px;
            -moz-border-radius: 500px;
            border-radius: 500px;
        }

        /* Outlook First */

        body.outlook p {
            display: inline !important;
        }

        /*  Media Queries */

        @media only screen and (max-width: 600px) {

            table[class="body"] img {
                width: auto !important;
                height: auto !important;
            }

            table[class="body"] center {
                min-width: 0 !important;
            }

            table[class="body"] .container {
                width: 95% !important;
            }

            table[class="body"] .row {
                width: 100% !important;
                display: block !important;
            }

            table[class="body"] .wrapper {
                display: block !important;
                padding-right: 0 !important;
            }

            table[class="body"] .columns,
            table[class="body"] .column {
                table-layout: fixed !important;
                float: none !important;
                width: 100% !important;
                padding-right: 0px !important;
                padding-left: 0px !important;
                display: block !important;
            }

            table[class="body"] .wrapper.first .columns,
            table[class="body"] .wrapper.first .column {
                display: table !important;
            }

            table[class="body"] table.columns td,
            table[class="body"] table.column td {
                width: 100% !important;
            }

            table[class="body"] .columns td.one,
            table[class="body"] .column td.one {
                width: 8.333333% !important;
            }

            table[class="body"] .columns td.two,
            table[class="body"] .column td.two {
                width: 16.666666% !important;
            }

            table[class="body"] .columns td.three,
            table[class="body"] .column td.three {
                width: 25% !important;
            }

            table[class="body"] .columns td.four,
            table[class="body"] .column td.four {
                width: 33.333333% !important;
            }

            table[class="body"] .columns td.five,
            table[class="body"] .column td.five {
                width: 41.666666% !important;
            }

            table[class="body"] .columns td.six,
            table[class="body"] .column td.six {
                width: 50% !important;
            }

            table[class="body"] .columns td.seven,
            table[class="body"] .column td.seven {
                width: 58.333333% !important;
            }

            table[class="body"] .columns td.eight,
            table[class="body"] .column td.eight {
                width: 66.666666% !important;
            }

            table[class="body"] .columns td.nine,
            table[class="body"] .column td.nine {
                width: 75% !important;
            }

            table[class="body"] .columns td.ten,
            table[class="body"] .column td.ten {
                width: 83.333333% !important;
            }

            table[class="body"] .columns td.eleven,
            table[class="body"] .column td.eleven {
                width: 91.666666% !important;
            }

            table[class="body"] .columns td.twelve,
            table[class="body"] .column td.twelve {
                width: 100% !important;
            }

            table[class="body"] td.offset-by-one,
            table[class="body"] td.offset-by-two,
            table[class="body"] td.offset-by-three,
            table[class="body"] td.offset-by-four,
            table[class="body"] td.offset-by-five,
            table[class="body"] td.offset-by-six,
            table[class="body"] td.offset-by-seven,
            table[class="body"] td.offset-by-eight,
            table[class="body"] td.offset-by-nine,
            table[class="body"] td.offset-by-ten,
            table[class="body"] td.offset-by-eleven {
                padding-left: 0 !important;
            }

            table[class="body"] table.columns td.expander {
                width: 1px !important;
            }

            table[class="body"] .right-text-pad,
            table[class="body"] .text-pad-right {
                padding-left: 10px !important;
            }

            table[class="body"] .left-text-pad,
            table[class="body"] .text-pad-left {
                padding-right: 10px !important;
            }

            table[class="body"] .hide-for-small,
            table[class="body"] .show-for-desktop {
                display: none !important;
            }

            table[class="body"] .show-for-small,
            table[class="body"] .hide-for-desktop {
                display: inherit !important;
            }
        }

PS 生成的电子邮件 html 发布起来很麻烦，但基本上它会将您的所有 css 属性作为内联属性放在 html 标签上。

关于Django HTML 电子邮件模板不会在电子邮件中加载 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19970348/

文章推荐： intellij-idea - 如何在IntelliJ IDEA中运行Java暂存文件

css - 如何将 CSS 文件的 CSS 规则包含到另一个 CSS 文件的选择器中？
我有一个名为 main.css 的 css 文件和另一个名为 style.css 的文件。我怎样才能在 main.css 中做到这一点？ .someClass { //apply rules to
css - 将 css 文件移动到新的 css 文件夹后无法从我的 css 访问我的图片
在更新我的 css 之前，我在 Login.css 中有以下内容: body { background-image: url('./pictures/fond.png'); bac
css - css 3 中是否有任何 css 类分组 css 类？
我的 share point 2013 核心 css 和我的 css 之间存在 css 冲突。所以我想把我所有的类都放在 div #s4-workspace 下但是我搜索了一种方法来将所有类分组到这个
css - 使用内联 CSS 删除从 CSS 文件继承的 CSS 属性
我知道您可以覆盖 jsp 页面从 jsp 包含 CSS 文件(即全局 CSS 文件)继承的 CSS 属性。但是，如果元素中的某个属性弄乱了特定页面，而我不想只使用内联 CSS 在该页面中使用它怎么办
css - 初始规模与 desktop.css+phone.css+tablet.css？
我刚刚发现了 initial-scale 元属性。以前，我一直在使用 default.css 来定义我所有的样式和大小(用于字体和元素)，以便它们在桌面计算机的屏幕上显示得很好。然后，如果您使用的是
css - LESS CSS - 提取生成的 CSS
我正在尝试使用 LESS CSS 来编写我的 CSS。我已经按顺序导入了 style.less 和 less.js 文件。现在我想提取 LESS 生成的 CSS。有什么办法可以做到吗？我不想使用脚本
css - 如何将内联 CSS 转换为外部 CSS？
我想知道是否有任何一种软件可以读取大量内联样式中的 HTML 文档并将所有这些样式转换为外部 css 文件。如果只有一页，我可以手动完成。但是有100页。有人有想法吗？最佳答案就像有人说的那样，“
css - 来自样式化组件时 CSS 模块中的动态 CSS
当我想从 Styled Components 迁移到 CSS Modules 时，出现了以下问题。假设我有以下样式组件，它接受动态参数 offset和一个动态 CSS 字符串 theme : con
css - 在 CSS 中引用 CSS
有没有办法将 CSS 类定义为与另一个类相等？例如，如果我有一个类: .myClass{ background-color: blue; } 有没有一种方法可以将第二个类定义为与 myClas
css - 如何基于一个元素的 CSS 或它的前一个相邻兄弟的 CSS？
我正在尝试制作一组按钮，这些按钮贴在页面底部并且由固定的空间隔开。我正在使用 angularJS 的 ng-repeat 指令通过 ajax 请求获取数据，然后我用它来显示按钮。我的问题在于让按
css - 浏览器是否在加载 CSS 文件时解析 CSS？
浏览器是否在加载 CSS 文件时解析 CSS？还是在整个 CSS 文件被浏览器下载后才进行解析？不同浏览器的做法有区别吗？我在哪里可以找到这种底层信息？这个问题不是 Load and executi
css - 将已经定义的 CSS 添加到另一个 CSS
这个问题在这里已经有了答案: Can a CSS class inherit one or more other classes? (29 个答案) 关闭 3 年前。标题有点乱，我给大家看一下。假
css - css/main.css 是否还有其他用途？
我遇到了最奇怪的问题...... 在最简单的形式中，我有一个包含以下内容的 index.html 文件: (在尝试确定根本原因的过程中，我已经大大减少了它) 当我查看页面的源代码时，我得到以下信息:
css - 如果缺少所需的 css，则加载备用 css
我正在使用 Mindscape Workbench 来最小化我的 scss 文件。我的页面设置为使用 *.min.css 文件。在随机时间，min 文件不会与系统的其余部分一起发布。我有很多 css
css - CSS 框架和 CSS 网格有什么区别
请告诉我 CSS 框架和 CSS 网格之间的区别。最佳答案 CSS 框架也可以是 CSS 网格框架。 CSS 网格框架用于构建 CSS 布局。有一些框架除了构建布局还有其他用途，例如 Hartija
css - 如何摆脱从 css 文件继承的 css？
我有无法从页面中删除或更改的 original.css 文件。原始.css table { border-collapse: collapse; border-spacing: 0;
css - 带有 CSS 模块的普通 CSS
我以前使用 bootstrap css import 很好。但是我正在尝试使用 CSS 模块，所以我添加了几行。 { test: /\.css$/, use:
css - CSS 中的嵌套 CSS 选择器
有没有办法在 css 选择器中创建一个 css 组。例如: .SectionHeader { include: .foo; include: .bar; include: .
css - CSS 定位和 CSS 边距之间的区别
今天我学习了 CSS 中的两个概念，一个是 CSS 定位(静态、相对、绝对、固定)，另一个是 CSS Margin，它定义了元素之间的空间。假设我想移动一个元素，这是最好的方法吗？因为这两个概念似乎
css - Gulp CSS 任务不会覆盖现有的 CSS
var paths = { css: './public/apps/user/**/*.css' } var dest = { css: './public/apps/user/css/' } /

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

Django HTML 电子邮件模板不会在电子邮件中加载 css