微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

GMail html 正文可以在 GAS 中使用 Materialize、Bootstrap 等进行格式化吗?

如何解决GMail html 正文可以在 GAS 中使用 Materialize、Bootstrap 等进行格式化吗?

使用 GMailApp.sendEmail 方法从 Google Apps 脚本发送带有 html 正文的电子邮件时,可以预先设置 html 样式。但是当尝试使用 Materialize 设置样式时,它对我来说失败了,邮件显示为基本的未格式化的 html。我知道 html 模板很挑剔,但可以应用样式框架吗?如果是这样,有人知道如何调试导致它失败的原因吗?

示例 GA 脚本(code.gs):

function spamMe() {
  let recipient = 'mymail@gmail.com';
  let subject = 'Your daily serving of spam. For FREE!';
  let html = HtmlService
    .createTemplateFromFile('emailbody')
    .evaluate()
    .getContent();
  GmailApp.sendEmail(recipient,subject,'',{ htmlBody: html });
}

示例 html 正文模板 (emailbody.html):

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  </head>
  <body>    
    <div class="container">
      <h1>hey worldo!</h1>
      <div class="row">
        <div class="col s12 m5">
          <div class="card-panel teal">
            <span class="white-text">I am a very simple card. I am good at containing small bits of information.
            I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.
            </span>
          </div>
        </div>
      </div>
    </div>    
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </body>
</html>

解决方法

理论上它可以工作,只要您内联代码(style="..." 而不是 <link>)。不过,这是一个非常大的“可能”,因为像 Bootstrap、Materialize 这样的大多数系统都是为网络构建的,其功能与电子邮件完全不同。

因此,大多数(所有?)系统都依赖于 <div>s,而 Outlook 桌面不能很好地与 <div>s 配合使用,这对您来说效果不佳。

再深入一点,如果有两列和三列,您也会对它们进行不同的设置,这样即使没有媒体查询,它们也会堆叠起来。

此外,许多组件的编码方式不同,并且不要使用例如 Bootstrap 依赖的 flexbox。有关详细信息,请参阅 https://www.caniemail.com/

但是,有一个名为 MJML (https://mjml.io/) 的系统与您可能想要的很接近。但它是编译的,而不是类驱动的。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。