Question

Jade template inheritance in Jade is driving me mad…

The problem is that I would like to exclude a large bit of code to external template and then include it. When I do so everything gets f** up :/

Sample code:

!!!5
html(lang="en")
  head
    title sample title
  body
    header
      div#someDiv
        div#someContent
          section#main

Let’s say I want to exclude everything from top to div#someContent. Then I would have

include inc/header
          section#main

This way code indentation goes wrong and everything is messed up :/ Can you point me to the right direction in including templates?

Thanks in advance!

Answer 1

This is not template inheritance, but includes (template inheritance is with block and extends keywords). I did try your code, and what it does with the include is insert “section#main” into “div#someDiv” instead of “div#someContent”. Not sure if this should be considered a bug or what (how can the parser know if the added content should be inside the last item in the include file, or at the same level?). It doesn’t seem to care about the level of indentation under the “include” statement.

However, if you DO use template inheritance, you can put an empty block at the end of your include:

!!!5
html(lang="en")
    head
        title sample title
    body
        header
            div#someDiv
                div#someContent
                    block content

Then you can append the block in your actual content file:

include inc/header
    block append content
        section#main

And this renders OK in the DOM (section#main is inside div#someContent). Depending on the structure of your views, you may be better off with “extends” instead of “include + block append”. You can check Jade’s GitHub doc for the details.