如何使用Rails中的css和图像创建电子邮件?

Aks*_*hay 25 css email ruby-on-rails actionmailer

如何从Rails应用程序创建和发送包含图像和正确格式的电子邮件?就像你从facebook那样得到的.

Bo *_*nes 32

假设您知道如何使用ActionMailer从Rails发送普通的纯文本电子邮件,要使HTML电子邮件正常工作,您需要为电子邮件设置内容类型.

例如,您的notifer可能如下所示:

class MyMailer < ActionMailer::Base
  def signup_notification(recipient)
    recipients   recipient.email_address_with_name
    subject      "New account information"
    from         "system@example.com"
    body         :user => recipient
    content_type "text/html"
  end
end
Run Code Online (Sandbox Code Playgroud)

注意这一content_type "text/html"行.这告诉ActionMailer发送内容类型text/html而不是默认值的电子邮件text/plain.

接下来,您必须使您的邮件程序视图输出HTML.例如,您的视图文件app/views/my_mailer/signup_notification.html.erb可能如下所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css" media="screen">
      h3 { color: #f00; }
      ul { list-style: none; }
    </style>
</head>
<body>
  <h3>Your account signup details are below</h3>
  <ul>
    <li>Name: <%= @user.name %></li>
    <li>Login: <%= @user.login %></li>
    <li>E-mail: <%= @user.email_address %></li>
  </ul>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

如您所见,HTML视图可以包含<style>用于定义基本样式的标记.并非所有HTMLCSS支持,特别是在所有的邮件客户端,但你绝对应该有超过文字样式足够的格式控制.

如果您计划显示附加的电子邮件,嵌入图像会有点麻烦.如果您只是包含来自外部网站的电子邮件,则可以<img />像往常一样使用标记HTML.但是,许多邮件客户端将阻止显示这些图像,直到用户授权它为止.如果您需要显示附加图像,Rails插件内联附件可能值得一看.

有关Rails邮件支持的更多信息,ActionMailer文档是一个很好的资源

  • 请注意:Gmail将不支持**外部CSS.如果您希望CSS在Gmail中正确显示,您必须使用内联样式,如`<div style ="color:red"> text </ div>. (11认同)
  • 您可以使用Roadie自动内联样式:https://github.com/Mange/roadie (2认同)
  • Premailer gem 也非常适合内联样式。还有一个名为 inline_css 的 gem,它使用 Premailer 使其在您的电子邮件模板/布局中非常容易使用。 (2认同)