模板引擎使您能够在应用程序中使用静态模板文件。在运行时,模板引擎用实际值替换模板文件中的变量,并将模板转换为发送到客户端的 HTML 文件。这种方法使设计 HTML 页面变得更加容易。
一些与 Express 协同工作的流行模板引擎有 Pug、Mustache 和 EJS。Express 应用程序生成器使用 Jade 作为其默认值,但它也支持其他几个值。
请参阅 模板引擎(Express wiki),了解可与 Express 一起使用的模板引擎列表。另请参阅 比较 JavaScript 模板引擎:Jade、Mustache、Dust 等。
注意:Jade 已更名为 Pug。您可以在应用程序中继续使用 Jade,它将正常工作。但是,如果您想要模板引擎的最新更新,则必须在应用程序中用 Pug 替换 Jade。
要呈现模板文件,请设置以下 应用程序设置属性,在生成器创建的默认应用程序的 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 中的工作原理,请参阅:“为 Express 开发模板引擎”。