在 Express 中使用模板引擎
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在 Express 中使用模板引擎相关的知识，希望对你有一定的参考价值。
参考技术A 需要在应用中进行如下设置才能让Express
渲染模板文件：
views,
放模板文件的目录，比如：
app.set('views',
'./views')
view
engine,
模板引擎，比如：
app.set('view
engine',
'jade')
然后安装相应的模板引擎
npm
软件包。
$
npm
install
jade
--save
和
Express
兼容的模板引擎，比如
Jade，通过
res.render()
调用其导出方法
__express(filePath,
options,
callback)
渲染模板。
有一些模板引擎不遵循这种约定，Consolidate.js
能将
Node
中所有流行的模板引擎映射为这种约定，这样就可以和
Express
无缝衔接。
一旦
view
engine
设置成功，就不需要显式指定引擎，或者在应用中加载模板引擎模块，Express
已经在内部加载，如下所示。
app.set('view
engine',
'jade');
在
views
目录下生成名为
index.jade
的
Jade
模板文件，内容如下：
html
head
title!=
title
body
h1!=
message
然后创建一个路由渲染
index.jade
文件。如果没有设置
view
engine，您需要指明视图文件的后缀，否则就会遗漏它。
app.get('/',
function
(req,
res)
res.render('index',
title:
'Hey',
message:
'Hello
there!');
);
此时向主页发送请求，“index.jade”
会被渲染为
HTML。
在Express中配置使用art-template模板引擎
先安装需要使用的包
cnpm install --save art-template
cnpm install --save express-art-template
配置(官网案例)
var express = require(‘express‘)
var express = require(‘express‘); var app = express();
//配置使用art-template模板引擎
//第一个参数表示，当渲染以 .art 结尾时使用art-template模板引擎
//express-art-templet依赖于art-template 虽然不需要导入，但是必须安装art-template app.engine(‘html‘, require(‘express-art-template‘)); app.set(‘view options‘, { debug: process.env.NODE_ENV !== ‘production‘ }); app.get(‘/‘, function (req, res) {
//express为response对象提供了一个render方法
//render方法默认是不可用的,需要使用的话必须配置模板引擎
//参数1:模板名 参数2:模板数据
//第一个参数不能学路径,默认去项目中的views目录中去找该模板文件
//如果想要修改默认的views目录 可以 app.set(‘views‘,render函数的默认路径)
//比如 app.set(‘views‘,‘public‘)那就会去public目录项去找模板文件 res.render(‘index.html‘, { user: { name: ‘aui‘, tags: [‘art‘, ‘template‘, ‘nodejs‘] } }); });
这是我的404.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{user.name}}</title>
</head>
<body>
<h1>抱歉! 您访问的页面失联啦...</h1>
<div>
<h1>{{user.name}}</h1>
<h1>
{{echo user.tags}}
<h2>{{ $value }}</h2>
</h1>
</div>
</body>
</html>
显示结果为
抱歉! 您访问的页面失联啦... express整合art-template art,template,nodejs
以上是关于在 Express 中使用模板引擎的主要内容，如果未能解决你的问题，请参考以下文章
express 4.x 模板引擎与express.static