首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

4.使用带Express的模板引擎 | 4. Using template engines with Express

一个模板引擎使您能够在您的应用程序中使用静态模板文件。在运行时,模板引擎用实际值替换模板文件中的变量,并将模板转换为发送给客户端的HTML文件。这种方法使设计HTML页面变得更加容易。

与Express一起使用的一些流行的模板引擎是Pug, MustacheEJS。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:

代码语言:javascript
复制
$ npm install pug --save

符合Express的模板引擎(如Jade和Pug)会导出名为的函数__express(filePath, options, callback)res.render()函数将被函数调用以呈现模板代码。

一些模板引擎不遵循这个约定。该Consolidate.js通过映射所有流行的Node.js的模板引擎库遵循此惯例,因此,无其他快捷方式。

在设置视图引擎后,您不必在应用程序中指定引擎或加载模板引擎模块; Express在内部加载模块,如下所示(针对上述示例)。

代码语言:javascript
复制
app.set('view engine', 'pug')

创建一个名为Pug模板文件index.pugviews目录,具有以下内容:

代码语言:javascript
复制
html
  head
    title= title
  body
    h1= message

然后创建一个路径来渲染index.pug文件。如果该view engine属性未设置,则必须指定view文件的扩展名。否则,你可以省略它。

代码语言:javascript
复制
app.get('/', function (req, res) {
  res.render('index', { title: 'Hey', message: 'Hello there!' })
})

当您向主页发出请求时,该index.pug文件将呈现为HTML。

注意:视图引擎缓存不缓存模板输出的内容,只缓存底层模板本身。即使缓存打开,视图仍然会在每次请求时重新呈现。

要详细了解模板引擎如何在Express中工作,请参阅:“开发用于Express的模板引擎”。

扫码关注腾讯云开发者

领取腾讯云代金券