Large applications often share the same page structure: a document shell, navigation, footer and common scripts.

Template inheritance lets you define that structure once and customize individual sections on each page.

Create a layout

//- layout.jade

doctype html

html
  head
    title= title

  body
    header
      h1 My Website

    main
      block content

    footer
      p Site footer

A page can extend the layout:

//- home.jade

extends layout.jade

block content
  h2 Welcome
  p This is the home page.

Replacing blocks

A child template can replace the default contents of a named block.

Append and prepend

You can also add content before or after an existing block rather than replacing it.

Template inheritance is particularly useful for site-wide layouts and reusable application shells.