目前找到的样式都比较差,在自己的项目中目前没有使用mail样式,参考drifting中的一篇文章,笔记如下

#gem
gem 'inky-rb', require: 'inky'
gem 'premailer-rails'

#安装
rails g inky:install #将上面生成的foundation_emails.scss移动到vendor/assets/stylesheets/中
#以上移动样式的目的是为了样式只是作用域mail,而不作用于整个项目,如果样式在app/assets/stylesheets中,则作用整个项目样式

#预编译config/initializers/assets.rb
Rails.application.config.assets.precompile += %w( foundation_emails.css )
#修改模板样式mailer.html.erb
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />

    <%= stylesheet_link_tag "foundation_emails" %>
  </head>

  <body>
    <table class="body" data-made-with-foundation>
      <tr>
        <td class="center" align="center" valign="top">
          <center>
            <%= yield %>
          </center>
        </td>
      </tr>
    </table>
  </body>
</html>
#修改单个页面,必须inky结尾,比如password_reset.html.inky
<container>
  <row class="header">
    <columns>
      <spacer size="16"></spacer>

      <h4 class="text-center">
        <%= @greeting %>
        <%= @user.first_name %>
        <%= @user.last_name %>,
      </h4>
    </columns>
  </row>
  <row>
    <columns>
      <spacer size="32"></spacer>
      <center>
        <img src="http://placehold.it/250x250">
      </center>
      <spacer size="16"></spacer>
      <h1 class="text-center">Forgot Your Password?</h1>
      <spacer size="16"></spacer>
      <p class="text-center"><%= @message %></p>
      <button class="large expand" href="#">Reset Password</button>
      <hr/>
      <p><small>You're getting this email because you've signed up for email updates</small></p>
    </columns>
  </row>
  <spacer size="16"></spacer>
</container>

参考源码, 参考样式

results matching ""

    No results matching ""