无需登录 数据私有 本地保存

Pug转HTML工具 - 在线Pug模板编译渲染

11
0
0
0

Pug 转 HTML

在线编译渲染
加载引擎中...
Pug 代码
0 字符
HTML 输出
0 字符 
编译后的 HTML 将显示在这里...

输入 JSON 格式的数据来渲染 Pug 模板中的变量。留空或 {} 表示不传数据。

已复制到剪贴板

常见问题

Pug（原名Jade）是什么？
Pug 是一款简洁的模板引擎，专为 Node.js 设计，前身为 Jade。它使用缩进语法代替传统的 HTML 尖括号标签，大幅减少代码量，提高可读性。Pug 支持变量、循环、条件判断、混合（mixin）、继承（extends）等高级特性，广泛应用于 Express.js 等 Web 框架中。
Pug 和 HTML 的核心区别是什么？
语法简洁度：Pug 使用缩进表示嵌套，无需闭合标签，代码量通常比 HTML 少 30%-50%。
动态能力：Pug 原生支持变量插值、循环、条件渲染，HTML 需要借助 JavaScript 框架实现。
可复用性：Pug 的 mixin 和 extends 提供了强大的组件复用和模板继承能力。
学习曲线：Pug 需要适应缩进语法，但熟悉后编写效率极高。
如何安装和使用 Pug？
通过 npm 安装：npm install pug
在 Node.js 中使用：const pug = require('pug');
编译模板：const html = pug.render('h1 Hello #{name}', {name: 'World'});
也可作为 Express 的视图引擎：app.set('view engine', 'pug');
浏览器端编译 Pug 有哪些限制？
本工具在浏览器中编译 Pug，include/extends 等依赖文件系统的功能不可用（因为没有实际文件）。基本语法（标签、属性、变量、循环、条件、mixin 定义在同一个文件中）完全支持。如需完整功能，建议在 Node.js 环境中使用 Pug CLI 或构建工具（如 Gulp、Webpack）进行编译。
常见的 Pug 编译错误有哪些？
缩进不一致：Pug 严格要求使用一致的缩进（通常为 2 个空格），混用空格和 Tab 会导致编译失败。
语法错误：属性括号不匹配、标签名无效、JavaScript 代码块语法错误等。
未定义变量：模板中引用了未传入的变量，输出会显示 "undefined"。请在本工具的 JSON 数据区提供对应数据。
include 路径问题：浏览器环境下无法解析文件路径，include 会失败。
Pug 适合哪些场景？
Pug 特别适合服务端渲染（SSR）的 Web 应用、静态网站生成、邮件模板编写、以及需要大量复用 HTML 组件的项目。搭配 Express.js 或 Next.js 等服务端框架使用效果最佳。对于纯前端 SPA 项目，React JSX 或 Vue SFC 可能是更主流的选择。
🔧 相关工具