Express 使用模板引擎

预计阅读时间1 分 118 views

模板引擎允许你在应用程序中使用静态模板文件。在运行时,模板引擎会将模板文件中的变量替换为实际值,并将模板转换为发送给客户端的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文件。如果未设置视图引擎属性,则必须指定视图文件的扩展名。否则,可以省略它。

app.get('/', (req, res) => {  
  res.render('index', { title: 'Hey', message: 'Hello there!' })  
})

当你向主页发出请求时,index.pug文件将被渲染为HTML。

注意:视图引擎缓存不会缓存模板输出的内容,而只会缓存底层模板本身。即使启用了缓存,视图仍然会在每次请求时重新渲染。

分享此文档

Express 使用模板引擎

或复制链接

本页目录