在前端开发中，模板引擎是不可或缺的一部分。Pug 是一种灵活的、易于使用的模板引擎，也是 Node.js、Express.js 开发中常用的一种。本文将向您介绍如何在 Express.js 中使用 Pug 模板引擎。
安装 Pug
首先，我们需要在项目中安装 Pug，通过 npm 可以非常简单地进行安装。您可以在命令行中使用以下命令来安装 Pug 模板引擎：
--- ------- ---
配置 Express.js
在安装完 Pug 之后，我们需要在 Express.js 中配置 Pug。首先，我们需要在项目中引入 Pug 模板引擎：
----- ------- - ------------------- ----- --- - ---------- ----- --- - ---------------
接下来，我们需要告诉 Express.js 我们将使用 Pug 作为模板引擎，可以使用以下代码：
------------- -------- -------
最后，我们需要在项目中创建一个 views 目录，这是 Express.js 默认的视图目录。在 views 目录下，我们可以创建一个名为 index.pug 的文件，代码如下：
----
----
----- --------
----
-- ------- -- ---------这是一个非常简单的 Pug 模板，我们将它渲染成 HTML 并将其发送到客户端。
使用 Pug 模板
现在我们已经配置好了 Pug，让我们来展示如何使用它来渲染我们的页面。在 Express.js 中使用 Pug 模板非常简单，可以使用以下代码：
------------ ----- ---- -- - -------------------- ---
在这个例子中，我们告诉 Express.js 在访问根路由时渲染 index.pug 页面。通过这样的方式，我们可以在服务器上使用 Pug 模板来渲染我们的页面。
传递数据
在许多情况下，我们需要从服务器传递数据到我们的页面。在 Express.js 中使用 Pug 模板也非常容易传递数据。我们可以在渲染模板时将数据作为第二个参数传递给 render 函数，例如：
------------ ----- ---- -- - --- ---- - - ------ ----------- -------- -------- -- ---------- -- ------------------- - ---- --- ---
在这个例子中，我们使用 data 对象来存储标题和消息。然后，我们将 data 对象作为第二个参数传递给 render 函数。在 Pug 模板中，我们可以使用#{...}表达式来引用这些数据，例如：
----
----
----- -------------
----
-- ---------------高级功能
Pug 模板引擎支持很多高级功能，包括条件语句、循环、混入等等。以下是一个简单的循环示例：
--
---- --- -- --- -- --
--- ---在这个示例中，我们使用 each 表达式来迭代数组中的每个元素，并使用 = 表达式来输出值。
总结
在本文中，我们向您介绍了如何在 Express.js 中使用 Pug 模板引擎。通过学习本文，您应该可以掌握以下技能：
- 安装 Pug 模板引擎
- 配置 Express.js 使用 Pug
- 渲染 Pug 模板并将其发送到客户端
- 传递数据到模板，并在模板中使用数据
- 使用高级功能，如条件语句、循环和混入
希望您学习本文后可以更好地了解 Pug 模板引擎，并在实际开发中使用它！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6459dbfc968c7c53b0bf9032