更改电子邮件正文的设计

Question

我在 email.js 中编写了发送邮件的代码如下：

Accounts.emailTemplates.siteName = "xyz";
Accounts.emailTemplates.from     = "xyz <admin@xyz.com>";

Accounts.emailTemplates.verifyEmail = {
    subject() {
        return "[xyz] Verify Your Email Address";
    }
};

Accounts.emailTemplates.verifyEmail.text = function( user, url) {
    let emailAddress   = user.emails[0].address,
    urlWithoutHash = url.replace( '', '' ),
    supportEmail   = "support@xyz.com",
    emailBody      = `To verify your email address (${emailAddress}) visit the following link:\n\n${urlWithoutHash}\n\n If you did not request this verification, please ignore this email. If you feel something is wrong, please contact our support team: ${supportEmail}.`;
    return emailBody;   
}

电子邮件正在运行，我只想更改设计。如何设计邮件正文？我可以在电子邮件正文中插入 html 代码，以便进行适当的响应式电子邮件设计吗？我已经尝试了很多方法。谁能帮帮我？

我已经使用 mail gun API 来发送电子邮件，无论如何都可以使用模板。

我尝试过使用 grunt 电子邮件模板，但我很惊讶我需要帮助才能完成我的任务。

Answer 1

您可以使用SSR 包创建电子邮件模板。

Accounts.emailTemplates.verifyEmail.html = function (user, url) {
       SSR.compileTemplate( 'registartionEmail', Assets.getText( 'email_templates/registration_confirm.html' ) );
       var emailData = {
              x: y;
       };
       return SSR.render( 'registartionEmail', emailData );
};

Answer 2

要在服务器上处理将模板转换为原始 HTML 的过程，您需要在应用程序中添加一个名为 meteorhacks:ssr 的包。安装软件包后，您可以将纯 HTML 文件存储在 /private 目录中，然后在稍后转换它们，传递任何数据以替换过程中的 {{name}} 等车把助手。

例如，这是我在新用户注册时用来发送欢迎电子邮件的一些代码：

import { SSR } from 'meteor/meteorhacks:ssr';

const getHTMLForEmail = (templateName, data) => {
  SSR.compileTemplate(templateName, Assets.getText(`email/templates/${templateName}.html`));
  return SSR.render(templateName, data);
};

const sendEmail = (emailAddress, html) => {
  if (emailAddress.includes('@')) {
    const emailData = {
      to: emailAddress,
      from: 'Test Email <hello@test.io>',
      subject: 'Welcome aboard, team matey!',
      html,
    };

    Meteor.defer(() => Email.send(emailData));
  }
};

export const sendWelcomeEmail = (user, profile) => {
  let email;
  if (user.services.facebook) {
    email = user.services.facebook.email;
  } else if (user.services.google) {
    email = user.services.google.email;
  }

  const data = {
    email,
    name: profile && profile.name ? profile.name : '',
    url: 'www.google.com',
  };
  const html = getHTMLForEmail( 'welcome-email', data );

  sendEmail(data.email, html);
};

您会发现 Meteor Chef 的以下两篇文章非常有用（还显示了 html 电子邮件模板的外观）：

1. Using the email package
2. Sign up with email verification