Jade模板不保持嵌套

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

玉對於HTML電子郵件毫無用處。 我強烈建議您不要使用任何Web框架。

詳細了解html電子郵件與網絡的區別 。

如果代碼針對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>