Express.js 如何使用 Pug 模板引擎-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，模板引擎是不可或缺的一部分。Pug 是一种灵活的、易于使用的模板引擎，也是 Node.js、Express.js 开发中常用的一种。本文将向您介绍如何在 Express.js 中使用 Pug 模板引擎。

安装 Pug

首先，我们需要在项目中安装 Pug，通过 npm 可以非常简单地进行安装。您可以在命令行中使用以下命令来安装 Pug 模板引擎：

npm install pug

在安装完 Pug 之后，我们需要在 Express.js 中配置 Pug。首先，我们需要在项目中引入 Pug 模板引擎：

const express = require('express');
const app = express();
const pug = require('pug');

接下来，我们需要告诉 Express.js 我们将使用 Pug 作为模板引擎，可以使用以下代码：

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

最后，我们需要在项目中创建一个 views 目录，这是 Express.js 默认的视图目录。在 views 目录下，我们可以创建一个名为 index.pug 的文件，代码如下：

html
  head
    title MyWebApp
  body
    h1 Welcome to MyWebApp!

这是一个非常简单的 Pug 模板，我们将它渲染成 HTML 并将其发送到客户端。

现在我们已经配置好了 Pug，让我们来展示如何使用它来渲染我们的页面。在 Express.js 中使用 Pug 模板非常简单，可以使用以下代码：

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

在这个例子中，我们告诉 Express.js 在访问根路由时渲染 index.pug 页面。通过这样的方式，我们可以在服务器上使用 Pug 模板来渲染我们的页面。

在许多情况下，我们需要从服务器传递数据到我们的页面。在 Express.js 中使用 Pug 模板也非常容易传递数据。我们可以在渲染模板时将数据作为第二个参数传递给 render 函数，例如：

app.get('/', (req, res) => {
  let data = { title: 'MyWebApp', message: 'Welcome to MyWebApp!' };
  res.render('index', { data });
});

在这个例子中，我们使用 data 对象来存储标题和消息。然后，我们将 data 对象作为第二个参数传递给 render 函数。在 Pug 模板中，我们可以使用#{...}表达式来引用这些数据，例如：

html
  head
    title #{data.title}
  body
    h1 #{data.message}

Pug 模板引擎支持很多高级功能，包括条件语句、循环、混入等等。以下是一个简单的循环示例：

ul
  each val in [1, 2, 3]
    li= val

在这个示例中，我们使用 each 表达式来迭代数组中的每个元素，并使用 = 表达式来输出值。

在本文中，我们向您介绍了如何在 Express.js 中使用 Pug 模板引擎。通过学习本文，您应该可以掌握以下技能：

希望您学习本文后可以更好地了解 Pug 模板引擎，并在实际开发中使用它！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6459dbfc968c7c53b0bf9032