Pug (原 Jade) 是一款模板引擎，可以帮助我们在 Node.js 和浏览器中快速生成 HTML 页面。在 Express.js 中，Pug 是默认的模板引擎。本文将分享在 Express.js 中使用 Pug 的最佳实践，并提供代码示例。
安装 Pug
在使用 Pug 之前，需要先安装它。可以通过 npm 进行安装：
--- ------- ---
设置 Express.js 将使用 Pug
Express.js 2.x 版本将花括号包裹在 <%= 和 %> 中用来标记动态内容。但是在 Express.js 3.x 中已经不再采用该语法，而是默认使用 Pug。我们需要在 Express.js 中设置 Pug 作为模板引擎，可以通过下面的代码实现：
----- ------- - ------------------- ----- --- - ---------- ------------- -------- ------- ---------------- -------------------- ----------
这些代码将设置 Pug 作为 Express.js 的默认模板引擎，并将视图文件夹设置为位于当前脚本目录下的 views 文件夹。这意味着，当我们调用 res.render() 时，Express.js 将自动查找 views 文件夹中的 pug 文件并将其编译为 HTML。
创建 Pug 文件
如上文所述，我们可以创建一个名为 views 的文件夹，用于存放视图文件。在该文件夹中，我们可以创建一个名为 index.pug 的文件，并添加以下内容：
------- ----
---------------
----
----- -------
----
-- ---------
---
- -----------
------
- ---这是一个简单的 HTML 页面，使用了 Pug 的缩进语法和简洁的标记。该模板将生成一个包含标题、段落和按钮的 HTML 页面。接下来，我们将添加视图路径，并使用路由将其呈现在浏览器中。
使用路由呈现 Pug 法文件
要使用路由呈现 Pug 文件，请创建一个名为 index.js 的文件，使用以下代码：
----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- ------------- -------- ------- ---------------- -------------------- ---------- ------------ ------------- ---- - -------------------- --- ---------------- ---------- - ---------------------- -- ---- ------- ---
在该代码中，我们使用 app.get() 定义了一个路由，将根目录请求映射到一个名为 index 的视图文件。我们还通过 app.listen() 启动了 Express.js 服务器。接下来，我们将在浏览器中使用 localhost:3000 访问该页面，在浏览器中看到的页面内容将与我们在 Pug 文件中定义的内容相同。
将变量传递给 Pug 模板
我们可以在 Pug 模板中使用变量，从而实现更加灵活的页面。要将变量传递给 Pug 模板，可以使用 res.render() 的第二个参数来实现，如下所示：
------------ ------------- ---- - ------------------- - ------ ------- --- ---
在这个示例中，我们将一个名为 title 的变量传递给了 Pug 模板，这个变量在模板中可以直接使用。例如，我们可以在视图文件中修改 Head 中的 Title 标记，如下所示：
------- ----
---------------
----
------ -----
----
-- ---------
---
- -----------
------
- ---在这种情况下，页面的标题将被设置为 Pug教程。
在 Pug 中包含其他 Pug 文件
与其他模板引擎一样，您可以在 Pug 文件中包含其他 Pug 文件，称为 include。这对于在项目中重复使用模块非常有用。例如，在我们的示例中，我们可以将 button 标记定义为一个独立的文件，然后在 index.pug 中重复使用它，如下所示：
button.pug 文件：
------ - --
index.pug 文件：
------- ----
---------------
----
------ -----
----
-- ---------
---
- -----------
------- ----------在这里，我们使用 include 关键字在 index.pug 中导入 button.pug 文件。这使得 index.pug 文件非常清晰，并有助于优化应用程序的结构。
在 Pug 中使用布局
Pug 还支持布局和块的概念，以创建共享标头、导航栏和页脚等通用元素。这些布局文件也可以被包含在其他 Pug 文件中，并使用块向它们注入内容。
以下是一个简单的布局（layout.pug）示例：
------- ----
----
----
------ -----
----
------
--- -----
---
--
--
-----------
- ----
--
----------------
- -----
----
----- -------
------
- - -- ------- ----在此示例中，我们定义了一个名为 layout.pug 的布局文件，并定义了以下内容：
- 标题
- 头部（带有网站名称、导航栏等）
- 内容主体（需要被注入）
- 页脚
在我们的实际视图文件中，我们使用 extends 继承我们的布局，并在所需的区域使用 block 定义注入的内容。以下是一个示例视图文件（index.pug）：
------- ---------- ----- ------- - ---- -- --- ---------
在这个示例中，我们从布局（layout.pug）中扩展了我们的视图文件（index.pug），并使用 block 关键字注入了我们的内容。这使得我们能够在视图文件中定义具体的内容，并在布局中重复使用通用元素。
结论
本文介绍了在 Express.js 中使用 Pug 的最佳实践。从安装 Pug 开始，我们学习了如何配置 Express.js 来支持 Pug，并创建简单的视图文件。我们还探讨了将变量传递给 Pug 模板、包含其他 Pug 文件、使用布局等更高级的概念。现在你已经了解了这些概念，您应该可以开始使用 Pug 来构建强大和灵活的 Node.js 应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67377745317fbffedf0a8487