Node.js 如何使用 Pug 模板引擎实现 HTML 渲染

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

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

简介

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

安装

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

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

基本用法

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

  1. 编写 Pug 模板文件,文件名以 .pug 为后缀。
  2. 在 Node.js 代码中加载 Pug 模块,使用 pug.renderFile() 方法渲染模板文件。
  3. 将渲染后的 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 模板的示例代码。

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

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

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

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

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

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

保存渲染后的 HTML 到文件

示例代码如下:

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

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

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

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

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

高级用法

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

条件判断

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

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

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

循环

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

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

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

在上述示例中,我们使用 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


猜你喜欢

  • 如何使用 React 创建 RESTful API 前端页面

    在现代 Web 应用程序开发中,RESTful API 已经成为了一种非常流行的设计模式。它可以简化 Web 应用程序的开发过程,并使前后端分离变得更容易。在本文中,我们将介绍如何使用 React 创...

    19 天前
  • React 应用中的代码优化技巧

    在 React 应用开发中,代码优化是一个非常重要的话题。优化代码可以使你的 React 应用更加高效、快速,同时也能提高代码质量和可维护性。在本文中,我们将探讨一些用于优化 React 应用代码的技...

    19 天前
  • Enzyme 如何在 React 组件中测试错误

    介绍 React 是一种非常流行的前端开发框架,而 Enzyme 是一个强大的 JavaScript 测试工具,它能够让开发者轻易地在 React 组件中对代码进行测试。

    19 天前
  • Sequelize 中大量数据导入、导出与备份

    Sequelize 是一个基于 Node.js 的 ORM 工具,用于在 JavaScript 应用程序中实现 SQL 数据库的对象关系映射。在实际开发中,我们通常需要对数据库进行数据导入、导出和备份...

    19 天前
  • CSS Grid 实现六边形布局的解决方案

    六边形布局在前端界面设计中常常被用到,他有一种独特的美感,可以为网站增加视觉冲击力。然而,在CSS中实现六边形布局并不容易,因为六边形的边缘不是水平或垂直的,而是倾斜的。

    19 天前
  • Hapi 实战:如何使用 handlebars 进行模板渲染

    在现代 web 开发中,模板渲染是前端开发不可避免的一部分。而 Hapi 是一款 Node.js 框架,可以帮助开发者搭建高性能的 web 应用程序。在本文中,我们将探讨如何在 Hapi 中使用 ha...

    19 天前
  • RxJS 中的 reduce 操作符详解

    前言 RxJS(Reactive Extensions for JavaScript)是一个流行的响应式编程库,它允许我们以一种更加声明性的方式处理异步事件流。RxJS 的核心概念之一是操作符,它们允...

    19 天前
  • 使用 Docker 部署 WordPress

    使用 Docker 部署 WordPress 是现代化的 web 开发方式,容器化能够让开发者轻松地部署、迁移和运行应用程序。Docker 将应用程序和依赖项打包到 Docker 镜像中,这些镜像可以...

    19 天前
  • Kubernetes 在阿里云上的部署实践

    前言 Kubernetes 是 Google 推出的一个开源项目,用于自动化部署、扩展和管理容器化应用程序。Kubernetes 基于容器技术,提供了高可用性、易于扩展、灵活的部署方式等特点,是当前最...

    19 天前
  • 制作漂亮的 PWA 加载动画教程

    作为现代 Web 应用程序的重要组成部分之一,PWA(Progressive Web Apps)已经成为前端开发中的热门话题。而一个完整而漂亮的 PWA 动画也是吸引用户的重要因素之一。

    19 天前
  • Fastify-Cookie: 快速开发可靠的Cookie中间件

    简介 Fastify 是一款快速且低开销的 Web 框架。它简单易用,模块化设计,且内部采用异步的处理机制。它的少量依赖和强大的性能,使得它在现代 JavaScript 中倍受青睐,被许多大型企业广泛...

    19 天前
  • Tailwind CSS 的断点:如何在响应式设计中发挥其优势?

    Tailwind CSS 是一种流行的 CSS 框架,它提供了一套简单而易于使用的类,使您能够快速构建用于响应式设计的 Web 应用程序。其中包括大量的响应式断点,这是使 Web 应用程序在不同设备上...

    19 天前
  • ECMAScript 2017 (ES8) 如何使用扩展运算符(Spread Operator)与剩余运算符(Rest Parameters)

    ECMAScript 2017 (ES8) 如何使用扩展运算符(Spread Operator)与剩余运算符(Rest Parameters) 引言 ECMAScript(简称 ES)是 JavaSc...

    19 天前
  • RxJS 中的 pluck 操作符使用方法

    在 RxJS 中,pluck 操作符是一个非常有用的工具,它可以帮助开发者从 observable 中选择一个指定的属性。本文将会详细介绍 pluck 操作符的使用方法,以及如何在实际开发中应用它。

    19 天前
  • 解决 Material Design 样式覆盖其他样式的问题

    Material Design 是 Google 推出的一种设计语言,被广泛应用于 Web 和移动应用的设计中。然而,使用 Material Design 样式时可能会出现样式覆盖的问题,这可能会导致...

    19 天前
  • Promise 的异常捕获及处理方法

    在前端开发中,Promise 是一种非常常见和重要的异步编程方式。然而,在 Promise 中,如果出现异常错误并不会被自动捕获,因此需要我们手动捕获并进行处理。本文将详细介绍 Promise 异常捕...

    19 天前
  • JVM 调优:提高 Java 应用程序的性能

    Java 虚拟机(Java Virtual Machine,JVM)是 Java 语言的核心,它是一种可以解释 Java 字节码并执行 Java 应用程序的虚拟计算机。

    19 天前
  • 如何在 LESS 中处理字体加粗的问题

    如何在 LESS 中处理字体加粗的问题 在前端开发中,经常要用到字体加粗的效果。在 CSS 中,可以使用 font-weight 属性来设置字体粗细。但是在使用 LESS 的时候,可能会遇到一些处理字...

    19 天前
  • PWA 默认主题颜色的更改指南

    在当前的 Web 技术中,渐进式网络应用程序(PWA)正在快速流行。随着越来越多的企业和开发人员使用 PWA,更多的需求,比如更改主题颜色,也随之出现。本文将介绍如何更改 PWA 默认主题颜色,并提供...

    19 天前
  • Node.js 中使用 Fastify 构建 HTTP API 实例

    介绍 Fastify 是一个快速、低开销、且其提供了生产级别的功能的 Web 框架。它专门设计用于构建非常快速的异步 JavaScript 服务。本文将介绍如何使用 Fastify 在 Node.js...

    19 天前

相关推荐

    暂无文章