How do Jade blocks work - Jade

pug

Solution

A block is a "block" of content you want to insert to the template you are extending it from.

Assuming directory layout:

|--views  
   |--layout.jade  
   |--index.jade  
   |--main.jade

Here is an example using your templates:

//layout.jade

doctype html
html
  head
    link(href="/favicon.ico", rel="shortcut icon",type="image/x-icon")
    link(rel="stylesheet", href="/css/bootstrap.css")
    link(rel="stylesheet", href="/vendor/toastr/toastr.css")
    link(rel="stylesheet", href="/css/site.css")
  body(ng-app="app")
    h1 Hello Worldd
    block content
    include scripts

Then all other pages that extend from layout.jade can insert content into that block:

//index.jade

extends layout
block main-content
  section.content
    div(ng-view)

//main.jade

extends layout
block content
  h1 This is a Partial
  h2 {{ myVar }} // which should be: h2= myVar

This will render (assuming using Express):

//index.html

doctype html
html
  head
    link(href="/favicon.ico", rel="shortcut icon",type="image/x-icon")
    link(rel="stylesheet", href="/css/bootstrap.css")
    link(rel="stylesheet", href="/vendor/toastr/toastr.css")
    link(rel="stylesheet", href="/css/site.css")
  body(ng-app="app")
    h1 Hello Worldd
    section.content
      div(ng-view)
    include scripts

//main.html

doctype html
html
  head
    link(href="/favicon.ico", rel="shortcut icon",type="image/x-icon")
    link(rel="stylesheet", href="/css/bootstrap.css")
    link(rel="stylesheet", href="/vendor/toastr/toastr.css")
    link(rel="stylesheet", href="/css/site.css")
  body(ng-app="app")
    h1 Hello Worldd
    h1 This is a Partial
    h2 {{ myVar }} // which should be: h2= myVar
    include scripts

Problem

I am trying to use a `Jade` block and my content is not displaying. Here is my `index.jade`: ``` //index.jade extends ../includes/layout block main-content section.content div(ng-view) ``` It is adding the `layout` file like I expect. Here is that file: ``` //layout.jade doctype html html head link(href="/favicon.ico", rel="shortcut icon",type="image/x-icon") link(rel="stylesheet", href="/css/bootstrap.css") link(rel="stylesheet", href="/vendor/toastr/toastr.css") link(rel="stylesheet", href="/css/site.css") body(ng-app="app") h1 Hello Worldd include scripts ``` But it does not include my `main.jade`: ``` // main.jade h1 This is a Partial h2 {{ myVar }} ``` or any of the code after it. This is my first time using `Jade` so I am struggling. Also, what is the `-content` for when you are including a `block`? Thanks.

Original source