css - Sendgrid 模板 CSS 被忽略

标签 css sendgrid email-templates

我已经使用 Sendgrid 制作了以下模板:

enter image description here

为了使用我的节点服务器发送这个，我创建了以下模块:

/**
 * Created by root on 6/6/16.
 */
var path = require('path'),
    emailTemplates = require('email-templates'),
    async = require("async"),
    mailConfig = require('../config/email.json'),
    templates = require('../config/emailTemplates.json'),
    _ = require('lodash'),
    sendgrid = require('sendgrid')(mailConfig.sendGridApiKey);
var mymailer = {};


    /**
     * Sends an email to either one or multiple users
     * @param template_id (The id key of the template. Can be found in emailTemplates.json
     * @param to String or Array
     * @param from String
     * @param subject String
     * @param keyReplacer Array of objects for keys to replace in the template
     */
    mymailer.sendTemplate = function (template_id, to, from, subject, keyReplacer, text) {
        var email = new sendgrid.Email();
        var templateKey = templates[template_id];
        if (templateKey) {
            email.setSmtpapiTos(to);
            email.subject = subject;
            email.from = from;
            email.text = text;
            email.html = '';
            email.setFilters({
                'templates': {
                    'settings': {
                        'enable': 1,
                        'template_id': templateKey
                    }
                }
            });
            email.smtpapi.header.sub = createSub(keyReplacer);
            sendgrid.send(email);
        }
        else {
            console.log('incorrect key');
        }
    };
    
    function createSub(keyReplacer) {
        var finalObject = {};
        if (keyReplacer) {
            _.forEach(keyReplacer, function (value, key) {
                var k = ':' + key;
                finalObject[k] = [value];
            })
        }
        return finalObject;
    }
    

module.exports = mymailer;

但是，当我收到电子邮件时，它的 CSS 和图像都被删除了。

看起来像这样:

enter image description here

我想我缺少一些设置，但我不知道是哪个。我可以尝试哪些？

模板 html

    <!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" data-dnd="true">
