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:

├─┬ 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?

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