Express支持许多模板引擎,常用的有:
haml 的实现Haml haml.js 接替者,同时也是Express的默认模板引擎Jade 嵌入JavaScript模板EJS 基于CoffeeScript的模板引擎CoffeeKup 的NodeJS版本jQuery模板引擎 视图渲染(view randering)视图的文件名默认需遵循“<name>.<engine>”的形式,这里<engine>是要被加载的模块的名字。比如视图layout.ejs就是在告诉视图系统要require(‘ejs'),被加载的模块必须输出exports.compile(str, options)方法,并要返回一个函数来遵守Express的模板接口约定。我们也可以使用app.register()来映射模板引擎到其它文件扩展名,从而实现更灵活的模板引擎行为,如此一来就可以实现“csser.html”可以被ejs引擎所渲染。
下面我们将用Jade引擎来渲染index.html,因为我们没有设置layout:false,index.jade渲染后的内容将被作为body本地变量传入layout.jade。 复制代码 代码如下: 复制代码 代码如下: 复制代码 代码如下: <SPAN>res.render('index'); 复制代码 代码如下: <SPAN>res.render('index.jade'); 复制代码 代码如下: <SPAN>res.render('another-page.ejs'); 复制代码 代码如下: <SPAN>app.set('view options', { 复制代码 代码如下: <SPAN>res.render('csser-view.ejs', { layout: true }); 复制代码 代码如下: <SPAN>res.render('page', { layout: 'mylayout' }); 复制代码 代码如下: <SPAN>res.render('page', { layout: 'mylayout.jade' }); 复制代码 代码如下: <SPAN>res.render('page', { layout: __dirname + '/https://www.jb51.net/mylayout.jade' }); 复制代码 代码如下: <SPAN>app.set('view options', { 复制代码 代码如下: <SPAN>partial('comment', { collection: comments }); 复制代码 代码如下: <SPAN>partial('comment', comments);
<SPAN>app.get('https://www.jb51.net/', function(req, res){
res.render('index.jade', { title: 'CSSer, 关注Web前端技术!' });
});
</SPAN>
新增的“view engine”设置可以指定默认模板引擎,如果我们想使用jade可以这样设置:
<SPAN>app.set('view engine', 'jade');
</SPAN>
于是我们就可以通过下面的方式:
</SPAN>
代替如下方式:
</SPAN>
当“view engine”设置后,模板的扩展名就成了可选项,同时我们还可以混合匹配多模板引擎:
</SPAN>
Express同时提供了视图选项设置,这些设置会在每次视图渲染后应用,比如你并不经常使用layouts,就可以这样设置:
layout: false
});
</SPAN>
如果需要,这些设置可以在后续的res.render()调用中被覆盖:
</SPAN>
可以通过指定一个路径的方式来实现用自己的layout来代替系统默认的,比如如果我们将“view engine”设置为jade并且自定义了一个名为“./views/mylayout.jade”的layout,我们可以这样使用它:
</SPAN>
否则必须指定扩展名:
</SPAN>
这些路径也可以是绝对路径:
</SPAN>
这方面较好的例子就是自定义ejs模板的开始和关闭的标记:
open: '{{',
close: '}}'
});
</SPAN>
局部视图(View Partials)
Express视图系统原生支持局部和集合视图,这称作微型视图,主要用于渲染一个文档片段。比如与其在视图中循环显示评论,不如使用局部集合(partial collection):
</SPAN>
如果不需要其它选项或本地变量,我们可以省略对象而简单的传入评论数组,这和上面的示例是一样的:
</SPAN>
当使用局部集合时,支持一些“魔术”本地变量: