在 Express 中使用模板引擎
A 模板引擎允许你在应用程序中使用静态模板文件。在运行时,模板引擎会将模板文件中的变量替换为实际值,并将模板转换为发送给客户端的 HTML 文件。这种方法使得设计 HTML 页面变得更加容易。
Express 应用程序生成器默认使用 Pug,但也支持 Handlebars、EJS 等模板引擎。
要渲染模板文件,请在生成器创建的默认 app.js
文件中设置以下 应用程序设置属性:
views
,模板文件所在的目录。例如:app.set('views', './views')
。默认情况下,它指向应用程序根目录下的views
目录。view engine
,要使用的模板引擎。例如,要使用 Pug 模板引擎:app.set('view engine', 'pug')
。
然后安装相应的模板引擎 npm 包;例如安装 Pug:
$ npm install pug --save
符合 Express 规范的模板引擎(如 Pug)会导出一个名为 __express(filePath, options, callback)
的函数,res.render()
会调用此函数来渲染模板代码。
有些模板引擎不遵循此约定。@ladjs/consolidate 库通过映射所有流行的 Node.js 模板引擎来遵循此约定,因此可以在 Express 中无缝使用。
设置视图引擎后,你无需在应用程序中指定或加载模板引擎模块;Express 会在内部加载该模块,例如:
app.set('view engine', 'pug')
然后,在 views
目录下创建一个名为 index.pug
的 Pug 模板文件,内容如下:
html
head
title= title
body
h1= message
创建一个路由来渲染 index.pug
文件。如果未设置 view engine
属性,则必须指定视图文件的扩展名。否则,可以省略它。
app.get('/', (req, res) => {
res.render('index', { title: 'Hey', message: 'Hello there!' })
})
当你向主页发出请求时,index.pug
文件将被渲染为 HTML。
视图引擎缓存不会缓存模板输出的内容,而只缓存底层模板本身。即使缓存开启,视图仍然会在每次请求时重新渲染。
编辑此页面