使用这些最佳NodeJS模板引擎合集构建任何视图

2021年11月28日05:48:31 发表评论 1,325 次浏览

使用 API 构建动态网站是我们现代 Web 开发人员都熟悉的事情。尤其是 Node.js，可以非常轻松地快速设置 API 后端并将它们与客户端 Web 应用程序连接起来。但是你知道 Node 允许应用模板引擎作为呈现网页的替代方式吗？

与基于 API 的网站构建方法相反，模板引擎允许你在服务器端呈现具有动态内容的页面。当你处理严重依赖从数据库检索的数据的页面时，它们提供了灵活性。特别是在构建静态网站时，模板引擎可以通过启用代码重用来改进开发过程。

顾名思义，基于模板引擎的网站的主要构建块是模板。每个页面模板使用特殊的语法和变量定义网页的基本结构。当最终要呈现页面时，你可以传递这些变量的确切值来创建一个页面，其中包含特定于每个请求的详细信息。

常用的NodeJS模板引擎有哪些？在 Node.js 中，开发人员有机会从数十种不同的可用选项中选择模板引擎。其中最受欢迎的包括：

  • Pug
  • EJS
  • Handlebars
  • Nunjacks
  • doT
  • Mustache
  • Underscore
  • Marko

在今天的最佳NodeJS模板引擎合集文章中，我们将讨论上面列表中的前四个模板引擎，Pug、EJS、Handlebars 和 Nunjacks，让你了解如何使用模板引擎并使用它们来构建非常强大的网页。

Pug

哪个NodeJS模板引擎最好？Pug ，原名 Jade，是 Node.js 中最常用的模板引擎之一。它提供了一种用于向页面添加内容的基于缩进的语法。使用 Pug，你可以在代码中使用多个控制结构，包括条件和循环。

这是我们在 Pug 和 Bootstrap CSS 的帮助下创建的一个简单网页。

