Jade template not maintaining nesting

Question

I've got a jade email template. It includes a mixin file which includes the header mixin, which should be in all emails. It gets included properly, but due to the nesting level within it (3 levels deep), anything I put after the mixin, doesn't maintain nesting where it should.

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!

Generates the email html like:

<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>

But I want both of those paragraph tags to be inside of the main <div> like:

<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>

score 1 · Answer 1 · answered Sep 18 '15 at 18:42

To actually answer the original question, you need to specify within the mixin where the block should render.

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

score 0 · Answer 2 · edited May 23 '17 at 12:24

0

Jade is useless for html email. I would strongly recommend against using any web intended framework.

Read up more on how html email differs from the web.

Here is what your code should look like if it is optimized for html email:

<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>

edited May 23 '17 at 12:24

Community

1
1

answered Dec 18 '13 at 14:19

John

11,985
3
45
60

The only template/framework I am aware of for html email is [Ink by Zurb](http://zurb.com/ink/templates.php). – John Dec 18 '13 at 14:24
I've seen ink before and do realize that using anything but tables in emails will look bad, but the main point (of what I'm trying to solve) is that I want to use mixims and partials so that I don't need to maintain an assload of the same email templates so if I change a header or footer, I can do it in a single location. It's an effort to keep things DRY. – bob_cobb Dec 24 '13 at 11:24
You could try something like php include() to merge sub template files together (separate files for header, footer, 2-column section, 3-column section etc). That way you can build by mix and matching blocks. – John Dec 24 '13 at 15:12

Jade template not maintaining nesting

2 Answers2