2013-12-17 48 views
1

我有一個玉電子郵件模板。它包含一個mixin文件,其中包含header mixin,它應該包含在所有電子郵件中。它被正確地包含在內,但是由於它內部的嵌套層次(3層深度),我在mixin之後放置的任何內容都不會保持它應該嵌套的位置。玉模板不保持嵌套

views/mixins/email.jade

mixin header(siteLogo) 
    div(style='margin-bottom: 20px; border: 1px solid #ddd; padding: 20px; width: 50%; margin: 0 auto 20px;') 
    div(style='text-align: center; border-bottom: 1px solid #EEE; padding-bottom: 10px;') 
     img(src='#{siteLogo}', style='text-align: center;') 

views/emails/forgot_password.jade:

include ../mixins/email 

+header(siteLogo) 
    p 
    | Hi #{name}, 
    p 
    | Welcome to the site! 

生成HTML電子郵件一樣:

<div style="margin-bottom:20px;border:1px solid #ddd;padding:20px;width:50%;margin:0 auto 20px"> 
    <div style="text-align:center;border-bottom:1px solid #eee;padding-bottom:10px"> 
    <img src="path/to/image/logo" style="text-align:center"> 
    </div> 
</div> 
<p>Hi BobCobb</p> 
<p>Welcome to the site!</p> 

但我想這兩個paragra的ph標籤在主<div>裏面:

<div style="margin-bottom:20px;border:1px solid #ddd;padding:20px;width:50%;margin:0 auto 20px"> 
    <div style="text-align:center;border-bottom:1px solid #eee;padding-bottom:10px"> 
    <img src="path/to/image/logo" style="text-align:center"> 
    </div> 
    <p>Hi BobCobb</p> 
    <p>Welcome to the site!</p> 
</div> 

回答

0

Jade對html電子郵件沒用。我強烈建議不要使用任何網絡預期的框架。

閱讀更多關於如何html email differs from the web

這裏是你的代碼應該是什麼樣子,如果它是HTML電子郵件的優化:

<table width="50%" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #dddddd"> 
    <tr> 
    <td align="center"> 
     <img alt="" src="path/to/image/logo" width="100" height="75" style="margin: 0; border: 0; padding: 0; display: block;"> 
    </td> 
    </tr> 
    <tr> 
    <td style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000; padding:20px; border-top:1px solid #dddddd;"> 
     <p>Hi BobCobb</p> 
     <p>Welcome to the site!</p> 
    </td> 
    </tr> 
</table> 
+0

唯一的模板/框架我知道的HTML電子郵件是[由Zurb油墨(http://zurb.com/ink/templates.php)。 – John

+0

我以前見過墨水,並且意識到在電子郵件中使用除表格之外的任何東西都會看起來很糟糕,但是我要解決的主要問題是我想使用mixim和partials,所以我不會需要維護一個相同的電子郵件模板,所以如果我改變一個頁眉或頁腳,我可以在一個位置完成。這是努力保持乾爽。 –

+0

你可以嘗試像php include()將子模板文件合併在一起(單獨的文件頭,頁腳,2列部分,3列部分等)。這樣你可以通過混合和匹配塊來構建。 – John

1

要真正回答原來的問題,你需要將混入其中塊應該呈現中指定。

views/mixins/email.jade

mixin header(siteLogo) 
    div(style='margin-bottom: 20px; border: 1px solid #ddd; padding: 20px; width: 50%; margin: 0 auto 20px;') 
    div(style='text-align: center; border-bottom: 1px solid #EEE; padding-bottom: 10px;') 
     img(src='#{siteLogo}', style='text-align: center;') 
    if block 
     block