蟑螂窩

使用 Roadie 減輕 Email 排版的痛

| Comments

Roadie Repo : https://github.com/Mange/roadie

在排版 Email 時最痛苦的就是要寫 Inline Style，跟平常在排版的時候習慣大不相同， 而且 Inline Style 非常難維護，一封信同樣的 Style 就要複製一次，不同信的同樣 Style 也要複製一次， 哪天單純只是要改一個小樣式，所有的 Email 都要拿出來改，光用想的就很恐怖，這就是每次要排版 Email 都很痛苦的其中一個原因。

Roadie 就是用來解決這個問題的，你可以像平常一樣用 <style type="text/css"></style>，或是直接包 Assets 裡面的 CSS 進來，甚至是 SCSS 也可以， 它會自動幫你把 CSS 轉成 Inline Style，還會幫你把 HTML 裡的圖片改成 absolute URL。

安裝 Roadie

在 Rails 的 Gemfile 加入：

Gemfile
1

gem 'roadie'

設定

在 application.rb 或環境設定檔裡面，依需求加入以下的設定：

application.rb
1
2
3

config.roadie.enabled = false # Roadie 是預設開啟的，可以設為 false 關閉 Roadie。  
config.action_mailer.default_url_options = {:host => 'example.com'} # 有這行會自動將圖片的網址變成 Absolute。  
config.assets.enabled = true # 預設是使用 assets pipeline 裡面的 CSS，如設為 false，則會到 `public/stylesheets` 裡面找。

其他還有更進階的設定，請參考 Roadie Repo。

開始使用

先測試看看用 <style type="text/css"></style> ，是否能正確轉換：

1
2
3
4
5
6
7

<style type="text/css">
  .red {
    color: red;
  }
</style>

<p class="red">Red text</p>

成功輸出成 Inline Style：

1

<p style="color:red">Red text</p>

使用 Asset Pipeline

前面的簡介有提到，可以直接使用 Asset pipeline 裡面的 SCSS，這樣我們就可以不用每封 Email 都重寫 CSS 了。

在 Mailer 裡面加上 default :css => :email，代表使用 email 這個 CSS。

app/mailers/sample_mailer.rb
1
2
3
4
5
6
7
8

class SampleMailer < ActionMailer::Base
  default :css => :email, :from => "example@example.com"

  def send_example_email
    mail(:to => "example@example.com", :subject => "Sample Email")
  end

end

也可以個別在每個 method，加入 CSS：

app/mailers/sample_mailer.rb
1
2
3
4
5
6
7
8

class SampleMailer < ActionMailer::Base
  default :from => "example@example.com"

  def send_example_email
    mail(:to => "example@example.com", :subject => "Sample Email", :css => [:email])
  end

end

在 app/assets/stylesheets 加入 email.css.scss：

app/assets/stylesheets/email.css.scss
1
2
3
4
5

$red: red;

.red {
  color: $red;
}

接著 Email 的 HTML 就更簡潔了：

1

<p class="red">Red text</p>

太棒了！一樣可以看到正常運作：

1

<p style="color:red">Red text</p>

圖片自動轉換 Absolute URL

先隨意的加一段 Image tag：

1

<img src="logo.png">

可以看到自動變成：

1

<img src="http://example.com/logo.png">

如果是 CSS 裡面的 Image：

app/assets/stylesheets/email.css.scss 
1
2
3

.logo {
  background-image: image-url("logo.png")
}

竟然也會自動轉換：

1

<p style="background-image:url(http://example.com/assets/logo.png)">test</p>

小結

雖然 Email 排版依然很痛苦，但是已經輕鬆很多，這個 Gem 還有更多設定，可以在 Roadie Repo 找到， 可以更進階得去修改 Email 裡面的內容。

Comments