如何在 Express.js 中使用 Pug 模板引擎

Pug 是一款强大的模板引擎，它可以将 HTML 模板转换为高度优化的 JavaScript 函数，从而在浏览器中渲染出 HTML 页面。在前端开发中，Pug 的使用非常普遍。但其实，在后端开发中，Pug 也同样具有非常多的优势。

本文将会深入介绍如何在 Express.js 中使用 Pug 模板引擎。我们将从 Pug 的安装、Express.js 与 Pug 的结合、Pug 模板引擎的常见语法等方面详细介绍，希望可以帮助你更好地使用 Pug 模板引擎。

Pug 的安装

在开始使用 Pug 模板引擎之前，我们需要先将其安装到项目中。可以使用 npm 命令进行安装：

npm install pug --save

安装完成后，我们可以在项目中引入 Pug 模板引擎：

const pug = require('pug');

这样就完成了 Pug 模板引擎的安装。接下来，我们就可以开始探索 Pug 模板引擎在 Express.js 中的使用了。

Express.js 与 Pug 的结合

在 Express.js 中使用 Pug 模板引擎非常简单，我们只需要做如下几个步骤：

1. 在 Express.js 中设置模板引擎：

const express = require('express');
const app = express();

app.set('view engine', 'pug');
app.set('views', './views');

在上面的代码中，我们通过 set() 方法设置了模板引擎为 Pug，同时设置了 Pug 模板文件所在的文件夹为 ./views。

1. 创建 Pug 模板文件：

在 ./views 目录下创建一个 index.pug 文件，内容如下：

html
  head
    title= title
  body
    h1= message

在上面的代码中，我们使用了 Pug 的语法来定义了 HTML 的结构，title 和 message 分别为传入 Pug 模板的变量。

1. 在 Express.js 中使用 Pug 模板引擎：

在 Express.js 中，我们使用 res.render() 方法来渲染 Pug 模板，比如将 index.pug 这个模板文件渲染出来，代码如下：

app.get('/', (req, res) => {
  res.render('index', { title: 'Hello', message: 'Welcome to my blog!' });
});

在上面的代码中，我们调用了 res.render() 方法将 index 模板文件渲染出来，同时将 title 和 message 两个变量传递给了 Pug 模板，这样就完成了 Pug 模板引擎在 Express.js 中的结合。

Pug 模板引擎的常见语法

在上面的例子中，我们已经初步了解了 Pug 模板引擎的语法，接下来我们就来介绍一些 Pug 模板引擎的常见语法：

标签

在 Pug 中，我们可以用以下语法定义标签：

div
p
span

上述语法分别定义了 div、p 和 span 这三个标签。

如果我们需要为标签添加类名、id、属性等等，可以使用以下语法：

div.my-class#my-id(data-attr="value")
  p= message

上述语法定义了一个类名为 my-class，id 为 my-id，并且还定义了一个 data-attr 属性，其值为 value。p 标签中使用了等号，表示将 message 变量的值塞到标签中。

变量

在 Pug 中，我们可以使用以下语法定义变量：

- let myVar = 'Hello'
p= myVar

上述语法定义了一个名为 myVar 的变量，并将其值赋为 'Hello'。p 标签中使用了等号，表示将 myVar 变量的值塞到标签中。

还可以通过 #{} 语法来将变量嵌套到标签中：

p Welcome to #{myVar} blog!

上述语法将 myVar 变量的值嵌套到了 p 标签中。

条件语句与循环语句

在 Pug 中，我们也可以使用条件语句和循环语句。以下是一些示例代码：

if myVar === 'Hello'
  p It's hello!
else
  p It's not hello...

each item in myList
  li= item

上述代码中，if 语句用于判断 myVar 的值是否为 'Hello'，each 语句用于循环遍历 myList 数组中的所有元素，并输出为列表。

总结

在本文中，我们详细介绍了如何在 Express.js 中使用 Pug 模板引擎，包括 Pug 的安装、Express.js 与 Pug 的结合，以及 Pug 模板引擎的常见语法等方面的内容。希望这篇文章可以帮助你更好地使用 Pug 模板引擎，提高后端开发效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a2116648841e9894e57a7d