Premailer與Jekyll

Question

我正在開發一個既有靜態網頁又有HTML電子郵件模板的項目。如您所知，HTML電子郵件需要將所有CSS內聯，這是一個非常難以管理的問題。大多數人使用Premailer自動處理 - https://github.com/premailer/premailer

我會如何使用premailer與Jekyll的某種佈局？

是否可以通過插件使用premailer？

Answer 1

是的，你可以！

你premailer安裝後，你可以做一個jekyll plugin像這樣的：

require 'premailer' 

module Jekyll 
    class Site 

    # create an alias for the overriden site::write method 
    alias orig_write write 

    # we override the site::write method 
    def write 

     # first call the overriden write method, 
     # in order to be sure to find generated css 
     orig_write 

     # layout name we are looking for in pages/post front matter 
     # this can come from site config 
     @layout = 'post' 

     # this the css that will be inlined 
     # this can come from site config 
     @css_path = '/css/main.css' 

     # look for generated css file content 
     @cssPages = pages.select{ |page| 
     page.destination(dest).include? @css_path 
     } 

     # look again in pages and posts 
     # to generate newsletters with premailer 
     newsletters = [posts, pages].flatten.select{ |page_or_post| 
     page_or_post.data['layout'] == @layout 
     } 

     newsletters.each do |newsletter| 

     newsletter.output = Premailer.new(
      newsletter.output, 
      { 
       # declare that we pass page html as a string not an url 
       :with_html_string => true, 
       # also pass css content as a string 
       :css_string  => @cssPages.join, 
      } 
     ).to_inline_css; 

     # rewrite the newsletter with inlined css 
     newsletter.write(dest) 

     end 
    end 
    end 
end 

這是關於如何premailer與傑基爾整合總體思路。代碼當然可以改進。

注意：我決定不使用Generator plugin，因爲當調用生成器時，sass和scss文件仍然未被分析，並且生成的css不可用。