Template inheritance

Jade supports template inheritance via the block and extends keywords. A block is simply a "block" of Jade that may be replaced within a child template, this process is recursive.

Jade blocks can provide default content if desired, however optional as shown below by `block scripts`, `block content`, and `block foot`.

layout.jade

html
  head
    title My Site - #{title}
    block scripts
      script(src='/jquery.js')
  body
    block content
    block foot
      #footer
        p some footer content

Now to extend the layout, simply create a new file and use the `extends` directive as shown below, giving the path (with or without the .jade extension). You may now define one or more blocks that will override the parent block content, note that here the `foot` block is _not_ redefined and will output "some footer content".

page-a.jade

extends ./layout.jade

block scripts
  script(src='/jquery.js')
  script(src='/pets.js')

block content
  h1= title
  each pet in pets
    include pet

It's also possible to override a block to provide additional blocks, as shown in the following example where `content` now exposes a `sidebar` and `primary` block for overriding, or the child template could override `content` all together.

sub-layout.jade

extends ./layout.jade

block content
  .sidebar
    block sidebar
      p nothing
  .primary
    block primary
      p nothing

page-b.jade

extends ./sub-layout.jade

block content
  .sidebar
    block sidebar
      p nothing
  .primary
    block primary
      p nothing

Block append / prepend

Jade allows you to replace (default), prepend, or append blocks. Suppose for example you have default scripts in a "head" block that you wish to utilize on every page, you might do this:

html
  head
    block head
      script(src='/vendor/jquery.js')
      script(src='/vendor/caustic.js')
  body
    block content

Now suppose you have a page of your application for a JavaScript game, you want some game related scripts as well as these defaults, you can simply `append` the block:

extends layout

block append head
  script(src='/vendor/three.js')
  script(src='/game.js')

When using `block append` or `block prepend` the `block` is optional:

extends layout

append head
  script(src='/vendor/three.js')
  script(src='/game.js')