模板引擎使您能够在应用程序中使用静态模板文件。 在运行时,模板引擎将模板文件中的变量替换为实际值,并将模板转换为发送给客户端的 HTML 文件。 这种方法使设计 HTML 页面变得更加容易。
与 Express 一起使用的一些流行的模板引擎是 Pug、Mustache 和 EJS。 Express 应用程序生成器 使用 Jade 作为其默认值,但它也支持其他几个。
请参阅 模板引擎 (Express wiki) 以获取可与 Express 一起使用的模板引擎列表。 另见 比较 JavaScript 模板引擎:Jade、Mustache、Dust 等。
注意: Jade 已重命名为 Pug。 您可以继续在您的应用程序中使用 Jade,它会正常工作。 但是,如果您想要模板引擎的最新更新,则必须在您的应用程序中将 Jade 替换为 Pug。
要渲染模板文件,请设置以下 应用程序设置属性,在生成器创建的默认应用程序中设置为 app.js
:
views
,模板文件所在目录。 例如: app.set('views', './views')
。
这默认为应用程序根目录中的 views
目录。view engine
,使用的模板引擎。 例如,要使用 Pug 模板引擎: app.set('view engine', 'pug')
。然后安装对应的模板引擎npm包; 例如安装 Pug:
$ npm install pug --save
兼容 Express 的模板引擎,例如 Jade 和 Pug,导出一个名为 __express(filePath, options, callback)
的函数,res.render()
函数调用该函数来渲染模板代码。
一些模板引擎不遵循这个约定。 Consolidate.js 库通过映射所有流行的 Node.js 模板引擎来遵循这个约定,因此可以在 Express 中无缝工作。
设置好视图引擎后,你的应用程序中不需要指定引擎,也不需要加载模板引擎模块; Express 在内部加载模块,如下所示(对于上面的示例)。
app.set('view engine', 'pug')
在 views
目录下创建一个名为 index.pug
的 Pug 模板文件,内容如下:
html
head
title= title
body
h1= message
然后创建一个路由来渲染 index.pug
文件。 如果未设置 view engine
属性,则必须指定 view
文件的扩展名。 否则,您可以省略它。
app.get('/', (req, res) => {
res.render('index', { title: 'Hey', message: 'Hello there!' })
})
当您向主页发出请求时,index.pug
文件将呈现为 HTML。
注意: 视图引擎缓存不缓存模板输出的内容,只缓存底层模板本身。 即使缓存打开,视图仍会随每个请求重新呈现。
要了解有关模板引擎如何在 Express 中工作的更多信息,请参阅: “Developing template engines for Express”。