在 Web 开发中，模板引擎是非常重要的一环。它可以帮助我们快速地生成 HTML 页面，而不需要手动编写大量的 HTML 代码。Express.js 是一个流行的 Node.js Web 框架，而 Pug 则是一种流行的模板引擎。本文将介绍在 Express.js 中使用 Pug 模板引擎的最佳实践。
安装和配置 Pug
首先，我们需要使用 npm 安装 Pug 模板引擎。
npm install --save pug
开发中一般使用 nodemon 进行热更新，保持代码同时更新并自动重启，也需要安装。
npm install --save-dev nodemon
接下来，在 Express.js 的 app.js 文件中配置 Pug 模板引擎。我们使用 app.set() 方法来设置视图引擎和视图目录。视图引擎参数需要传入 pug。视图目录参数需要是一个字符串，用于告诉 Express.js 在哪里查找视图文件。
const express = require("express");
const app = express();
app.set("view engine", "pug");
app.set("views", "./views");创建 Pug 模板
接下来我们可以创建一个 Pug 模板，用于渲染页面。在 views 目录下新建一个文件，文件名为 index.pug。
以下是一个基本的 Pug 模板：
-- -------------------- ---- -------
--------- -----
---------------
----
---------------------
----- -- --- ----
----
--- -----
- ------- -- -- -------
--
--
----------- ---- -
--
----------- ---- -
--
----------- ---- -在上面的 Pug 模板中，我们可以看到一些特殊的语法。例如，我们使用的是缩进来表示 HTML 代码块。另外，我们使用了一些 Pug 特有的语法，例如 h1= title，其中的等于符号表示要将 JavaScript 变量 title 的值渲染到 h1 标签中。
在 Express.js 中渲染 Pug 模板
现在我们已经创建了一个 Pug 模板。我们需要在 Express.js 中使用它。我们可以使用 res.render() 方法来渲染 Pug 模板。
app.get("/", (req, res) => {
res.render("index", { title: "My Web Page" });
});在上面的代码中，我们使用 app.get() 方法来处理 HTTP GET 请求。我们使用 res.render() 方法来渲染 Pug 模板，第一个参数表示模板文件名（不需要文件扩展名），第二个参数则是传递给模板的数据。在这个例子中，我们向模板中传递了一个包含 title 属性的对象。
使用模板继承和局部模板
模板继承和局部模板可以帮助我们更好地组织代码，并实现代码的复用。
模板继承
以下是一个使用 Pug 的模板继承的例子。
// layout.pug
html
head
title My App
body
block content// index.pug extends layout.pug block content h1 Welcome to My App
在上面的代码中，我们定义了一个 layout.pug 模板，它包含了 HTML 页面的基本结构。我们使用 extends 关键字来扩展这个模板。在 index.pug 文件中，我们使用 block content 关键字来指定在 layout.pug 模板中的内容区域
局部模板
以下是一个使用 Pug 的局部模板的例子。
-- -------------------- ---- -------
-- ----------
----
----
----- -- ---
----
------
------- ----------
----- -------
------
------- ------------ -------------------- ---- -------
-- ----------
-- -- ---
---
--
--
----------- ----
--
---------------- -----在上面的代码中，我们定义了一个 layout.pug 模板，它包含了 HTML 页面的基本结构。在模板中，我们包含了两个局部模板：header.pug 和 footer.pug。局部模板通常用于在整个应用程序中重复使用的代码。在实际应用中，当局部模板更改时，您不必在每个视图中手动更改代码，因为所有使用该局部模板的视图都将自动更新。
使用 Pug 扩展功能
Pug 还有许多其他的功能和语法。在这里，我们只介绍了一些基本的用法。
条件和循环
Pug 中可以使用条件和循环语句来完成复杂的业务逻辑。
以下是一个使用条件语句的例子。
if user
h3 Welcome, #{user.name}!
else
h3 Please log in以下是一个使用循环语句的例子。
ul
each item in items
li=item过滤器
Pug 中可以使用过滤器来对输出进行过滤。
以下是一个使用 Markdown 过滤器的例子。
:markdown # Hello, world!
Pug Mixins
Pug Mixins 可以帮助我们重复使用一些常用的代码块，并让它们更容易维护和更新。
以下是一个 Pug Mixins 的例子。
mixin card(title, content)
.card
.card-header
h4= title
.card-body
p= content我们可以在模板中调用这个 Mixins。
+card("My Card Title", "This is the content of my card.")在上面的代码中，我们使用了 +card 语法来调用 Mixins，并向它传递了两个参数分别是 title 和 content。
参考资料
总结
本文介绍了在 Express.js 中使用 Pug 模板引擎的最佳实践。我们通过安装和配置 Pug 模板引擎，创建了 Pug 模板，并在 Express.js 中渲染了这个模板。我们还介绍了使用模板继承和局部模板、Pug 的扩展功能以及 Pug Mixins。希望这篇文章能对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651d2ecf95b1f8cacd4b3878