doctype html 
html 
    head 
        meta(name='viewport', content='width=device-width')
        link(rel="stylesheet", href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css")
        title Home Page
    body 
        div.navbar.navbar-expand.navbar-light.bg-warning
    		ul.navbar-nav.mb-2
        		li.nav-item
            			a.nav-link(href="/") Home
        		each field in fields 
            			li.nav-item  
                			a.nav-link(href="/"+field.name) #{field.name}
 
        div.container.text-left.mt-3
            h1 Welcome to our website, #{user}
            div.message
                p Find anything you want on our website.

如你所见，Pug 直接使用 HTML 元素名称，而无需在其语法中包含标签。然后它使用缩进来派生层次结构，将缩进元素视为上层元素的子元素。

将 CSS 类分配给元素就像用前面的点声明它们的名称一样简单。

div.navbar

你还可以将元素的类添加为常规属性。它使你可以自由地编写 Javascript 来确定属性的值。

div(class=logged ? "logged" : "anon")

我们按照类似的逻辑添加了锚标记的 URL。

a(href="/"+field.name)

访问变量

我们的 Pug 模板使用两个变量字段和用户来创建页面结构。可以通过两种方式访问​​模板内的值。

如果变量值是分配给 HTML 元素或属性的唯一内容，我们可以使用等号来完成工作。

title=titlevar

否则，我们可以使用 #{var} 语法来访问变量值。这是我们的示例多次使用的方法。

h1 Welcome to our website, #{user}

循环数组

我们可以使用以下语法迭代 Pug 模板中的数组变量。

each field in fields 
    li.nav-item  
         a.nav-link(href="/"+field.name) #{field.name}

在 Express 中渲染 Pug 模板

常用的NodeJS模板引擎有哪些？流行的 Node.js 框架 Express 提供了一组专用方法来在 Web 应用程序的服务器端引入和使用模板引擎。为此，我们首先将 Pug 模板放在一个扩展名为 .pug 的文件中，并将其存储在项目文件夹中名为 views 的目录中。让我们为我们的模板文件命名，index.pug。

然后，我们可以使用 npm 在我们的项目中安装 Pug。

npm install pug

现在，我们可以在初始应用程序代码中设置视图引擎和专用视图目录。

//app.js

const express = require("express");
const path = require("path");

const app = express();

//Set view engine name and template directory path
app.set("view engine", "pug");
app.set("views", path.join(__dirname, "views"));

app.listen(3000 || process.env.PORT, () => {
    console.log("Server started listening");
});

最后，我们应该为进入我们的 Web 应用程序的“/”路由的请求渲染 index.pug 文件。

fields = [{name: "Technology"}, {name: "News"}, {name: "Sports"}, {name: "Travel"}];

app.get("/", (req, res) => {
    const username = req.query.username;
    res.render("index", {user: username, fields: fields});
});

请注意我们如何将变量值作为参数传递给 render 方法。这将允许 Pug 用它们的实际值替换变量名称并呈现最终的 HTML 内容。

当我们启动 Node 应用程序并访问 URL“localhost:3000?username=Smith”时，我们会在网页上看到以下呈现的内容。

使用NodeJS模板构建的演示网站
使用 NodeJS 模板构建的演示网站

添加部分

部分是当今大多数模板引擎提供的用于重用代码片段的特殊功能。它们允许我们单独声明重用的组件并重复将它们包含在其他模板中。

在我们的示例中，导航栏是我们在应用程序中创建不同页面时需要重用的组件。因此，我们可以为导航栏创建一个部分以使其更容易重用，而不是在每个页面文件中重新编写代码。

让我们为名为 navbar.pug 的导航栏创建一个单独的模板文件。

//views/navbar.pug

div.navbar.navbar-expand.navbar-light.bg-warning
    ul.navbar-nav.mb-2
        li.nav-item
            a.nav-link(href="/") Home
        each field in fields 
            li.nav-item  
                a.nav-link(href="/"+field.name) #{field.name}

在我们的索引页面中使用这个部分就像使用一个名为“include”的特殊关键字一样简单。

//views/index.pug 

body 
   include navbar
   div.container.text-left.mt-3
       h1 Welcome to our website, #{user}
       div.message
          p Find anything you want on our website.

Handlebars

最佳NodeJS模板引擎合集：Handlebars 是 Node 中另一个流行的模板引擎 Mustache 的扩展。与 Pug 不同的是，Handlebars 和 Mustache 都是无逻辑的模板引擎：它们不支持模板代码中的基于逻辑的条件或循环。它迫使你将逻辑与页面的呈现分开，使代码库更易于测试和维护。

Handlebars 与 Pug 的另一个不同之处在于它使用常规 HTML 语法来构建页面结构，而不是依赖缩进。我们在下面展示了如何使用 Handlebars 语法创建与上一个内容相同的页面。由于其语法更接近 HTML，因此使用 Handlebars 构建模板非常直观。

{{!-- views/index.hbs --}}

<!DOCTYPE html>
<html>
<head>
    <meta name='viewport', content='width=device-width'/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"/>
    <title>Home Page</title>
</head>
<body>
    <div class="navbar navbar-expand navbar-light bg-warning">
        <ul class="navbar-nav mb-2">
            <li class="nav-item">
                <a class="nav-link" href="/">Home</a>
            </li>
            {{#each fields}}
                <li class="nav-item">
                    <a class="nav-link" href="/{{name}}">{{name}}</a>
                </li>
            {{/each}}
        </ul>
    </div>
    <div class="container text-left mt-3">
        <h1>Welcome to our website, {{user}}</h1>
        <div class="message">
            <p>Find anything you want on our website.</p>
        </div>
    </div>
</body>
</html>

在 Handlebars 中访问变量时，我们应该将变量名用每边两个括号括起来。

<h1>Welcome to our website, {{user}}</h1>

Handlebars 还支持使用以下语法遍历数组。

{{#each fields}}
    <li class="nav-item">
        <a class="nav-link" href="/{{name}}">{{name}}</a>
     </li>
{{/each}}

在类似 each 的迭代助手中，我们可以直接访问存储在数组中的每个对象的属性。

使用 Express 渲染Handlebars模板

要在 Express 中使用 Handlebars，首先，我们应该使用 npm 安装它。

npm install hbs

然后，将 Handlebars 设置为视图引擎和渲染模板页面的过程遵循与我们对 Pug 所做的类似的步骤。

//app.js

const express = require("express");
const path = require("path");

const app = express();

app.set("view engine", "hbs");
app.set("views", path.join(__dirname, "views"));

fields = [{name: "Technology"}, {name: "News"}, {name: "Sports"}, {name: "Travel"}];

app.get("/", (req, res) => {
    const username = req.query.username;
    res.render("index", {user: username, fields: fields});
});

app.listen(3000 || process.env.PORT, () => {
    console.log("Server started listening");
});

添加部分

哪个NodeJS模板引擎最好？在 Handlebars 中，我们必须先注册部分，然后才能在模板中使用它们。为此，让我们首先在视图目录中创建一个名为“partials”的单独目录来存储部分文件。

在partials 目录中，我们将navbar 组件的代码添加到名为navbar.hbs 的文件中。

{{! views/partials/navbar.hbs}}

<div class="navbar navbar-expand navbar-light bg-warning">
    <ul class="navbar-nav mb-2">
        <li class="nav-item">
            <a class="nav-link" href="/">Home</a>
        </li>
        {{#each fields}}
            <li class="nav-item">
                <a class="nav-link" href="/{{name}}">{{name}}</a>
            </li>
        {{/each}}
    </ul>
</div>

然后，我们可以在应用程序代码中注册 partials 目录。

const hbs = require("hbs");
hbs.registerPartials(path.join(__dirname, "views/partials"));

现在，当我们在模板中包含部分组件时，Handlebars 将识别它并导入组件代码以呈现网页。

<body>
    {{>navbar}} {{! including the partial}}
    <div class="container text-left mt-3">
        <h1>Welcome to our website, {{user}}</h1>
        <div class="message">
            <p>Find anything you want on our website.</p>
        </div>
    </div>
</body>

EJS

常用的NodeJS模板引擎有哪些？EJS 是另一种流行的 Node.js 模板引擎，它使用类似 HTML 的语法。它允许你在模板内使用带有变量和编程逻辑的普通 Javascript 来控制其结构。

EJS 提供了一组用于在模板中包含 Javascript 代码的标签。每个唯一的标签决定了包含的代码如何影响模板的最终渲染输出。在这里，我们列出了一些你在使用 EJS 创建网页时经常会用到的标签。

  • <% 使用条件、循环等处理代码的控制流。它不向模板输出任何值。
  • <%=将标签内计算的值输出到模板。它转义任何 HTML 代码。
  • <%- 将未转义的值输出到模板。
  • <%# 评论标签

现在，让我们看看如何将 Node 应用程序的主页转换为 EJS 模板。

<!-- views/index.ejs -->

<!DOCTYPE html>
<html>
<head>
    <meta name='viewport', content='width=device-width'/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"/>
    <title>Home Page</title>
</head>
<body>
    <div class="navbar navbar-expand navbar-light bg-warning">
        <ul class="navbar-nav mb-2">
            <li class="nav-item">
                <a class="nav-link" href="/">Home</a>
            </li>
            <% fields.forEach(field => { %>
                <li class="nav-item">
                    <a class="nav-link" href=<%= "/"+ field.name %>><%= field.name %></a>
                </li>
            <% }) %>
        </ul>
    </div>
    <div class="container text-left mt-3">
        <h1>Welcome to our website, <%= user %></h1>
        <div class="message">
            <p>Find anything you want on our website.</p>
        </div>
    </div>
</body>
</html>

正如你在这段代码中看到的，EJS 使用 HTML 语法来构建基本模板。然后，从访问变量到遍历数组的所有内容都使用我们之前讨论过的特殊标签内声明的常规 Javascript 代码执行。

最佳NodeJS模板引擎合集：使用 Express 渲染 EJS 模板

渲染过程遵循与我们使用以前的模板引擎所做的类似的路径。首先，我们使用 npm 安装 EJS。

npm install ejs

然后，将 EJS 设置为应用程序的视图引擎并在将它发送到客户端之前使用变量值渲染 index.ejs。

//app.js

const express = require("express");
const path = require("path");

const app = express();

app.set("view engine", "ejs");
app.set("views", path.join(__dirname, "views"));

fields = [{name: "Technology"}, {name: "News"}, {name: "Sports"}, {name: "Travel"}];

app.get("/", (req, res) => {
    const username = req.query.username;
    res.render("index", {user: username, fields: fields});
});

app.listen(3000 || process.env.PORT, () => {
    console.log("Server started listening");
});

添加部分

使用 EJS 添加部分与我们使用 Pug 实现的方式类似。我们首先使用导航栏代码创建一个新的部分文件，views/partials/navbar.ejs。然后，我们可以像这样在主页的主模板中包含部分。

<!-- views/index.ejs -->

<body>
    <%- include ("partials/navbar") %>

    <div class="container text-left mt-3">
        <h1>Welcome to our website, <%= user %></h1>
        <div class="message">
            <p>Find anything you want on our website.</p>
        </div>
    </div>
</body>

Nunjucks

哪个NodeJS模板引擎最好？Nunjucks 是由 Mozilla 构建的强大模板引擎，你可以将其与 Node.js 一起使用。它速度很快，并允许在呈现网页时异步加载内容。它支持类似于 Handlebars 和 EJS 的 HTML 语法，并使用特殊的 {% %} 标签来声明控制操作。

在以下示例中，让我们看看如何将我们的网页转换为 Nunjucks 模板。

{# views/index.njk #}

<!DOCTYPE html>
<html>
<head>
    <meta name='viewport', content='width=device-width'/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"/>
    <title>Home Page</title>
</head>
<body>
    <div class="navbar navbar-expand navbar-light bg-warning">
        <ul class="navbar-nav mb-2">
            <li class="nav-item">
                <a class="nav-link" href="/">Home</a>
            </li>
            {% for field in fields %}
                <li class="nav-item">
                    <a class="nav-link" href="/{{field.name}}">{{field.name}}</a>
                </li>
            {% endfor %}
        </ul>
    </div>
    <div class="container text-left mt-3">
        <h1>Welcome to our website, {{ user }}</h1>
        <div class="message">
            <p>Find anything you want on our website.</p>
        </div>
    </div>
</body>
</html>

正如这段代码片段所示，Nunjucks 允许我们访问带有双括号的标签内的变量。在定义 for 循环等控制操作时，我们应该使用 {% %} 标签并遵循其官方模板文档中指定的语法 。

使用 Express 渲染 Nunjucks 模板

我们可以使用 npm 轻松安装 Nunjucks。

npm install nunjucks

常用的NodeJS模板引擎有哪些？渲染 Nunjucks 模板与我们在前几节中所做的有点不同：除了设置视图引擎和渲染页面之外，我们还必须遵循 Nunjucks 配置步骤。

//app.js 

const express = require("express");
const path = require("path");
const nunjucks = require("nunjucks");

const app = express();

app.set('view engine', 'njk');

//configure Nunjucks by passing the express app and setting autoescape to true
nunjucks.configure('views', {
    autoescape:  true,
    express:  app
})

fields = [{name: "Technology"}, {name: "News"}, {name: "Sports"}, {name: "Travel"}];

app.get("/", (req, res) => {
    const username = req.query.username;
    res.render("index", {user: username, fields: fields});
});

app.listen(3000 || process.env.PORT, () => {
    console.log("Server started listening");
});

添加部分

在 Nunjucks 中添加部分的执行方式与我们使用之前的模板工具所做的一样。将导航栏代码添加到 partials 文件夹中名为“navbar.njk”的新文件后，我们可以使用 include 关键字将其添加到主页模板中。

<body>
    {% include "partials/navbar.njk" %}
    <div class="container text-left mt-3">
        <h1>Welcome to our website, {{ user }}</h1>
        <div class="message">
            <p>Find anything you want on our website.</p>
        </div>
    </div>
</body>

最佳NodeJS模板引擎合集总结

在今天的文章中，我们讨论了使用模板引擎和 Node.js 来构建 Web 应用程序。我希望这篇文章是对 Node 模板引擎的一个很好的介绍。如果你已经有使用它们的经验，请在我们的评论部分告诉我们你最喜欢的模板引擎。

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: