HTML到Pug转换器
将HTML代码快速转换为Pug代码。支持本地浏览器转换，具备代码编辑器和自动完成功能。
611 次使用
|
5.0 评分
HTML输入
Pug输出
使用说明
1
输入HTML代码
在左侧输入框中粘贴或输入您要转换的HTML代码。
2
执行转换
点击"转换为Pug"按钮将HTML代码转换为Pug格式。
3
查看结果
在右侧输出框中查看转换后的Pug代码。
4
使用结果
复制或下载转换后的Pug代码用于您的项目。
Pug模板引擎基本知识
什么是Pug？
Pug（前身为Jade）是一种高性能的模板引擎，它编译为HTML并广泛用于Node.js环境。Pug提供了一种简洁、优雅的语法，让开发者能够以更少的代码编写结构化的HTML页面，同时支持变量、混入、条件判断等高级特性。
Pug的主要优势
语法简洁，减少冗余代码
缩进式语法，提高代码可读性
支持模板继承和包含
强大的逻辑表达式支持
自动转义，增强安全性
与JavaScript生态系统无缝集成
HTML与Pug语法对比
HTML语法：
<div class="container">
<h1>欢迎页面</h1>
<p class="description">
这是一个示例段落
</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
</div>
Pug语法：
.container
h1 欢迎页面
p.description
| 这是一个示例段落
ul
li 列表项1
li 列表项2
常用Pug语法示例
元素和文本
h1 标题文本
类和ID
div.container#main
内联属性
a(href='link', title='标题')
嵌套内容
div p 嵌套文本
注释
//- 不会输出的注释 // 会输出的HTML注释
变量
- var name = '用户' p= name
转换注意事项
- 复杂的HTML结构可能需要手动调整以符合Pug的最佳实践
- Pug依赖于严格的缩进，确保转换后的代码缩进正确
- HTML中的脚本和样式块在转换后可能需要特殊处理
- 对于大型项目，建议使用专业的Pug转换器或框架插件
推广
推荐工具
XML格式化工具 - 免费在线XML代码美化和压缩
免费在线XML格式化工具，支持XML代码美化、压缩、验证等功能，让您的XML代码更加规范和易读。提供实时格式化预览，支持多种XML格式选项。
XML转JSON - 免费在线转换工具
XML转JSON 工具可实现XML格式字符串与JSON格式字符串的解析与转换功能，并对转换后的字符串进行格式化处理
YAML转JSON转换器 - 免费的在线工具箱
在线YAML（YML）和JSON格式互相转换工具，支持YAML数据和JSON数据互相转换，同时支持校验输入的YAML格式数据和JSON格式数据是否正确。
在线JavaScript格式化与压缩工具 - JS代码美化、优化、混淆
一款强大的在线JavaScript (JS) 格式化与代码压缩工具。支持自定义缩进（制表符或空格）、代码折叠/展开、自动换行、一键美化和高效压缩/混淆JS脚本，帮助开发者提高代码可读性、减小文件体积，优化网站性能。
HTML转Markdown工具 - 在线工具箱
免费在线HTML转Markdown工具，帮助您将HTML代码转换为Markdown格式，提高内容处理效率