Pug (原 Jade) 是一款模板引擎，可以帮助我们在 Node.js 和浏览器中快速生成 HTML 页面。在 Express.js 中，Pug 是默认的模板引擎。本文将分享在 Express.js 中使用 Pug 的最佳实践，并提供代码示例。
安装 Pug
在使用 Pug 之前，需要先安装它。可以通过 npm 进行安装：
npm install pug
设置 Express.js 将使用 Pug
Express.js 2.x 版本将花括号包裹在 <%= 和 %> 中用来标记动态内容。但是在 Express.js 3.x 中已经不再采用该语法，而是默认使用 Pug。我们需要在 Express.js 中设置 Pug 作为模板引擎，可以通过下面的代码实现：
const express = require('express');
const app = express();
app.set('view engine', 'pug');
app.set('views', path.join(__dirname, 'views'));这些代码将设置 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() 的第二个参数来实现，如下所示：
app.get('/', function(req, res) {
res.render('index', { title: 'Pug教程' });
});在这个示例中，我们将一个名为 title 的变量传递给了 Pug 模板，这个变量在模板中可以直接使用。例如，我们可以在视图文件中修改 Head 中的 Title 标记，如下所示：
-- -------------------- ---- -------
------- ----
---------------
----
------ -----
----
-- ---------
---
- -----------
------
- ---在这种情况下，页面的标题将被设置为 Pug教程。
在 Pug 中包含其他 Pug 文件
与其他模板引擎一样，您可以在 Pug 文件中包含其他 Pug 文件，称为 include。这对于在项目中重复使用模块非常有用。例如，在我们的示例中，我们可以将 button 标记定义为一个独立的文件，然后在 index.pug 中重复使用它，如下所示：
button.pug 文件：
button | 按钮
index.pug 文件：
-- -------------------- ---- -------
------- ----
---------------
----
------ -----
----
-- ---------
---
- -----------
------- ----------在这里，我们使用 include 关键字在 index.pug 中导入 button.pug 文件。这使得 index.pug 文件非常清晰，并有助于优化应用程序的结构。
在 Pug 中使用布局
Pug 还支持布局和块的概念，以创建共享标头、导航栏和页脚等通用元素。这些布局文件也可以被包含在其他 Pug 文件中，并使用块向它们注入内容。
以下是一个简单的布局（layout.pug）示例：
-- -------------------- ---- -------
------- ----
----
----
------ -----
----
------
--- -----
---
--
--
-----------
- ----
--
----------------
- -----
----
----- -------
------
- - -- ------- ----在此示例中，我们定义了一个名为 layout.pug 的布局文件，并定义了以下内容：
- 标题
- 头部（带有网站名称、导航栏等）
- 内容主体（需要被注入）
- 页脚
在我们的实际视图文件中，我们使用 extends 继承我们的布局，并在所需的区域使用 block 定义注入的内容。以下是一个示例视图文件（index.pug）：
extends layout.pug block content p This is the homepage!
在这个示例中，我们从布局（layout.pug）中扩展了我们的视图文件（index.pug），并使用 block 关键字注入了我们的内容。这使得我们能够在视图文件中定义具体的内容，并在布局中重复使用通用元素。
结论
本文介绍了在 Express.js 中使用 Pug 的最佳实践。从安装 Pug 开始，我们学习了如何配置 Express.js 来支持 Pug，并创建简单的视图文件。我们还探讨了将变量传递给 Pug 模板、包含其他 Pug 文件、使用布局等更高级的概念。现在你已经了解了这些概念，您应该可以开始使用 Pug 来构建强大和灵活的 Node.js 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67377745317fbffedf0a8487