Jade template layouts not working in combination with Node.js

I'm trying to create a simple server in Node.js which uses Jade templates and layouts. For some reason it will only load the template and not the layout.

Here's what I've got:

main.js

var express = require('express');

var app = express.createServer();

app.set('views', __dirname + '/views'); 
app.set('view engine','jade');
app.set('view options', {
 layout: true
});

app.get('/', function(req,res) {
res.render('index', { title: 'My site' });
});

app.listen(4000);

As you can see layouts are enabled. I've tried referencing it directly in the render method but it doesn't make a difference. Worth noting might also be that the "title: 'My site'" doesn't work either.

index.jade

h2 Hello!
p I really hope this is working now

lo.jade

!!! 5
html
  head
    title Why won't this work
  body
    h1 I AM A LAYOUT
    div= body

Here's mynpm list:

├─┬ express@3.0.0alpha1 
│ ├── commander@0.5.2 
│ ├─┬ connect@2.1.2 
│ │ ├── crc@0.1.0 
│ │ ├── formidable@1.0.9 
│ │ ├── mime@1.2.4 
│ │ └── qs@0.4.2 
│ ├── debug@0.6.0 
│ ├── mime@1.2.5 
│ └── mkdirp@0.3.1 
└─┬ jade@0.24.0 
  ├── commander@0.5.2 
  └── mkdirp@0.3.0

Any ideas on why this isn't working?

I think you're doing layout the wrong way. I do it this way :

I set layout to false :

app.set('view options', {
    layout: false
});

In a layout.jade file :

doctype 5
html(lang="en")
    head
        title MySite #{title}
body
    block mainContent

And in the rendered page (let's say : home.jade), which include a variable (content)

extends layout

block mainContent
    h1 This is home
    p= content

You could have another page based on (extending) the same layout (other.jade) with different variables (user)

extends layout

block mainContent
    h1 Oh look ! Another page
    p= user

And call them like this :

app.get('/', function(req, res) {
    res.render('home', { 
        title : "Home",
        content: "Some Home page content"
    });
});

app.get('/anotherPage', function(req, res) {
    res.render('other', { 
        title : "Other page",
        user: "Here goes a user name"
    });
});

This appears to be a change to the latest version of Express/jade.

Express:  '3.0.0alpha1': '2012-04-18T22:47:46.812Z'
Jade:     '0.25.0':      '2012-04-18T22:40:01.162Z'

Caught me out too!

Several other things changed as well - took me a while to work it out.

Unfortunately, Express & Jade are not especially well documented and many of the examples you find on the web are out of date.

Arnaud has given the new way to use a layout now. I don't know that the old way works at all. Certainly when I tried something like dtyon's and it doesn't seem to work any more.

So check what version of Express & Jade you have installed using the commands:

npm show express dist.tarball
npm show jade dist.tarball

Hope this helps. J.

As far as I can tell, by default the layout file should be named 'layout.jade'. However, if you want a different name, you can use the 'layout' hint option when rendering:

res.render('index', { layout: 'lo', title: 'My site' });

I'm also assuming that the lo.jade layout file is in the root directory /views/.

I had the same issue, just so people are aware, the new way that layouts work in express/jade is that the layout is already extended by default, and your block automatically gets passed up as a "body" variable

E.G.

index.jade

/* This will be passed as "body" no need for "block body" */
h1= title
p Welcome to #{title}

layout.jade

doctype
html
  head
    meta(charset='utf-8')
  body
    /* body is output here using != which outputs variable without escaping characters */
    section!= body