<head>
  <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" />
  <!--[if !mso]><!-->
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  <!--<![endif]-->

  <!--[if (gte mso 9)|(IE)]><style type="text/css">
  table {border-collapse: collapse;}
  table, td {mso-table-lspace: 0pt;mso-table-rspace: 0pt;}
  img {-ms-interpolation-mode: bicubic;}
  </style>
  <![endif]-->
  <style type="text/css">
  body {
    color: #000000;
  }
  body a {
    color: #0071cb;
    text-decoration: none;
  }
  p { margin: 0; padding: 0; }
  table[class="wrapper"] {
    width:100% !important;
    table-layout: fixed;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }
  img[class="max-width"] {
    max-width: 100% !important;
  }
  @media screen and (max-width:480px) {
    .preheader .rightColumnContent,
    .footer .rightColumnContent {
        text-align: left !important;
    }
    .preheader .rightColumnContent div,
    .preheader .rightColumnContent span,
    .footer .rightColumnContent div,
    .footer .rightColumnContent span {
      text-align: left !important;
    }
    .preheader .rightColumnContent,
    .preheader .leftColumnContent {
      font-size: 80% !important;
      padding: 5px 0;
    }
    table[class="wrapper-mobile"] {
      width: 100% !important;
      table-layout: fixed;
    }
    img[class="max-width"] {
      height: auto !important;
    }
    a[class="bulletproof-button"] {
      display: block !important;
      width: auto !important;
      font-size: 80%;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    // 2 columns
    #templateColumns{
        width:100% !important;
    }

    .templateColumnContainer{
        display:block !important;
        width:100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
  }
  </style>
  <style>
  body, p, div { font-family: arial,sans-serif; }
</style>
  <style>
  body, p, div { font-size: 14px; }
</style>
</head>
<body yahoofix="true" style="min-width: 100%; margin: 0; padding: 0; font-size: 14px; font-family: arial,sans-serif; color: #000000; background-color: #0071CB; color: #000000;" data-attributes='%7B%22dropped%22%3Atrue%2C%22bodybackground%22%3A%22%230071CB%22%2C%22bodyfontname%22%3A%22arial%2Csans-serif%22%2C%22bodytextcolor%22%3A%22%23000000%22%2C%22bodylinkcolor%22%3A%22%230071cb%22%2C%22bodyfontsize%22%3A14%7D'>
  <center class="wrapper">
    <div class="webkit">
      <table cellpadding="0" cellspacing="0" border="0" width="100%" class="wrapper" bgcolor="#0071CB">
      <tr><td valign="top" bgcolor="#0071CB" width="100%">
      <!--[if (gte mso 9)|(IE)]>
      <table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td>
          <![endif]-->
            <table width="100%" role="content-container" class="outer" data-attributes='%7B%22dropped%22%3Atrue%2C%22containerpadding%22%3A%220%2C0%2C0%2C0%22%2C%22containerwidth%22%3A600%2C%22containerbackground%22%3A%22%23FFFFFF%22%7D' align="center" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td width="100%"><table width="100%" cellpadding="0" cellspacing="0" border="0">
                  <tr>
                    <td>
                    <!--[if (gte mso 9)|(IE)]>
                      <table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
                        <tr>
                          <td>
                            <![endif]-->
                              <table width="100%" cellpadding="0" cellspacing="0" border="0" style="width: 100%; max-width:600px;" align="center">
                                <tr><td role="modules-container" style="padding: 0px 0px 0px 0px; color: #000000; text-align: left;" bgcolor="#FFFFFF" width="100%" align="left">
                                  <table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="display:none !important; visibility:hidden; opacity:0; color:transparent; height:0; width:0;" class="module preheader preheader-hide" role="module" data-type="preheader">
  <tr><td role="module-content"><p></p></td></tr>
</table>
<table class="module" role="module" data-type="wysiwyg" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-attributes='%7B%22dropped%22%3Atrue%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22containerbackground%22%3A%22%23ffffff%22%7D'>
<tr><td role="module-content" style="padding: 0px 0px 0px 0px;" bgcolor="#ffffff"><div>&lt;%body%&gt;</div></td></tr></table>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" class="module wrapper" role="module" data-type="imagetext" data-attributes='%7B%22dropped%22%3Atrue%2C%22imagebackground%22%3A%22%23ffffff%22%2C%22imagemargin%22%3A%220%2C0%2C0%2C0%22%2C%22textbackground%22%3A%22%23ffffff%22%2C%22textmargin%22%3A%220%2C0%2C0%2C0%22%2C%22imagealignment%22%3A%22left%22%7D'>
  <tr>
    <td>
      <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr role="module-content">
          <td align="center" valign="top" width="50%" height="100%" class="templateColumnContainer"  bgcolor="#ffffff" >
            <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
              <tr>
                <td class="leftColumnContent" role="column-one" height="100%" style="height:100%;width:50%; padding: 0px 0px 0px 0px;"><table role="module" data-type="image" border="0" align="center" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" class="wrapper" data-attributes='%7B%22child%22%3Atrue%2C%22link%22%3A%22%22%2C%22width%22%3A%22250%22%2C%22height%22%3A%22333%22%2C%22imagebackground%22%3A%22%23ffffff%22%2C%22url%22%3A%22https%3A//marketing-image-production.s3.amazonaws.com/uploads/e4f73dd0d8cd27c174bae4dce1f04e4db74721c83cfd297559428dceb682cd79f2b565aa0bcacfb7175b27be1b4d5d10f112847379aa271aeb56760ad33e36c3.jpg%22%2C%22alt_text%22%3A%22%22%2C%22dropped%22%3Atrue%2C%22imagemargin%22%3A%220%2C0%2C0%2C0%22%2C%22alignment%22%3A%22%22%2C%22responsive%22%3Afalse%7D'>
<tr>
  <td style="font-size:6px;line-height:10px;background-color:#ffffff;padding: 0px 0px 0px 0px;" valign="top" align="" role="module-content">

  <img class="max-width"  width="250"   height="333"  src="https://marketing-image-production.s3.amazonaws.com/uploads/e4f73dd0d8cd27c174bae4dce1f04e4db74721c83cfd297559428dceb682cd79f2b565aa0bcacfb7175b27be1b4d5d10f112847379aa271aeb56760ad33e36c3.jpg" alt="" border="0" style="display: block; color: #000; text-decoration: none; font-family: Helvetica, arial, sans-serif; font-size: 16px; " />

</td>
</tr>
</table></td>
              </tr>
            </table>
          </td>
          <td align="center" valign="top" width="50%" height="100%" class="templateColumnContainer"  bgcolor="#ffffff" >
            <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
              <tr>
                <td class="rightColumnContent" role="column-two" height="100%" style="height:100%;width:50%; padding: 0px 0px 0px 0px;"><table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" style="table-layout: fixed;" data-attributes='%7B%22dropped%22%3Atrue%2C%22child%22%3Atrue%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22containerbackground%22%3A%22%23ffffff%22%7D'>
<tr>
  <td role="module-content"  valign="top" height="100%" style="padding: 0px 0px 0px 0px;" bgcolor="#ffffff"><div>Hello world</div> </td>
</tr>
</table>
</td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" role="module" data-type="columns" data-attributes='%7B%22dropped%22%3Atrue%2C%22columns%22%3A2%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22cellpadding%22%3A0%2C%22containerbackground%22%3A%22%22%7D'>
  <tr><td style="padding: 0px 0px 0px 0px;" bgcolor="">
    <table class="columns--container-table" border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
      <tr role="module-content">
        <td style="padding: 0px 0px 0px 0px" role="column-0" align="center" valign="top" width="50%" height="100%" class="templateColumnContainer column-drop-area empty">
  
</td><td style="padding: 0px 0px 0px 0px" role="column-1" align="center" valign="top" width="50%" height="100%" class="templateColumnContainer column-drop-area ">
  <table class="module" role="module" data-type="button" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-attributes='%7B%22dropped%22%3Atrue%2C%22borderradius%22%3A6%2C%22buttonpadding%22%3A%2212%2C18%2C12%2C18%22%2C%22text%22%3A%22Your%20Bulletproof%20Button%22%2C%22alignment%22%3A%22center%22%2C%22fontsize%22%3A16%2C%22url%22%3A%22%22%2C%22height%22%3A%22%22%2C%22width%22%3A%22%22%2C%22containerbackground%22%3A%22%23ffffff%22%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22buttoncolor%22%3A%22%231188e6%22%2C%22textcolor%22%3A%22%23ffffff%22%2C%22bordercolor%22%3A%22%231288e5%22%7D'>
<tr>
  <td style="padding: 0px 0px 0px 0px;" align="center" bgcolor="#ffffff">
    <table border="0" cellpadding="0" cellspacing="0" class="wrapper-mobile">
      <tr>
        <td align="center" style="-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; font-size: 16px;" bgcolor="#1188e6">
          <a href="" class="bulletproof-button" target="_blank" style="height: px; width: px; font-size: 16px; line-height: px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; padding: 12px 18px 12px 18px; text-decoration: none; color: #ffffff; text-decoration: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; border: 1px solid #1288e5; display: inline-block;">Your Bulletproof Button</a>
        </td>
      </tr>
    </table>
  </td>
</tr>
</table>

</td>
      </tr>
    </table>
  </td></tr>
</table><table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" class="module footer" role="module" data-type="footer" data-attributes='%7B%22dropped%22%3Atrue%2C%22columns%22%3A1%2C%22padding%22%3A%2210%2C5%2C10%2C5%22%2C%22containerbackground%22%3A%22%23ffffff%22%7D'>
  <tr><td style="padding: 10px 5px 10px 5px;" bgcolor="#ffffff">
    <table border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
      <tr role="module-content">
        
        <td align="center" valign="top" width="100%" height="100%" class="templateColumnContainer">
          <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
            <tr>
              <td class="leftColumnContent" role="column-one" height="100%" style="height:100%;"><table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0"  width="100%" style="table-layout: fixed;" data-attributes='%7B%22dropped%22%3Atrue%2C%22child%22%3Afalse%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22containerbackground%22%3A%22%23ffffff%22%7D'>
<tr>
  <td role="module-content"  valign="top" height="100%" style="padding: 0px 0px 0px 0px;" bgcolor="#ffffff"><div style="font-size:12px;line-height:150%;margin:0;text-align:center;">
  This email was sent by: [Sender_Name] [Sender_Address], [Sender_City] [Sender_State] [Sender_Zip]
</div>
<div style="font-size:12px;line-height:150%;margin:0;text-align:center;">
  To unsubscribe click: <a href="[Unsubscribe]">here</a>
</div></td>
</tr>
</table>
</td>
            </tr>
          </table>
        </td>
        
      </tr>
    </table>
  </td></tr>
</table>

                                </tr></td>
                              </table>
                            <!--[if (gte mso 9)|(IE)]>
                          </td>
                        </td>
                      </table>
                    <![endif]-->
                    </td>
                  </tr>
                </table></td>
              </tr>
            </table>
          <!--[if (gte mso 9)|(IE)]>
          </td>
        </tr>
      </table>
      <![endif]-->
      </tr></td>
      </table>
    </div>
  </center>
</body>
</html>

最佳答案

您的代码存在问题，电子邮件客户端不支持嵌入式 css。因此，您需要的所有样式都必须与标签内联。虽然它可能也很丑陋，但布局电子邮件模板的最佳方式是使用表格。

但是，这里有一些可能会帮助您解决这个问题。

小贴士

这行不通:

<style media="screen">
    h1{
        color: red;
    }
</style>

<h1>I like turtles</h1>

这会起作用:

<h1 style="color:red;">I like turtles</h1>

有用的资源

您可以阅读本文以了解有关创建电子邮件模板的更多信息。

  1. Source 1
  2. Source 2

此外，还有一些inliner 可以将您的嵌入式 css 转换为内联 css。我个人正在使用 Zurb's email inliner解决这个问题。

我只能说这么多，希望这能帮到你。祝你好运:)

关于css - Sendgrid 模板 CSS 被忽略，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37834356/

上一篇：ios - PackageApplication 失败，因为应用程序不满足其指定要求

下一篇：audio - 如何使用网络音频 api 重新触发(阻塞)声音

相关文章：

sendgrid - 与 SendGrid 集成

html - 如何在 HTML 电子邮件模板中嵌入图像？

html - 在 html 中显示标签不适用于 html 电子邮件模板

javascript - 具有自动浏览器刷新 JavaScript 的响应式 FB 页面插件

html - 跨度标签中的额外边距？

javascript - 在 Bootstrap 中，为什么我禁用的按钮没有工具提示？

c# - 在 C# 中使用 X-SMTPAPI 发送网格字符编码 header

javascript - 使用 SendGrid 和 Firebase 的跨国电子邮件没有错误但没有电子邮件(使用 NodeMailer 作为答案)

ruby-on-rails - (Rails Emails) 在 rails 中创建、查看、更新电子邮件模板

javascript - 更改谷歌图表的属性

©2024 IT工具网  联系我们