在前端开发中，模板引擎是一个非常重要的概念。模板引擎能够将数据和 HTML 模板进行渲染，生成最终的 HTML 页面。在 Node.js 中，常用的模板引擎有许多，其中 Pug 是一个非常流行的选择。本文将介绍 Pug 在 Express.js 中如何使用，以及掌握 Pug 的一些技巧和注意事项。
什么是 Pug？
Pug（前身为 Jade）是一个高效、健壮的模板引擎。其语法非常简洁，类似于 Python、Ruby 和 Haml 等其他模板引擎。Pug 不使用大括号、分号和冒号等符号，而是使用缩进和缩写的方式，简化了模板的编写。同时，Pug 支持变量、循环、条件、Mixin 等特性，使得模板的编写更加语义化和易于维护。下面是一个简单的 Pug 示例：
html
head
title My Pug Page
body
h1 Welcome to Pug!
p This is a Pug page template.Pug 可以将上面的 Pug 模板编译成以下的 HTML 内容：
-- -------------------- ---- -------
--------- -----
------
------
--------- --- ------------
-------
------
----------- -- ---------
------- -- - --- ---- -------------
-------
-------可以看到，Pug 语法相比 HTML 更加简单和易于理解。
在 Express.js 中使用 Pug
在 Express.js 中使用 Pug 非常简单，只需要安装 Pug 模块并在 Express.js 应用程序中设置模板引擎即可。下面是一段基本的 Express.js 应用程序，其中使用了 Pug 模板引擎：
-- -------------------- ---- ------- ----- ------- - ------------------ ----- --- - --------- -- ---------- --- ------------- -------- ------ -- -- --------- -- ------------ ----- ---- -- - ------------------- - ------ --- --- ------ -------- -------- -- ----- -- -- ---------------- -- -- - ---------------- --------- -- ----------------------- --
上面的代码中，我们使用了 app.set('view engine', 'pug') 将 Pug 设置为 Express.js 的默认视图引擎。然后，在响应 / 路径的请求时，我们使用了 res.render('index', { title: 'My Pug Page', message: 'Welcome to Pug!' }) 渲染了名为 index 的 Pug 模板，并将 title 和 message 两个变量传递给模板。最后，我们监听了 3000 端口并启动了 Express.js 应用程序。
在 Express.js 中使用 Pug 还需要配置 Pug 的模板目录，默认情况下 Pug 会在应用程序根目录的 views 文件夹下查找模板。如果我们想指定不同的模板目录，可以使用如下代码：
app.set('views', __dirname + '/templates')上面的代码将模板目录设置为当前文件所在目录下的 templates 文件夹。
Pug 的语法和特性
除了上面提到的 Pug 的简洁语法外，Pug 还有许多其他有用的语法和特性。下面是一些需要了解的重要特性：
变量和表达式
Pug 支持在模板中使用变量和表达式。变量可以使用标准的 JavaScript 语法定义和解析，例如：
- let title = 'My Pug Page'; let message = 'Welcome to Pug!' h1= title p= message
上面的代码中，我们使用了 - 符号表示 JavaScript 代码块。在 JavaScript 代码块中，我们可以使用 let 和 = 定义和解析变量。当我们在 HTML 元素中使用 = 符号时，表示将 JavaScript 表达式输出到 HTML 中。
循环和条件
Pug 支持常见的循环和条件语句，例如：
ul
each fruit in ['apple', 'orange', 'banana']
li= fruit
if user
p Welcome back, #{user.name}!
else
p Please login to continue.上面的代码中，我们使用了 each 循环和 if/else 条件语句。在循环中，我们可以使用 each fruit in ['apple', 'orange', 'banana'] 来循环遍历数组，并将数组元素赋值给 fruit 变量。在条件语句中，我们使用 if user 和 else 来判断用户是否已登录，并输出相应的欢迎语句。
Mixin 和 include
Pug 还支持 Mixin 和 include，这两个特性可以让模板的重用变得更加容易。Mixin 可以为常用的 HTML 元素和组件定义一个模板，并在需要时进行调用，例如：
mixin box(title, content)
.box
h2= title
p= content
+box('Hello', 'This is a box.')
+box('Goodbye', 'This is another box.')上面的代码中，我们使用了 mixin 定义了一个名为 box 的 Mixin，该 Mixin 包含了一个标题和一个内容。在需要渲染这个 Mixin 时，我们可以使用 +box('Hello', 'This is a box.') 的方式进行调用。
include 可以将其他 Pug 文件包含在当前文件中：
doctype html
html
head
title My Pug Page
body
include navbar.pug
h1 Pug is awesome!上面的代码中，我们使用了 include navbar.pug 将 navbar.pug 文件包含在当前文件中，这样就可以复用 navbar.pug 的模板内容。
总结
本文介绍了 Pug 在 Express.js 中的使用方法和常用的语法和特性。Pug 是一个高效、简洁和易于维护的模板引擎，为我们在开发中提供了许多便利。通过学习本文中的内容，我们可以更加熟练地掌握 Pug，提高我们在前端开发中的效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cb5f8a5ad90b6d042032a9