将模板引擎用于 Express

A template engine enables you to use static template files in your application. At runtime, the template engine replaces variables in a template file with actual values, and transforms the template into an HTML file sent to the client. This approach makes it easier to design an HTML page.

The Express application generator uses Pug as its default, but it also supports Handlebars, and EJS, among others.

To render template files, set the following application setting properties, in the default app.js created by the generator:

views, the directory where the template files are located. views：模板文件所在目录。例如：app.set('views', './views') This defaults to the views directory in the application root directory.
view engine, the template engine to use. view engine：要使用的模板引擎。例如：app.set('view engine', 'pug')

然后安装对应的模板引擎 npm 包：

$ npm install pug --save

与 Express 兼容的模板引擎（例如 Pug）导出名为 __express(filePath, options, callback) 的函数，该函数由 res.render() 函数调用以呈现模板代码。某些模板引擎并不遵循此约定。Consolidate.js 库通过映射所有流行的 Node.js 模板引擎来遵循此约定，因此可以在 Express 内无缝工作。

Some template engines do not follow this convention. The @ladjs/consolidate library follows this convention by mapping all of the popular Node.js template engines, and therefore works seamlessly within Express.

在设置视图引擎之后，不必指定该引擎或者在应用程序中装入模板引擎模块；Express 在内部装入此模块，如下所示（针对以上示例）。

app.set('view engine', 'pug')

在 views 目录中创建名为 index.pug 的 Pug 模板文件，其中包含以下内容：

html
  head
    title= title
  body
    h1= message

Create a route to render the index.pug file. If the view engine property is not set, you must specify the extension of the view file. Otherwise, you can omit it.

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

向主页发出请求时，index.pug 文件将呈现为 HTML。

The view engine cache does not cache the contents of the template’s output, only the underlying template itself. The view is still re-rendered with every request even when the cache is on.

Edit this page