Layouts Express 3.0 com Jade

Isso me levou um bom tempo de pesquisa no Google, então eu pensei em colocá-lo aqui para referência. Se você estiver usando Express.js 3.0 com Jade como uma linguagem de modelos, não há mais um conceito de “layouts” – em que você define algum layout html global e então renderiza seu conteúdo dentro desse layout.

Isso teria se parecido com isto:

app.js

app.set('views', __dirname + '/views');
app.set('view engine', 'jade');

app.get("/", function(req, res) {
  res.render('index');
});

E então em / views você teria layout.jade

!!! 5

body
  #wrapper != body

e index.jade

h1 "hello, world"

É assim que estou acostumado com as coisas funcionando, vindo de um mundo Ruby. Mas com Express.js 3.0 e a versão mais recente do Jade (0,31, eu acho?), Isso não faz nada. Em vez disso, o que você deseja são blocos. Seu app.js permanece o mesmo, mas suas visualizações mudam. Funciona assim:

layout.jade

!!! 5

body

#wrapper
  block content

index.jade

extends layout

h1 "hello, world"

Tudo isso é necessário porque no Express.js 3.0, o conceito de “layouts” na renderização de visualizações foi removido pelos autores, então você precisa mover sua lógica de layout para as próprias visualizações.