如何在电子邮件中使用 Materialize.css？
Posted
技术标签:
【中文标题】如何在电子邮件中使用 Materialize.css？【英文标题】：How to use Materialize.css in an email? 【发布时间】：2018-09-15 13:34:40 【问题描述】：我正在尝试在 Django 中创建一个使用 Materialize.css 的电子邮件模板。这是模板代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Activation</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
/* Use the same logo size and positioning as in the eBay email to families */
img.logo
width: 80px;
margin: 30px 20px;
body
background-color: #f3f3f3;
/* Align the column with the logo */
.col.lucy-col
padding-left: 20px;
padding-right: 20px;
.card-title h4
margin-top: 0px;
/* Use Materialize's default light blue color for card-action links (instead of an orange one) */
.card-action.lucy-card-action a
color: #039be5 !important;
/* Make the table more compact vertically */
td
padding-top: 10px;
padding-bottom: 10px;
</style>
</head>
<body>
<img class="logo" src="https://s3-us-west-1.amazonaws.com/lucy-prod/images/logo.png" />
<!-- Materialize table within a Materialize card (cf. http://materializecss.com/cards.html and http://materializecss.com/table.html) -->
<div class="row">
<div class="col lucy-col s12 m6">
<div class="card">
<div class="card-content">
<span class="card-title"><h4>New Activation</h4></span>
<table class="striped">
<tbody>
<tr>
<td><b>Name</b></td>
<td> first_name last_name </td>
</tr>
<tr>
<td><b>Birth parent</b></td>
<td> birth_parent </td>
</tr>
<tr>
<td><b>Email</b></td>
<td><a href="mailto:email"> email </a></td>
</tr>
<tr>
<td><b>Phone</b></td>
<td> phone </td>
</tr>
<tr>
<td><b>Address</b></td>
<td> address|linebreaksbr </td>
</tr>
<tr>
<td><b>Company</b></td>
<td> company </td>
</tr>
<tr>
<td><b>Company email</b></td>
<td><a href="mailto: company_email "> company_email </a></td>
</tr>
<tr>
<td><b>Stage</b></td>
<td> stage </td>
</tr>
<tr>
<td><b>Baby arrived?</b></td>
<td> date </td>
</tr>
<tr>
<td><b>First child?</b></td>
<td> is_first_child </td>
</tr>
<tr>
<td><b>Tell us more</b></td>
<td> tell_us_more|linebreaksbr </td>
</tr>
</tbody>
</table>
</div>
<div class="card-action lucy-card-action">
<a href= url >Case Management</a>
</div>
</div>
</div>
</div>
</body>
</html>
当我将它连接到一个视图（传递一些虚拟上下文）时，它的外观如下：
我正在尝试使用premailer 将其发送到电子邮件中。这是我发送电子邮件的代码 sn-p：
from premailer import transform
from django.mail import EmailMultiAlternatives
...
message_html = transform(render_to_string('emails/activate_to_delivery.html', context))
email = EmailMultiAlternatives(
subject='A new family has activated!',
body=message_text,
from_email=settings.DEFAULT_FROM_EMAIL,
to=self._get_recipients(family),
reply_to=[family.point_of_contact_email])
email.attach_alternative(message_html, "text/html")
email.send()
但是，当我发送电子邮件（通过TestCase）时，我会收到一堆WARNINGs 和ERRORs（我在下面包含了其中的一个子集）：
(venv) Kurts-MacBook-Pro-2:lucy-web kurtpeek$ python manage.py test activation.tests.ActivationEmailTest
Creating test database for alias 'default'...
System check identified no issues (0 silenced).
WARNING Property: Unknown Property name. [18:3: word-wrap]
WARNING Property: Unknown Property name. [6:28081: -ms-text-size-adjust]
WARNING Property: Unknown Property name. [6:28107: -webkit-text-size-adjust]
WARNING Property: Unknown Property name. [6:28301: -webkit-box-sizing]
WARNING Property: Unknown Property name. [6:28463: -webkit-text-decoration-skip]
WARNING Property: Unknown Property name. [6:28557: -webkit-text-decoration]
WARNING Property: Unknown Property name. [6:28598: -moz-text-decoration]
ERROR Property: Invalid value for "CSS Level 2.1" property: underline dotted [6:28636: text-decoration]
WARNING Property: Unknown Property name. [6:29334: -webkit-appearance]
ERROR Property: Invalid value for "CSS3 Basic User Interface Module" property: 1px dotted ButtonText [6:29628: outline]
WARNING Property: Unknown Property name. [6:29704: -webkit-box-sizing]
WARNING Property: Unknown Property name. [6:29938: -webkit-box-sizing]
WARNING Property: Unknown Property name. [6:30114: -webkit-appearance]
WARNING Property: Unknown Property name. [6:30252: -webkit-appearance]
WARNING Property: Unknown Property name. [6:30305: -webkit-appearance]
WARNING Property: Unknown Property name. [6:30474: -webkit-box-sizing]
WARNING Property: Unknown Property name. [6:30545: -webkit-box-sizing]
ERROR Property: Invalid value for "CSS3 Basic User Interface Module" property: inherit [6:30572: box-sizing]
WARNING Property: Unknown Property name.
WARNING Property: Unknown Property name.
WARNING Property: Unknown Property name.
WARNING Property: Unknown Property name.
WARNING Property: Unknown Property name.
WARNING Property: Unknown Property name.
WARNING Property: Unknown Property name.
WARNING Property: Unknown Property name.
WARNING Property: Unknown Property name.
WARNING Property: Unknown Property name.
WARNING Property: Unknown Property name.
WARNING Property: Unknown Property name.
WARNING Property: Unknown Property name.
WARNING Property: Unknown Property name.
WARNING Property: Unknown Property name.
WARNING Property: Unknown Property name. [1:18: -ms-text-size-adjust]
WARNING Property: Unknown Property name. [1:44: -webkit-text-size-adjust]
WARNING Property: Unknown Property name. [1:30: -webkit-text-decoration-skip]
WARNING Property: Unknown Property name. [1:1: -webkit-box-sizing]
WARNING Property: Unknown Property name. [1:36: -webkit-tap-highlight-color]
ERROR Property: Invalid value for "CSS Level 2.1" property: 2.28rem [1:1: font-size]
ERROR Property: Invalid value for "CSS Level 2.1" property: 1.52rem 0 0.912rem 0 [1:36: margin]
WARNING Property: Unknown Property name. [1:1: -webkit-box-shadow]
ERROR Property: Invalid value for "CSS Level 2.1" property: 0.5rem 0 1rem 0 [1:19: margin]
WARNING Property: Unknown Property name. [1:64: -webkit-transition]
WARNING Property: Unknown Property name. [1:108: transition]
WARNING Property: Unknown Property name. [1:12: -webkit-box-sizing]
ERROR Property: Invalid value for "CSS Level 2.1" property: 0 0.75rem [1:64: padding]
.
----------------------------------------------------------------------
Ran 1 test in 7.051s
OK
Destroying test database for alias 'default'...
如果我检查我的收件箱，电子邮件如下所示：
有什么方法可以解决这个问题 - 即在电子邮件中使用 Materialize？ （就我而言，它只适用于 GMail）。
【问题讨论】：
【参考方案1】：电子邮件并不支持所有的 CSS 函数，我建议您创建自己的 CSS 并使用替代函数来达到相同的效果。
这是一个方便的网站，您可以在该网站上查看哪些 CSS 可以用于某些电子邮件客户端，哪些不能用于某些电子邮件客户端。
https://www.campaignmonitor.com/css/
【讨论】：
【参考方案2】：只是为您提供一个选项，请查看 MJML。 它可以以编程方式与 Node.js 一起使用。 它可以通过本质上是 HTML 和 CSS 的组合创建响应式和所有常见电子邮件客户端的电子邮件，并通过各种电子邮件客户端进行显示。
https://mjml.io/
“MJML 是一种标记语言，旨在减少编写响应式电子邮件的痛苦。它的语义语法使其简单明了，其丰富的标准组件库可加快您的开发时间并减轻您的电子邮件代码库。MJML 的开源引擎生成符合最佳实践的高质量响应式 HTML。”
示例：
【讨论】：
以上是关于如何在电子邮件中使用 Materialize.css？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 cPanel 电子邮件帐户在 laravel 中发送确认电子邮件？
如何使用 Outlook 2013 在电子邮件中附加下拉选定字段数据
如何使用 MFMailComposeViewController 在电子邮件正文中添加图像