PUG模板引擎的渲染知识点总结及用法详解

PUG模板引擎的渲染知识点总结及用法详解

引言

在现代Web开发中，动态内容的生成是必不可少的。PUG（之前称为Jade）是一种高性能的模板引擎，它使用简洁的语法来描述HTML结构。PUG模板引擎以其速度快和语法简洁而受到开发者的喜爱。本文将详细介绍PUG的概念、出现的原因、基本用法、高级用法以及常见的使用场景。

PUG模板引擎的概念

PUG是一种基于Node.js的模板引擎，它使用一种简洁的语法来编写HTML。PUG的设计理念是减少模板代码的冗余，提高代码的可读性和编写效率。PUG模板最终被编译成HTML，因此它们可以直接用于Web页面的渲染。

PUG出现的原因

在PUG出现之前，开发者通常需要编写冗长的HTML代码，这种方法不仅效率低下，而且难以维护。PUG的出现解决了以下问题：

1. 代码简洁：PUG的语法非常简洁，可以大幅减少模板代码的量。
2. 可读性：PUG的缩进和标签结构使得模板代码更加易于阅读和理解。
3. 逻辑控制：PUG支持条件判断和循环控制，使得在模板中处理复杂逻辑变得简单。

PUG模板语法

PUG模板使用特定的语法来插入动态内容和控制结构。以下是一些常用的PUG语法和对应的代码示例：

1. 数据输出

在PUG中，使用#{variable}语法来输出变量。

doctype html
html
  head
    title #{title}
  body
    h1 #{message}

2. 条件语句

PUG中的条件语句使用- if和- else if以及- else。

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

3. 循环语句

PUG中的循环语句使用- each。

ul
  - each item in items
    li #{item}

4. 包含其他模板

PUG允许在一个模板中包含另一个模板，使用include关键字。

include header.pug
// 页面内容
include footer.pug

5. 继承和布局

PUG支持模板继承，允许你创建一个基础模板（layout），然后在其他模板中继承这个基础模板。

// layout.pug
doctype html
html
  head
    title #{title}
  body
    block content

// page.pug
extends layout.pug
block content
  h1 My Page
  p This is my page content.

PUG的基本用法

1. 在Express.js中使用PUG

1. 安装PUG

首先，通过npm安装PUG模块：

npm install pug --save

2. 配置Express.js

在Express.js应用中设置PUG为模板引擎，并指定视图文件的存放目录：

const express = require('express');
const app = express();
app.set('views', __dirname + '/views');
app.set('view engine', 'pug');

3. 创建PUG模板文件

在views目录下创建PUG模板文件，使用PUG语法插入动态数据：

// views/index.pug
doctype html
html
  head
    title #{title}
  body
    h1 #{message}

4. 渲染PUG模板

使用res.render()函数渲染模板并发送响应：

app.get('/', (req, res) => {
  const title = 'Express.js Template Engine';
  const message = 'Hello, PUG!';
  res.render('index', { title: title, message: message });
});

2. 在http模块中使用PUG

1. 环境准备

在开始之前，请确保你的开发环境中已经安装了Node.js。你还需要安装PUG模板引擎，可以通过npm来安装：

npm install pug

2. 创建HTTP服务器

我们将使用Node.js的内置http模块来创建一个简单的HTTP服务器。这个服务器将负责接收HTTP请求，并根据请求返回相应的响应。

const http = require('http');
const fs = require('fs');
const pug = require('pug');

// 创建HTTP服务器
const server = http.createServer((req, res) => {
  // 处理根目录请求
  if (req.url === '/' && req.method === 'GET') {
    // 使用PUG模板渲染页面
    pug.renderFile('index.pug', { title: 'Hello PUG' }, (err, html) => {
      if (err) {
        // 处理错误
        res.writeHead(500, {'Content-Type': 'text/plain'});
        res.end('Error: ' + err.message);
      } else {
        // 发送渲染后的HTML
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.end(html);
      }
    });
  }
});

// 监听端口
server.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

3. 创建PUG模板

