2.3.3 views目录模板说明

在routes/index.js路由里，渲染模板代码如下。

我们可以通过ctx.render来渲染模板引擎。ctx.render的参数包括以下两个。

○ 模板文件：其实就是views/index.pug，相对位置在views目录下。

○ 模板编译需要的数据：普通的JSON数据即可。

下面来看一下views/index.pug的具体代码。

首先，它继承自layout.pug，这体现了Pug模板引擎提供的继承功能，可以有效减少代码量。这里的block也是Pug提供的特性。

再来看一下views/layout.pug的具体代码，如下。

除了常规的代码，这里还有一个block content。模板也要区分可变与不变部分，这里的block content其实就是可变部分，由继承自该布局的模板实现。也就是说，views/index.pug里的block content中的内容会填充到布局里的block content中。

这里可以“脑补”一下填充后的结果，如下。

使用布局的好处是非常明显的，尤其是当有多个页面复用统一的布局时。比如整个Web应用的报错页面是views/error.pug，这个页面的布局也是继承自layout.pug的，代码如下。