Title not defined...node.js, express,jade, twitter bootstrap

Problem

Im currently trying to learn node.js and I am working with express and jade. I am trying to get twitter bootstrap working but am running into issues... here is my error:

ReferenceError: C:\Users\acraze\chatty\views\index.jade:4
2|  
3| block content
 > 4|   div.top
5|     form.form-horizontal(method="post", id="loginForm")
6|       label Username
7|       input.span3(id="username", type="text", name="User", placeholder="Enter your username")

here is what my index.js looks like:

var express = require("express");
var app = express();
var port =3700;

app.set('views', __dirname + '/views');
app.set('view engine', "jade");
app.engine('jade', require('jade').__express);
app.get("/", function(req, res){
res.render("index");
});

app.use(express.static(__dirname + '/public'));
var io = require('socket.io').listen(app.listen(port));
console.log("Listening on port " + port);

io.sockets.on('connection', function (socket) {
socket.emit('message', { message: 'welcome to the thunderdome lulz' });
socket.on('send', function (data) {
    io.sockets.emit('message', data);
});
});

here is my layout.jade

!!!
html
  head
    title= title
    link(rel='stylesheet', href='/bootstrap/css/bootstrap.min.css')
    link(rel='stylesheet', href='/bootstrap/css/bootstrap-responsive.min.css')
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js')
    script(src='/bootstrap/js/bootstrap.min.js')
  body
    block content

and here is my index.jade

extends layout

block content
  div.top
    form.form-horizontal(method="post", id="loginForm")
      label Username
      input.span3(id="username", type="text", name="User", placeholder="Enter your username")
      label Password
      input.span3(id="password", type="password", name="Password")
      input.btn(type="submit", value="Log In")
  div.container
    div.content
      table.table.table-striped
        thead
          tr
            th Table
            th Heading
        tbody
          tr
            td Test1
            td Test2
          tr
            td Hello
            td World

  div.footer

does this have something to do the res.render("index"); line? I'm really confused...I'm currently using the latest versions of express, socket.io and jade... does this make any difference?

Problem courtesy of: accraze

Solution

You need to pass your title to the layout.

Try:

layout.jade

title = #{title} 

index.js

res.render('index', {title:'your_page_title'});
Solution courtesy of: jmingov

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.