PUG模板是一种使用PUG语法编写的文件，其中可以包含JavaScript代码。这些代码通常用于动态地插入数据。创建一个名为index.pug的文件，并添加以下内容：

doctype html
html
  head
    title #{title}
  body
    h1 Welcome to #{title}
    p This is a dynamic page rendered by PUG.

在这个模板中，#{title}是PUG的语法，用于插入传递给模板的数据。

4. 运行服务器

保存你的代码和模板文件后，运行Node.js脚本：

node your_script_name.js

打开浏览器，访问http://localhost:3000，你将看到一个标题为"Hello PUG"的网页，这正是我们在模板数据中设置的标题。

3. 在客户端接收数据

PUG模板渲染后的HTML可以直接在客户端浏览器中显示，无需额外的处理。

PUG的高级用法

PUG模板引擎提供了多种高级特性，使得开发者可以更加高效地编写和维护模板代码。以下是一些PUG的高级用法：

1. 条件语句与循环

PUG支持条件语句和循环，这使得模板能够根据不同的数据动态生成页面内容。

• 条件语句：使用if、else if和else来根据条件输出不同的HTML内容。

  - if user.isLoggedIn
    h1= "欢迎回来，" + user.name
  - else
    a(href="/login") 登录
    a(href="/register") 注册
  

• 循环：使用each循环遍历数组或对象，为每个元素生成HTML结构。

  ul
    - each item in items
      li= item.name
  

2. 过滤器的使用

PUG允许使用过滤器来处理输出内容，这在处理文本格式化时非常有用。

3. Mixins（混入）

Mixins是PUG中用于复用代码块的特性。通过定义一个mixin，你可以在多个地方调用它，传递参数以生成不同的内容。

• 定义和使用mixin：

  // 定义
  mixin list
    ul
      li foo
      li bar
      li baz
  
  // 使用
  +list
  +list
  

• 带参数的mixin：

  mixin pet(name)
    li.pet= name
  ul
    +pet('猫')
    +pet('狗')
    +pet('猪')
  

4. 文件继承

PUG支持模板继承，允许创建基础模板（layout），然后在其他模板中继承这个基础模板。

• 基础模板（layout.pug）：

  doctype html
  html
    head
      title #{title}
    body
      block content
  

• 继承基础模板（page.pug）：

  extends layout.pug
  block content
    h1 My Page
    p This is my page content.
  

5. 代码块的使用

PUG允许在模板中嵌入JavaScript代码，分为不输出的代码、带输出的代码和不转义的、带输出的代码。

• 不输出的代码：

  - for (var x = 0; x < 3; x++)
    li item
  

• 带输出的代码：

  p !{'这段文字 <strong>没有</strong> 被转义！'}
  

6. 引入外部样式和脚本

在PUG模板中，可以直接引入外部CSS文件和JavaScript文件。

link(rel='stylesheet', href='styles/main.css')
script(src='scripts/main.js')

7. 性能优化

PUG提供了cache选项，可以将编译出来的函数自动存储到内部缓存中，避免重复编译，提高性能。

const pug = require('pug');
// 编译并使用一组数据渲染 template.pug
console.log(pug.renderFile('template.pug', {
  name: 'Timothy'
}, { cache: true }));

通过这些高级用法，PUG模板引擎能够帮助开发者构建更加动态和高效的Web应用。

PUG的使用场景

1. 快速搭建静态网站：PUG可以用于快速构建静态网页，只需将数据绑定到模板中，然后将渲染后的HTML保存到文件中。
2. 构建动态网页：PUG也适用于构建动态网页，将数据绑定到模板中，然后将渲染后的HTML发送给客户端。
3. 前后端不分离的项目：在一些项目中，后端服务直接连接数据库，查询数据后返回到PUG页面，根据PUG语法，从路由处拿到变量后渲染在PUG模板内。

结论

PUG作为一个强大的模板引擎，提供了灵活的方式来处理动态内容的生成，适用于各种Web开发场景，从简单的静态页面到复杂的业务型网站。通过PUG，开发者可以更高效地构建和维护Web应用，提高开发效率和代码质量。