微信登录

模板引擎 - Pug 模板引擎 - 特点与应用

模板引擎 - Pug 模板引擎 - 特点与应用

引言

在 Node.js 的开发世界中，模板引擎是一项非常重要的技术。它可以帮助我们将数据和视图分离，提高代码的可维护性和可复用性。Pug（原名 Jade）是一款功能强大且广受欢迎的模板引擎，它以简洁的语法和高效的性能，在前端开发领域占据了一席之地。本文将详细介绍 Pug 模板引擎的特点，并通过具体的示例代码展示其在实际项目中的应用。

Pug 模板引擎的特点

简洁的语法

Pug 采用了缩进式的语法，避免了大量的 HTML 标签闭合，使得代码更加简洁易读。例如，下面是一个简单的 HTML 代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>My Page</title>
  6. </head>
  7. <body>
  8.     <h1>Welcome to my website</h1>
  9.     <p>This is a sample paragraph.</p>
  10. </body>
  11. </html>

使用 Pug 编写相同的内容，代码如下：

  1. doctype html
  2. html(lang="en")
  3.   head
  4.     meta(charset="UTF-8")
  5.     title My Page
  6.   body
  7.     h1 Welcome to my website
  8.     p This is a sample paragraph.

可以看到，Pug 的代码更加简洁，减少了冗余的标签。

动态内容支持

Pug 支持动态插入数据，可以方便地将后端的数据传递到模板中进行渲染。通过变量和表达式，我们可以根据不同的条件生成不同的 HTML 内容。

模板继承与包含

Pug 提供了模板继承和包含的功能，允许我们创建可复用的模板结构。通过定义基础模板和子模板，可以减少代码的重复，提高开发效率。

过滤器支持

Pug 支持过滤器，可以对文本内容进行格式化和处理。例如，使用 :markdown 过滤器可以将 Markdown 文本转换为 HTML 内容。

Pug 模板引擎的应用

安装与配置

首先，我们需要在 Node.js 项目中安装 Pug 模块。可以使用 npm 进行安装：

  1. npm install pug

安装完成后，我们可以在 Node.js 代码中引入并使用 Pug。以下是一个简单的示例：

  1. const express = require('express');
  2. const app = express();
  4. // 设置视图引擎为 Pug
  5. app.set('view engine', 'pug');
  6. // 设置视图文件的目录
  7. app.set('views', './views');
  9. // 定义路由
  10. app.get('/', (req, res) => {
  11.     // 渲染 Pug 模板
  12.     res.render('index', { title: 'Home Page', message: 'Welcome to my website!' });
  13. });
  15. // 启动服务器
  16. const port = 3000;
  17. app.listen(port, () => {
  18.     console.log(`Server is running on port ${port}`);
  19. });

动态内容渲染

在 Pug 模板中，我们可以使用变量和表达式来动态渲染内容。创建一个名为 index.pug 的文件，内容如下：

  1. doctype html
  2. html(lang="en")
  3.   head
  4.     meta(charset="UTF-8")
  5.     title= title
  6.   body
  7.     h1= message
  8.     p Today is #{new Date().toDateString()}

在这个示例中，我们使用 = 符号来输出变量的值，使用 #{} 来插入表达式的结果。

模板继承与包含

模板继承允许我们定义一个基础模板，然后在子模板中继承并扩展它。创建一个名为 layout.pug 的基础模板：

  1. doctype html
  2. html(lang="en")
  3.   head
  4.     meta(charset="UTF-8")
  5.     title= title
  6.   body
  7.     block content

创建一个名为 index.pug 的子模板，继承自 layout.pug：

  1. extends layout
  3. block content
  4.   h1= message
  5.   p This is the content of the home page.

在这个示例中，extends 关键字用于继承基础模板，block 关键字用于定义可扩展的区域。

过滤器的使用

Pug 支持多种过滤器，例如 :markdown 过滤器可以将 Markdown 文本转换为 HTML 内容。首先，安装 marked 模块：

  1. npm install marked

创建一个名为 markdown.pug 的文件：

  1. doctype html
  2. html(lang="en")
  3.   head
  4.     meta(charset="UTF-8")
  5.     title Markdown Example
  6.   body
  7.     :markdown
  8.       # This is a Markdown Heading
  9.       This is a sample paragraph in Markdown.

总结

特点 描述
简洁的语法 缩进式语法，减少 HTML 标签闭合，代码更易读
动态内容支持 支持变量和表达式，方便插入后端数据
模板继承与包含 可创建可复用的模板结构，提高开发效率
过滤器支持 可对文本内容进行格式化和处理

Pug 模板引擎以其简洁的语法、强大的功能和高效的性能，成为了 Node.js 开发中一个非常实用的工具。通过动态内容渲染、模板继承与包含以及过滤器的使用，我们可以更加高效地开发出高质量的前端页面。希望本文能够帮助你更好地理解和使用 Pug 模板引擎。

模板引擎 - Pug 模板引擎 - 特点与应用