接下来我们把两个 section 模版放到两个不同的模版文件里：
views/s1.jade:
h1 Partial 1
.content!=content
views/s2.jade:
h1 Partial 2
.content!=content
在 layout.jade 的 style 里增加一些样式
section h1 {
font-size: 1.5;
padding: 10px 20px;
margin: 0;
border-bottom: 1px dotted gray;
}
section div {
margin: 10px;
}
将 app.js 的 app.use() 部分更改为：
var temp = {
s1: jade.compile(fs.readFileSync(path.join(__dirname, ‘views’, ‘s1.jade’)))
, s2: jade.compile(fs.readFileSync(path.join(__dirname, ‘views’, ‘s2.jade’)))
}
app.use(function (req, res) {
res.render(‘layout’, {
s1: temp.s1({ content: “Hello, I’m the first section.” })
, s2: temp.s2({ content: “Hello, I’m the second section.” })
})
})
之前我们说“以子模版渲染完成以后的 HTML 作为父模版的数据”，指的就是这样，temp.s1 和 temp.s2 两个方法会生成 s1.jade 和 s2.jade 两个文件的 HTML 代码，然后把这两段代码作为 layout.jade 里面 s1、s2 两个变量的值。
现在页面看起来是这样子：
一般来说，两个 section 的数据是分别获取的——不管是通过查询数据库还是 RESTful 请求，我们用两个函数来模拟这样的异步操作。
var getData = {
d1: function (fn) {
setTimeout(fn, 3000, null, { content: “Hello, I’m the first section.” })
}
, d2: function (fn) {
setTimeout(fn, 5000, null, { content: “Hello, I’m the second section.” })
}
}
这样一来，app.use() 里的逻辑就会比较复杂了，最简单的处理方式是：
app.use(function (req, res) {
getData.d1(function (err, s1data) {
getData.d2(function (err, s2data) {
res.render(‘layout’, {
s1: temp.s1(s1data)
, s2: temp.s2(s2data)
})
})
})
})
这样也可以得到我们想要的结果，但是这样的话，要足足 8 秒才会返回。
