Is there any way to use Jade blocks in Harp.js?

Question

I'm creating a site using Harp, and I was wondering if there is a way to use Jade blocks alongside the normal != yield way of working. Basically, for page specific scripts, I'd like to pass a block into my layout. At the moment, whatever I have in a block in my template just gets passed through as is into my layout.

For example:

// _layout.jade
html
  head
    title Hello, world
  body
    != yield
    div Random delimiter
    block scripts

// index.jade
h1 Hello, world
block scripts
  script(src='/some/script.js').
  div Not working

Outputs:

<html>
  <head>
    <title>Hello, world</title>
  </head>
  <body>
    <h1>Hello, world</h1>
    <div>Not working</div>
    <div>Random delimiter</div>
  </body>
</html>

Any ideas?

score 5 · Accepted Answer · edited Jan 06 '15 at 13:54

Yes, you could do something like this:

// _custom_layout.jade
html
  head
    title Hello World
  body
    block main_content
      //- Default main content
    div Delimiter
    block scripts
      //- Default scripts here

And

// index.jade
extends _custom_layout.jade
block main_content
  h1 Hello From Index
block scripts
  script(src='/some/script.js').

That should output

<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello From Index</h1>
    <div>Delimiter</div>
    <script src="/some/script.js"></script>
  </body>
</html>

To take advantage of jade's block feature, use something other than _layout.jade because that file name has a defined use in Harp. You'll have to assign the custom templates to pages using _data.json.

I haven't tested this code, comment if there's anything wrong with it and I'll fix it.

Thanks, I ended up having my main layout inherit a custom layout similar to the above, bit of a pain doing it this way but at least it works! — Lee, May 23 '14 at 07:17

Is there any way to use Jade blocks in Harp.js?

1 Answers1