express 模板引擎_了解Express模板引擎

express 模板引擎

If you’ve worked with the Express.js framework in the past, you’ll know that Express can handle server-side template engines. You can populate your HTML pages with various information and data directly onto your view. This allows us to generate HTML dynamically.

如果您过去使用过Express.js框架，那么您将知道Express可以处理服务器端模板引擎。 您可以将各种信息和数据直接填充到HTML页面上。 这使我们能够动态生成HTML。

In this article, we’ll introduce 3 popular template engines for Express: Pug, EJS and Mustache.

在本文中，我们将介绍3种用于Express的流行模板引擎：Pug，EJS和Mustache。

If you’d like to learn more about Express, follow this link.

如果您想了解有关Express的更多信息，请点击此链接 。

我应该使用哪些模板引擎？ (What Template Engines Should I Use?)

There’s a wide variety of template engines that work with Express. The default template engine found in Express is Jade, which is now known as Pug. However, the default Jade installed in Express is still using the old version.

与Express一起使用的模板引擎种类繁多。 在Express中找到的默认模板引擎是Jade，现在称为Pug。 但是，Express中安装的默认Jade仍在使用旧版本。

In this breakdown, we’ll introduce the basic syntax and uses of Pug, EJS, and Mustache.

在此细分中，我们将介绍Pug，EJS和Mustache的基本语法和用法。

如何使用哈巴狗 (How To Use Pug)

To install Pug and use it in our Express app, we have to use npm to install it first:

要安装Pug并在我们的Express应用中使用它，我们必须首先使用npm进行安装：

$ npm install pug

Then you can set the view engine to pug when you initialize your app, then make a get call and render your view:

然后，您可以在初始化应用程序时将视图引擎设置为pug ，然后进行get调用并呈现视图：

const express = require('express');
const app = express();
app.set('view engine', 'pug');

app.get('/home', (req, res) => {
  res.render('home');
});

Now that you’ve done that in your Express app, you can add a template into your views directory as views/home.pug and fill it in:

现在，您已经在Express应用程序中完成了此操作，您可以将模板作为views/home.pug添加到您的views目录中，并填写：

h2 This is the home page
p It's a test view

That view will end up creating a HTML template with a h2 tag that wraps the text ‘This is the home page’, and a p tag that wraps the text “It’s a test view”.

该视图最终将创建一个带有h2标签HTML模板，该标签包装了文本“ This is the home page”，这是一个p标签，包装了文本“ It's a test view”。

If you wanted to pass data from your Express application to your home view, you can render a variable like so:

如果要将数据从Express应用程序传递到home视图，则可以渲染变量，如下所示：

app.get('/home', (req, res) => {
  res.render('home', { animal: 'Alligator' });
});

Then your view will look like this:

然后您的view将如下所示：

h2 This is the #{animal} home page
p It's a test view

Then your h2 tag will surround the text “This is the Alligator home page”. Beyond that, you can experiment and build your own Pug files as you see fit!

然后，您的h2标签将围绕文本“这是鳄鱼的主页”。 除此之外，您还可以尝试并尝试构建自己的Pug文件！

如何使用EJS (How To Use EJS)

Now that we’ve finished with the introduction to Pug, let’s try out EJS:

现在我们已经完成了对Pug的介绍，让我们尝试一下EJS ：

$ npm install ejs

Once you’ve installed EJS, you can call it into your Express app:

安装EJS之后，您可以将其调用到Express应用中：

const express = require('express');
const app = express();
app.set('view engine', 'ejs');

app.get('/home', (req, res) => {
  res.render('home');
});

Now that you’ve changed your view engine to ejs, you can create a template in the views directory under views/home.ejs. EJS uses regular HTML for its templates:

现在，您已将视图引擎更改为ejs ，可以在views/home.ejs下的views目录中创建模板。 EJS的模板使用常规HTML：

<h2>This is the home page</h2>
<p>It's a test view</p>

Now, let’s say that we want to add a list of animals to our HTML page. We can pass an array of animals through our Express application to our EJS template.

现在，假设我们要向我们HTML页面添加动物列表。 我们可以通过Express应用程序将一系列动物传递给EJS模板。

app.get('/home', (req, res) => {
  let animals = [
    { name: 'Alligator' },
    { name: 'Crocodile' }
  ];
  res.render('home', { animals: animals });
});

In your views/home.ejs file, you can loop through the data using .forEach:

在views/home.ejs文件中，您可以使用.forEach遍历数据：

<h2>This is the home page</h2>
<p>It's a test view</p>
<ul>
  <% animals.forEach((animal) => { %>
  <li><%= animal.name %></li>
  <% }); %>
</ul>

With this code, you will do a .forEach loop over the animals array, and output each animal’s name inside a li tag. And that’s all there is to it! You can call JavaScript directly in your EJS template and use it however you’d like.

使用此代码，您将在animals数组上执行一个.forEach循环，并在li标记内输出每个动物的名称。 这就是全部！ 您可以直接在EJS模板中调用JavaScript，并根据需要使用它。

如何使用胡子 (How To Use Mustache)

For our last template engine, we’ll be going over how to install Mustache and use it in an Express application.

对于最后一个模板引擎，我们将介绍如何安装Mustache并在Express应用程序中使用它。

$ npm i mustache-express

Then you can set your view engine in your Express application.

然后，您可以在Express应用程序中设置视图引擎。

const express = require('express');
const mustacheExpress = require('mustache-express');
const app = express();
app.engine('mustache', mustacheExpress());
app.set('view engine', 'mustache');

app.get('/home', (req, res) => {
  res.render('home');
});

The file extension for mustache will look like this: views/home.mustache:

胡须的文件扩展名将如下所示： views/home.mustache ：

<h2>This is the home page</h2>
<p>It's a test view</p>

And to display data from your Express application in your template, pass the data through your route:

要在模板中显示Express应用程序中的数据，请通过路由传递数据：

app.get('/home', (req, res) => {
  res.render('home', { animal: 'Alligator' });
});

Then within the mustache template, you can call the variable directly:

然后在mustache模板中，您可以直接调用变量：

<h2>This is the {{ animal }} home page</h2>
<p>It's a test view</p>

Then animal in the .mustache file will show 'Alligator’. If you want more information on how to use Mustache, feel free to check out their page here.

然后， .mustache文件中的animal将显示“鳄鱼”。 如果您想了解更多有关如何使用Mustache的信息，请随时在此处查看其页面。

简单高效 (Simple And Efficient)

Express’s template engine is a great way of serving up static template files in your applications. It gives you the flexibility of displaying data through the template easily. Next time you want to build an Express project, make sure you take a look into these template engines and try them out!

Express的模板引擎是在应用程序中提供静态模板文件的好方法。 它使您可以轻松灵活地通过模板显示数据。 下次您要构建Express项目时，请确保查看这些模板引擎并进行尝试！

翻译自: https://www.digitalocean.com/community/tutorials/nodejs-express-template-engines

express 模板引擎