html - Sendgrid 在我的模板代码上方添加额外的 HTML 和 CSS
问题描述
我正在创建一个动态模板,其中包含一个非常简单的表格和 Sendgrid 中的一些文本。这封电子邮件将发送给几乎完全在 Outlook 桌面上查看的内部员工,因此我不太担心一致性或兼容性。在我所有的测试电子邮件中,正文都居中而不是一直向左。我查看了源代码并玩弄了它,直到我终于意识到我的内容上方有一个表格,它的样式max-width:600px;
导致它变得更小和居中。一旦我移除了那个造型,它就会像我想要的那样把我的身体一直推到左边。
所以我想弄清楚的是如何删除 Sendgrid 添加到源中的所有垃圾 HTML 和 CSS。或者至少删除 600 像素的最大宽度。
以下是一些示例代码,这些代码会自动添加到所有发送的电子邮件中:
<body>
<center class="wrapper" data-link-color="#1188E6" data-body-style="font-size:14px; font-family:arial,helvetica,sans-serif; color:#000000; background-color:#FFFFFF;">
<div class="webkit">
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="wrapper" bgcolor="#FFFFFF">
<tr>
<td valign="top" bgcolor="#FFFFFF" width="100%">
<table width="100%" role="content-container" class="outer" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<!--[if mso]>
<center>
<table><tr><td width="600">
<![endif]-->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:600px;" align="center">
我真的不明白为什么电子邮件需要至少有 4 个嵌套表!最后一个表格标签是最大宽度所在的位置。
电子邮件的正文居中,我只想让它保持合理。
解决方案
我过去使用带有 ROR 的 SendGrid 构建时事通讯,我发现代码被转换为内联,因此可以在许多其他电子邮件提供商中阅读,我们发现这个名为 amp 的产品实际上可以让我们使用非内联样式 css .
我建议采用这种方法,或者将内联样式编码为 max-with:600px; 到首选的宽度并在不同的提供商、Gmail、Outlook、Ios 等上运行多个测试。
正如您提到的,时事通讯创建者不会发送发送时事通讯所需的代码,而是将内容转换为内联。
<html ⚡4email data-editor-version="2" class="sg-campaigns" xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--[if (gte mso 9)|(IE)]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mexdev - Newsletter service</title>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body style="background-color:#F5F5F5; overflow: auto;">
<div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout:fixed; background-color:#F5F5F5;" id="bodyTable">
<tbody><tr>
<td align="center" valign="top" id="bodyCell">
<!--[if (gte mso 9)|(IE)]><table align="center" border="0" cellspacing="0" cellpadding="0" style="width:620px;" width="620"><tr><td align="center" valign="top"><![endif]-->
<table border="0" cellpadding="0" cellspacing="0" style="max-width:480px;" width="100%" class="wrapperTable">
<tbody>
<tr>
<td align="center" valign="top" class="wrapperCell">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="wrapperPreHeader">
<tbody>
<tr>
<td align="center" valign="top" style="padding-left:10px;padding-right:10px;">
<!-- Email PreHeader Open //-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="emailPreHeader">
<tbody><tr>
<td align="right" valign="top" style="padding: 20px;">
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="wrapperHeader">
<tbody>
<tr>
<td align="center" valign="top" >
<!-- Email der Open //-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="emailHeader" style="border-radius: 10px; background: white; margin-bottom: 20px;">
<tbody>
<tr>
<td align="center" valign="middle" style="padding: 40px 20px 20px;" class="emailLogo">
<!-- Logo and Link // -->
<a href="#" target="_blank" style="text-decoration:none;">
<img src="https://firebasestorage.googleapis.com/v0/b/mexdev-40fff.appspot.com/o/logos%2Ffavicon%20-%20Copy.png?alt=media&token=83158426-51b5-40c2-9423-9756710c79f0" alt="" width="80" >
</a><br>
</td>
</tr>
<tr>
<td align="center" valign="middle" style="padding-bottom: 5px; padding-left: 20px; padding-right: 20px;" class="emailTitle">
<!-- Email Header Title // -->
<p class="bigText" style="color:#A5A5A5; font-family: 'Poppins'; font-size:30px; font-weight:400; font-style:normal; letter-spacing:normal; line-height:32px; text-transform:none; text-align:center; padding:0; margin:0;">
Mexdev - Newsletter service
</p>
</td>
</tr>
<tr>
<td align="center" valign="middle" style="padding-bottom: 40px; padding-left: 20px; padding-right: 20px;" class="emailTimeStamp">
<!-- Cool Bar --> <div style="height: 1.5px; margin-top: 20px; margin-right: 20px; margin-left: 20px; border-radius: 3px; background-image: linear-gradient(200deg, #00a8ff 10%, #7460c5 39%, #02d0ff 80%);"></div>
<br><br><br>
<!-- Email Time Stamp // -->
<p class="smlText" style=" color:#999999; font-family: 'Poppins'; font-size:11px; font-weight:400; line-height:20px; font-style:normal; letter-spacing:normal; text-transform:none; text-align:center; margin:0; padding:0;">
</td>
</tr>
</tbody>
</table>
</td>
</tbody>
</table>
</div>
</body>
</html>
只是分享我的经验,我希望它可以帮助你按计划进行风格。
推荐阅读
- java - 在java中使用循环打印一年中的星期日
- reactjs - 将环境变量传递给 Docker 以创建 React 应用程序
- reactjs - reactjs表中的复选框
- unity3d - Unity - 我在 admob 基于奖励的视频广告上获得了重复的奖励
- ionic-framework - 使用 google oauth 注册用户
- python-3.x - Pytest 捕获不起作用 - caplog 和 capsys 为空
- javascript - JavaScript 和 pdfium(原生 Chrome PDF 查看器)。你能得到当前页码吗
- django - Django 博客 - 评论功能以表单形式显示作者的下拉菜单
- arduino - 使用 nRF24L01+ 从 TLSR8368 接收信号
- jenkins-pipeline - 不允许多次使用阶段 [Jenkins_Declarative_Pipeline]