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

编程问答 2022-04-23

问题描述

使用 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/) 的系统与您可能想要的很接近。但它是编译的，而不是类驱动的。

gmailgmailgoogle-apps-scripthtml-email