HTML到Pug转换器

将HTML代码快速转换为Pug代码。支持本地浏览器转换,具备代码编辑器和自动完成功能。

1161 次使用 | 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转换器或框架插件
Annonce

API开发平台

快速构建、测试和部署API

推荐工具

Outil de formatage XML - Outil gratuit en ligne pour embellir et compresser le code XML

Outil de formatage XML en ligne gratuit qui prend en charge les fonctions d'embellissement, de compression, de validation du code XML, etc., rendant votre code XML plus standardisé et lisible. Offre un aperçu en temps réel du formatage et prend en charge plusieurs options de format XML.

XML vers JSON - Outil de conversion en ligne gratuit

L'outil XML vers JSON peut analyser et convertir des chaînes au format XML et JSON, et formater les chaînes converties.

Outil en ligne de formatage et de minification JavaScript - Embellir, optimiser et obscurcir le code JS

Un outil en ligne puissant pour formater et minifier du code JavaScript (JS). Prend en charge l'indentation personnalisée (tabulations ou espaces), le pliage/dépliage du code, le retour à la ligne automatique, l'embellissement en un clic et la compression/obscurcissement efficace des scripts JS, aidant les développeurs à améliorer la lisibilité du code, réduire la taille des fichiers et optimiser les performances du site web.

Formatage YAML - Outil YAML en ligne gratuit

Outil gratuit en ligne de formatage et de beauté YAML qui prend en charge l'ajustement automatique des indentations, la coloration syntaxique et supprime les espaces superflus, rendant votre code YAML clair et facile à lire. Aucune installation requise, formatage en un clic pour améliorer la lisibilité et l'efficacité de maintenance des fichiers YAML !

Convertisseur YAML en JSON - Boîte à outils en ligne gratuite

Outil en ligne de conversion mutuelle entre formats YAML (YML) et JSON, prenant en charge la conversion mutuelle entre données YAML et JSON, et également la validation de la correction des données de format YAML et JSON entrées.