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的一些流行模板引擎是Pug、Mustache和EJS。The 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已重命名为Pug。You 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
中设置:
views
app.set('views', './views')
. app.set('views', './views')
。views
directory in the application root directory.views
目录。view engine
app.set('view engine', 'pug')
.app.set('view engine', 'pug')
。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兼容的模板引擎(如Jade和Pug)导出一个名为__express(filePath, options, callback)
, which is called by the res.render()
function to render the template code.__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开发模板引擎”。