Question

I just added another Jade template to my express project, and now it renders blank pages, with empty head and body tags. It works when index.jade extends layout.jade, but it breaks if layout.jade extends logo.jade. There are no errors in the console.

Here is a simplified version of the project, which works fine.

app.js:

var express = require('express'),
    http = require('http'),
    path = require('path'),
    request = require('request');

var app = express();

app.configure(function(){
    app.set('port', process.env.PORT || 3000);
    app.set('views', __dirname + '/views');
    app.set('view options', {'layout': false});
    app.set('view engine', 'jade');
    app.use(express.bodyParser());
    app.use(express.methodOverride());
    app.use(app.router);
    app.use(express.static(path.join(__dirname, 'public')));
});

app.configure('development', function(){
    app.use(express.errorHandler());
});

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

http.createServer(app).listen(app.get('port'), function(){
    console.log("Express server listening on port " + app.get('port'));
});

views/index.jade:

extends layout

block content
    p Hello

views/layout.jade:

doctype 5
html(xmlns='http://www.w3.org/1999/xhtml')
    head
        title= title
        link(rel='stylesheet', href='/stylesheets/style.css')
    body
        h1= title
        block content

Adding logo.jade and extending it from layout.jade breaks Jade rendering.

GET http://localhost:3000/

responds

200 OK
content-length: 0

modified views/layout.jade:

extends logo

doctype 5
html(xmlns='http://www.w3.org/1999/xhtml')
    head
        title= title
        link(rel='stylesheet', href='/stylesheets/style.css')
    body
        block logo
        h1= title
        block content

new views/logo.jade:

block logo
    svg(xmlns='http://www.w3.org/2000/svg')
        rect(
            stroke='black'
            fill='blue'
            x='45'
            y='45'
            width='20px'
            height='30px'
            stroke-width='1')

Answer 1

Take care with layouts, templates and partials.

When you tell express to render a page with jade, it looks for the matching template file (for example logo.jade). This is the entry point and from there on the page is rendered.

If you want to use a layout, you have to tell it in your template file. If you look at the index.jade, it says that the layout.jade should be extended. In you logo.jade there is no such declaration, so there is nothing to render as the logo block is not defined. If you want to use partials (include in jade), you have to tell so in the template file.

Blocks in your layout file are just placeholders that can be extended or overwritten or even left empty. I would suggest to add the logo directly to your layout or to include it. See Jade documention on includes for more information.

So your layout.jade should look like this:

doctype 5
html(xmlns='http://www.w3.org/1999/xhtml')
    head
        title= title
        link(rel='stylesheet', href='/stylesheets/style.css')
    body
        include includes/logo
        h1= title
        block content

And the new includes/logo.jade:

svg(xmlns='http://www.w3.org/2000/svg')
    rect(
        stroke='black'
        fill='blue'
        x='45'
        y='45'
        width='20px'
        height='30px'
        stroke-width='1')