Node.js 如何使用 Pug 模板引擎实现 HTML 渲染-JavaScript中文网-JavaScript教程资源分享门户

在 Web 开发中，HTML 是最常用的标记语言。虽然 HTML 的标签语义丰富，但它存在一些缺陷，比如 HTML 的语法比较臃肿，不便于开发者阅读和维护，而且 HTML 的渲染速度相对较慢。为了解决这些问题，我们可以采用 Pug 模板引擎来实现 HTML 的渲染。以下是关于 Node.js 如何使用 Pug 模板引擎实现 HTML 渲染的详细讲解。

简介

Pug 是一款高效灵活的模板引擎，它以缩进和无闭合标签的方式来定义 HTML 代码结构，简洁明了。Pug 可以快速生成 HTML 代码，而且可以很方便地实现条件判断、循环和组件化等功能。Pug 基于 JavaScript 编写，可运行于 Node.js、浏览器和其他 JavaScript 环境。

安装

在 Node.js 中使用 Pug 模板引擎需要先安装 Pug 模块。

npm install pug --save

基本用法

编写 Pug 模板的基本步骤如下：

编写 Pug 模板文件，文件名以 .pug 为后缀。
在 Node.js 代码中加载 Pug 模块，使用 pug.renderFile() 方法渲染模板文件。
将渲染后的 HTML 字符串输出到浏览器或保存到文件中。

编写 Pug 模板文件

下面是一个简单的 Pug 模板示例，它渲染一个包含标题和列表的 HTML 页面。

-- -------------------- ---- -------
------- ----
----
  ----
    ----- -- ----
  ----
    -- -- ----
    --
      ---- ---- -- -----
        -------

Pug 模板文件中的第一行 doctype html 用来指定渲染后的 HTML 文档类型，这样浏览器就可以根据文档类型来解析 HTML 代码了。Pug 模板文件中的所有代码都是有缩进的，且没有闭合标签，因此代码结构比较清晰简洁。第二行 html 表示开始一个 HTML 文档，第三行 head 和第四行 body 表示头部和主体部分。注意每个标签都要缩进一个空格。

Pug 模板文件中还可以使用 JavaScript 代码控制页面的逻辑流程。each item in items 表示遍历一个数组 items，并在每个数组元素上渲染 HTML 列表项。

渲染 Pug 模板

下面是使用 pug.renderFile() 方法渲染 Pug 模板的示例代码。

const pug = require('pug');

const items = ['apple', 'banana', 'orange'];

const html = pug.renderFile('template.pug', { items: items });

console.log(html);

上述代码中，pug.renderFile() 方法的第一个参数是模板文件路径，第二个参数是一个对象，可包含模板中需要渲染的变量。在上述示例中，items 变量包含了一个数组，它用来渲染 Pug 模板中的列表项。

上述代码将渲染后的 HTML 输出到控制台。我们也可以将渲染后的 HTML 字符串保存到文件中，以便在浏览器中查看。

保存渲染后的 HTML 到文件

示例代码如下：

const fs = require('fs');

fs.writeFileSync('output.html', html);

上述代码中，我们使用 fs.writeFileSync() 方法将渲染后的 HTML 字符串保存到了 output.html 文件中。

在浏览器中查看渲染后的 HTML

我们可以在浏览器中打开渲染后的 HTML 文件来查看效果。下面是在浏览器中查看渲染后的 HTML 页面的截图。

高级用法

Pug 除了可以编写静态网页，还支持一些常用的数据结构，如条件判断、循环、函数等。这些功能使得 Pug 可以灵活地生成动态内容的 HTML。以下是 Pug 中一些高级功能的示例。

条件判断

Pug 支持使用 if/else 语句来实现条件判断。示例代码如下：

- if (user.logged_in)
  p Welcome back, #{user.name}!
- else
  p Please log in.

在上述示例中，我们使用 JavaScript 代码 - if (user.logged_in) 来控制条件逻辑。

循环

Pug 支持使用 each 语句遍历数组或对象，示例代码如下：

ul
  each item in items
    li=item

ul
  each val, key in items
    li= key + ': ' + val

在上述示例中，我们使用 each item in items 语句遍历数组 items 中的每个元素，并渲染 HTML 列表项。each val, key in items 语句则遍历对象，并渲染对象的属性和值。

函数和闭包

Pug 支持在模板中使用函数和闭包。示例代码如下：

-- -------------------- ---- -------
- --- --- - ------- -----
-- ----------
-- --------

- -------- ---------- -
    ------ ------- -------
  -

- -------- -------- -
    ------ ---------- -
      ------ ---
    -
  -

在上述示例中，我们定义了两个函数 sayHello() 和 say()，并在模板中调用它们。say() 函数返回一个闭包，它可以访问外部函数的变量 msg。

结论

Pug 是一款高效灵活的模板引擎，它可以帮助我们快速生成 HTML 代码，并实现条件判断、循环、函数等常用功能。在 Node.js 中使用 Pug 可以大大提高 Web 开发效率，减少 HTML 代码的冗余和错误。希望本文能对 Node.js 开发者了解和学习 Pug 模板引擎有所帮助。

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