css - Django Rest Framework 发送电子邮件但模板不加载 CSS-6ren

css - Django Rest Framework 发送电子邮件但模板不加载 CSS

转载作者：行者123 更新时间：2023-12-01 23:25:13

我正在使用 django.core.mail 模块从 Django Rest 发送电子邮件。

Views.py

from django.core.mail import send_mail
from django.template.loader import render_to_string
from django.utils.html import strip_tags
...



              ## Send the email somewhere in the viewset
            html_mail = render_to_string('templates/invitation.html', {'email': email, 'url': url})
            send_mail(
                'You are invited!',
                 mail_template,
                [sender_mail],
                [email],
                fail_silently=False,
            )
        
            return Response({'success' : 'true' },200)

我在设置中有模板路径，

TEMPLATES = [
{
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    'DIRS': [
        os.path.join(BASE_DIR, 'templates')
   ],

在模板上，我有带有一堆 CSS 代码的常规 HTML 模板。

示例电子邮件模板:

<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

  <head>
    <meta charset="utf-8">
    <meta name="x-apple-disable-message-reformatting">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
    <!--[if mso]>
    <xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>
    <style>
      td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: "Segoe UI", sans-serif; mso-line-height-rule: exactly;}
    </style>
  <![endif]-->
    <title>Default email title</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700" rel="stylesheet" media="screen">
    <style>
      .hover-underline:hover {
        text-decoration: underline !important;
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      @keyframes ping {

        75%,
        100% {
          transform: scale(2);
          opacity: 0;
        }
      }

      @keyframes pulse {
        50% {
          opacity: .5;
        }
      }

      @keyframes bounce {

        0%,
        100% {
          transform: translateY(-25%);
          animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
        }

        50% {
          transform: none;
          animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
        }
      }

      @media (max-width: 600px) {
        .sm-leading-32 {
          line-height: 32px !important;
        }

        .sm-px-24 {
          padding-left: 24px !important;
          padding-right: 24px !important;
        }

        .sm-py-32 {
          padding-top: 32px !important;
          padding-bottom: 32px !important;
        }

        .sm-w-full {
          width: 100% !important;
        }
      }
    </style>
  </head>

  <body style="margin: 0; padding: 0; width: 100%; word-break: break-word; -webkit-font-smoothing: antialiased; --bg-opacity: 1; background-color: #eceff1; background-color: rgba(236, 239, 241, var(--bg-opacity));">
    <div style="display: none;">Default email preheader</div>
    <div role="article" aria-roledescription="email" aria-label="Default email title" lang="en">
      <table style="font-family: Montserrat, -apple-system, 'Segoe UI', sans-serif; width: 100%;" width="100%" cellpadding="0" cellspacing="0" role="presentation">
        <tr>
          <td align="center" style="--bg-opacity: 1; background-color: #eceff1; background-color: rgba(236, 239, 241, var(--bg-opacity)); font-family: Montserrat, -apple-system, 'Segoe UI', sans-serif;" bgcolor="rgba(236, 239, 241, var(--bg-opacity))">
            <table class="sm-w-full" style="font-family: 'Montserrat',Arial,sans-serif; width: 600px;" width="600" cellpadding="0" cellspacing="0" role="presentation">
              <tr>
                <td class="sm-py-32 sm-px-24" style="font-family: Montserrat, -apple-system, 'Segoe UI', sans-serif; padding: 48px; text-align: center;" align="center">
                  <a href="https://1.envato.market/vuexy_admin">
                    <img src="images/logo.png" width="155" alt="Vuexy Admin" style="border: 0; max-width: 100%; line-height: 100%; vertical-align: middle;">
                  </a>
                </td>
              </tr>
              <tr>
                <td align="center" class="sm-px-24" style="font-family: 'Montserrat',Arial,sans-serif;">
                  <table style="font-family: 'Montserrat',Arial,sans-serif; width: 100%;" width="100%" cellpadding="0" cellspacing="0" role="presentation">
                    <tr>
                      <td class="sm-px-24" style="--bg-opacity: 1; background-color: #ffffff; background-color: rgba(255, 255, 255, var(--bg-opacity)); border-radius: 4px; font-family: Montserrat, -apple-system, 'Segoe UI', sans-serif; font-size: 14px; line-height: 24px; padding: 48px; text-align: left; --text-opacity: 1; color: #626262; color: rgba(98, 98, 98, var(--text-opacity));" bgcolor="rgba(255, 255, 255, var(--bg-opacity))" align="left">
                        <p style="font-weight: 600; font-size: 18px; margin-bottom: 0;">Hey</p>
                        <p style="font-weight: 700; font-size: 20px; margin-top: 0; --text-opacity: 1; color: #ff5850; color: rgba(255, 88, 80, var(--text-opacity));">John Doe!</p>
                        <p class="sm-leading-32" style="font-weight: 600; font-size: 20px; margin: 0 0 24px; --text-opacity: 1; color: #263238; color: rgba(38, 50, 56, var(--text-opacity));">
                          🏆 Best selling #1 admin template ever!
                        </p>
                        <a href="https://1.envato.market/vuexy_admin">
                          <img src="images/item.jpg" width="500" alt="Vuexy Admin" style="border: 0; max-width: 100%; line-height: 100%; vertical-align: middle;">
                        </a>
                        <p style="margin: 24px 0;">
                          <span style="font-weight: 600;">Vuexy</span>
                          is the most developer friendly & highly customisable VueJS + HTML Admin Dashboard Template
                          based on Vue CLI, Vuex & Vuexy component framework. 🤩
                        </p>
                        <table style="font-family: 'Montserrat',Arial,sans-serif; width: 100%;" width="100%" cellpadding="0" cellspacing="0" role="presentation">
                          <tr>
                            <td style="font-family: 'Montserrat',Arial,sans-serif; padding-top: 32px; padding-bottom: 32px;">
                              <div style="--bg-opacity: 1; background-color: #eceff1; background-color: rgba(236, 239, 241, var(--bg-opacity)); height: 1px; line-height: 1px;">&zwnj;</div>
                            </td>
                          </tr>
                        </table>
                        <p style="margin: 0 0 16px;">
                          Not sure why you received this email? Please
                          <a href="mailto:support@example.com" class="hover-underline" style="--text-opacity: 1; color: #7367f0; color: rgba(115, 103, 240, var(--text-opacity)); text-decoration: none;">let us know</a>.
                        </p>
                        <p style="margin: 0 0 16px;">Thanks, <br>The PixInvent Team</p>
                      </td>
                    </tr>
                    <tr>
                      <td style="font-family: 'Montserrat',Arial,sans-serif; height: 20px;" height="20"></td>
                    </tr>
                    <tr>
                      <td style="font-family: Montserrat, -apple-system, 'Segoe UI', sans-serif; font-size: 12px; padding-left: 48px; padding-right: 48px; --text-opacity: 1; color: #eceff1; color: rgba(236, 239, 241, var(--text-opacity));">
                        <p align="center" style="cursor: default; margin-bottom: 16px;">
                          <a href="https://www.facebook.com/pixinvents" style="--text-opacity: 1; color: #263238; color: rgba(38, 50, 56, var(--text-opacity)); text-decoration: none;"><img src="images/facebook.png" width="17" alt="Facebook" style="border: 0; max-width: 100%; line-height: 100%; vertical-align: middle; margin-right: 12px;"></a>
                          &bull;
                          <a href="https://twitter.com/pixinvents" style="--text-opacity: 1; color: #263238; color: rgba(38, 50, 56, var(--text-opacity)); text-decoration: none;"><img src="images/twitter.png" width="17" alt="Twitter" style="border: 0; max-width: 100%; line-height: 100%; vertical-align: middle; margin-right: 12px;"></a>
                          &bull;
                          <a href="https://www.instagram.com/pixinvents" style="--text-opacity: 1; color: #263238; color: rgba(38, 50, 56, var(--text-opacity)); text-decoration: none;"><img src="images/instagram.png" width="17" alt="Instagram" style="border: 0; max-width: 100%; line-height: 100%; vertical-align: middle; margin-right: 12px;"></a>
                        </p>
                        <p style="--text-opacity: 1; color: #263238; color: rgba(38, 50, 56, var(--text-opacity));">
                          Use of our service and website is subject to our
                          <a href="https://pixinvent.com/" class="hover-underline" style="--text-opacity: 1; color: #7367f0; color: rgba(115, 103, 240, var(--text-opacity)); text-decoration: none;">Terms of Use</a> and
                          <a href="https://pixinvent.com/" class="hover-underline" style="--text-opacity: 1; color: #7367f0; color: rgba(115, 103, 240, var(--text-opacity)); text-decoration: none;">Privacy Policy</a>.
                        </p>
                      </td>
                    </tr>
                    <tr>
                      <td style="font-family: 'Montserrat',Arial,sans-serif; height: 16px;" height="16"></td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </div>
  </body>

</html>

我的问题

我成功发送了电子邮件(因此找到了模板)但是我只发送了丑陋的结构化文本。

如果我不在 views.py 中执行 strip_tags，它会发送带有 HTML 标签的模板。

我是第一次发邮件，我到处搜索，但没有解决问题。我希望有一个简单的方法，因为这是一个非常常见的 Action 。我做错了什么？

最佳答案

我认为问题出在这里，

           send_mail(
                'You are invited!',
                 mail_template,
                [sender_mail],
                [email],
                fail_silently=False,
            )

尝试将其更改为


       send_mail(
                'You are invited!',
                 'random text here',
                [sender_mail],
                [email],
                fail_silently=False,
                html_message = render_to_string('emails/invitation.html', {'email': email, 'url': url})
                 ## So you specify the html_message parameter here. 
            )

这是我的问题的解决方案。

提示:您可以使用 mailtrap 检查哪些客户端可以或不支持您发送的内容。

关于css - Django Rest Framework 发送电子邮件但模板不加载 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67374803/

文章推荐： r - 计算每个唯一元素在列表中出现的次数

文章推荐： c++ - 这个递归函数在 C++ 中是如何工作的？

文章推荐： julia - 我可以在 Julia 中找到字符串中的特定字符吗？

文章推荐： c++ - 为什么 std::forward 将我的左值变成右值？

ios - 如何从 Node js 发送 voip 推送通知？我可以从 curl 发送 voip 推送，但不能从 Node 发送
我正在使用 voip 推送通知制作 ios 应用程序。我想从 Node js 发送 voip 推送通知，但不是很好。我阅读了本教程 CallKit iOS Swift Tutorial for V
C套接字编程，发送
我编写了一个服务器，当浏览器尝试连接到某些站点时，它会检查黑名单并发回 404，但是当我调用 send() 时没有错误，但消息不会出现在网络上浏览器，除非我关闭连接？有什么建议吗？接受来自浏览器的
发送 EOF 后无法读取任何内容？
#include int main() { char c = getchar(); //EOF (ctrl + d ) while( ( c = getchar() ) != '?'
powershell - 发送-替换HTML电子邮件
我正在尝试使用MailMessage对象通过PowerShell发送电子邮件。该脚本使用Import-CSV来使用文件，然后在电子邮件正文中使用ConvertTo-HTML。由于我要发送的电子邮件客户
Powershell - 发送/接收的字节数
我需要创建一个脚本，每 30 秒对网络流量进行一次采样并存储发送/接收的字节。该数据随后用于绘制图形。我编写了一个在 Windows 2012 上完美运行的程序，但我意识到某些 cmdlet 在以前的
AutoIt:发送 ("{DOWN}")不起作用
我正在运行“autoit3.chm”文件。当它运行时，我想发送一个向下键箭头，但它不起作用: $file = FileGetShortName("C:\Users\PHSD100-SIC\Deskto
c - 发送()问题
当我使用网络浏览器测试我的程序时，我可以很好地写入套接字/FD，所以我决定循环它并在连接中途切断连接，我发现了一个问题。 send() 能够在套接字不可用时关闭整个程序。我认为问题在于该程序陷入了第
AutoIt:发送 ("{DOWN}") 不工作
我正在运行“autoit3.chm”文件。当它运行时，我想发送一个向下键箭头，但它不起作用: $file = FileGetShortName("C:\Users\PHSD100-SIC\Deskto
java - 发送/接收数据出现问题
所以我试图向自己发送数据并接收数据然后打印它，现在我已经测试了一段时间，我注意到它没有发送任何东西，事实上，也许它是，但我没有正确接收它，我需要这方面的帮助。这就是我用来发送数据的
java - 发送/序列化对象的最佳实践
问题:开发人员创建自己的序列化格式有多常见？具体来说，我使用 java 本质上将对象作为一个巨大的字符串发送，并用标记来分隔变量。我的逻辑:我选择这个是因为它几乎消除了语言依赖性(忽略java的修改
ethernet - 发送/接收原始以太网帧
我必须在 Linux 上编写一个应用程序，该应用程序需要与具有自定义以太网类型的设备进行通信。甚至在如何编写这样的应用程序中也有很多解决方案。一个缺点是需要 root 访问权限(AFAIK)。之后释放
javascript - 单选按钮值在提交表单时作为 "on"发送
我有一个包含三个单选按钮选项的表单。我需要将表单数据提交到另一个文件，但由于某种原因，发送的数据包含所选单选按钮的值“on”，而不是 value 属性的值。我尝试通过 post() 函数手动操作和发
c - 如何使具有两个线程的两个进程在MPI中相互接收、发送？
基本上我想实现这样的目标: Process 1 Thread 1 Receive X from process 2 Thread 2 Receive Y from proces
java - 发送 session
我目前正在 Google App Engine 上开发一个系统，对它还很陌生，我正在使用 Java 平台进行开发。我在 servlet 之间发送 session 对象时遇到问题。我已经在 appeng
javascript - 发送 $(this) 作为参数
当我尝试将“this”(触发的元素)作为参数发送给函数时，函数收到“Object[Document build.php]”作为参数，而不是触发的元素。请让我知道我的错误: function set(a
android 响应联系人 > 发送？
我正在寻找让我的应用响应联系人 > 发送的魔法咒语。我希望能够接收联系人的 URI 以便检索联系人。谁有 list 过滤器/代码 fragment 吗？最佳答案我没有睾丸，但您可以尝试基于 ACT
c++ - 发送/接收套接字阻塞问题
关于我心爱的套接字的另一个问题。我先解释一下我的情况。之后我会告诉你是什么困扰着我。我有一个客户端和一个服务器。这两个应用程序都是用 C++ 编写的，实现了 winsock2。连接通过 TCP 和
C 发送/返回带有函数的数组
我看到了这篇文章 http://www.eskimo.com/~scs/cclass/int/sx5.html 但这部分让我感到困惑:如果我们已经使用 send_array 或 send_array_
c - 发送:无效参数
我对这行代码有疑问。我必须将一个数据包带到一个端口并重新发送到接口(interface)(例如:eth0)。我的程序成功地从端口获取数据包，但是当我重新发送(使用 send())到接口(interfa
发送 X11 鼠标事件的正确方法
我正在尝试编写一个 X11 输入驱动程序，它可以使用我的 Android 手机上的触摸屏来移动和单击鼠标。我可以正常移动鼠标，但我无法让应用程序正确识别点击。我当前的代码位于 https://gist

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - Django Rest Framework 发送电子邮件但模板不加载 CSS