Question

我有一个玉石电子邮件模板。它包含一个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>

但我希望这两个段落标记都在主<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>

Answer 1

要真正回答原始问题，您需要在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;')
    if block
      block

Answer 2

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>

玉模板不保持嵌套

2 个答案: