Jade template layouts not working in combination with Node.js

Question

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:

├─┬ [email protected] 
│ ├── [email protected] 
│ ├─┬ [email protected] 
│ │ ├── [email protected] 
│ │ ├── [email protected] 
│ │ ├── [email protected] 
│ │ └── [email protected] 
│ ├── [email protected] 
│ ├── [email protected] 
│ └── [email protected] 
└─┬ [email protected] 
  ├── [email protected] 
  └── [email protected] 

Any ideas on why this isn't working?

Answer 1

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"
    });
});

Answer 2

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.