Using template engines with Express在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. 在运行时,模板引擎用实际值替换模板文件中的变量,并将模板转换为发送给客户端的HTML文件。This approach makes it easier to design an HTML page.这种方法使设计HTML页面更容易。

Some popular template engines that work with Express are Pug, Mustache, and EJS. 使用Express的一些流行模板引擎是PugMustacheEJSThe Express application generator uses Jade as its default, but it also supports several others.Express应用程序生成器使用Jade作为其默认值,但它还支持其他几种。

See Template Engines (Express wiki) for a list of template engines you can use with Express. 有关可与Express一起使用的模板引擎的列表,请参阅模板引擎(Express wiki)See also Comparing JavaScript Templating Engines: Jade, Mustache, Dust and More.另请参见比较JavaScript模板引擎:Jade、Mustache、Dust等

Note: Jade has been renamed to Pug. :Jade已重命名为PugYou can continue to use Jade in your app, and it will work just fine. 你可以继续在你的应用程序中使用Jade,它会正常工作。However if you want the latest updates to the template engine, you must replace Jade with Pug in your app.但是,如果您想要模板引擎的最新更新,则必须在应用程序中将Jade替换为Pug。

To render template files, set the following application setting properties, set in app.js in the default app created by the generator:要渲染模板文件,请设置以下应用程序设置属性,这些属性在生成器创建的默认应用程序的app.js中设置:

Then install the corresponding template engine npm package; for example to install Pug:然后安装相应的模板引擎npm包;例如,要安装Pug:

$ npm install pug --save

Express-compliant template engines such as Jade and Pug export a function named __express(filePath, options, callback), which is called by the res.render() function to render the template code.与Express兼容的模板引擎(如Jade和Pug)导出一个名为__express(filePath, options, callback)的函数,res.render()函数调用该函数来呈现模板代码。

Some template engines do not follow this convention. 某些模板引擎不遵循此约定。The Consolidate.js library follows this convention by mapping all of the popular Node.js template engines, and therefore works seamlessly within Express.Consolidate.js库通过映射所有流行的Node.js模板引擎遵循这一约定,因此可以在Express中无缝工作。

After the view engine is set, you don’t have to specify the engine or load the template engine module in your app; Express loads the module internally, as shown below (for the above example).设置查看引擎后,您无需在应用程序中指定引擎或加载模板引擎模块;Express在内部加载模块,如下所示(对于上面的示例)。

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

Create a Pug template file named index.pug in the views directory, with the following content:views目录中创建名为index.Pug的Pug模板文件,包含以下内容:

html
  head
    title= title
  body
    h1= message

Then create a route to render the index.pug file. 然后创建渲染index.pug文件的路由。If the view engine property is not set, you must specify the extension of the view file. 如果未设置view engine属性,则必须指定view文件的扩展名。Otherwise, you can omit it.否则,您可以忽略它。

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

When you make a request to the home page, the index.pug file will be rendered as HTML.当您向主页发出请求时,index.pug文件将呈现为HTML。

Note: 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.即使缓存处于打开状态,视图仍会随每个请求重新呈现。

To learn more about how template engines work in Express, see: “Developing template engines for Express”.要了解有关模板引擎在Express中如何工作的更多信息,请参阅:“为Express开发模板引擎”