2013-12-17 49 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