完整标签语法转换
工具完整支持Pug的所有标签语法转换,包括标准HTML5标签、自闭合标签(如「br」「hr」「img」「input」「meta」「link」等)以及自定义标签。Pug中通过缩进表达的嵌套层级关系将被精确还原为HTML的父子标签结构,每级缩进对应一层HTML嵌套。标签的class属性会从「.className」简写格式还原为「class='className'」的标准HTML写法,id属性从「#idName」格式还原为「id='idName'」。所有转换严格遵循HTML5规范,确保输出代码的有效性和兼容性。
属性声明完整还原
Pug中使用圆括号声明的元素属性将被完整还原为HTML标准格式。工具支持所有常见属性类型,包括「href」「src」「type」「value」「placeholder」「data-*」等标准属性,以及「checked」「disabled」「required」「readonly」等布尔属性。属性值中的特殊字符将被正确转义,确保输出HTML的属性值安全有效。多属性标签中各属性的顺序和格式均保持规范一致。
变量插值与JavaScript表达式
工具支持Pug中的变量插值语法,包括「#{变量名}」的缓冲输出和「!{变量名}」的非转义输出。当Pug代码中包含变量引用时,编译器会将其标记为占位符并在输出HTML中保留变量结构,方便开发者查看模板的结构化输出。同时支持在属性中使用「=」赋值语法嵌入JavaScript表达式,表达式内容在HTML输出中以数据属性或注释形式保留,便于后续在实际运行环境中替换。
Mixin混入定义与调用
Pug的Mixin功能是模板复用的核心机制,本工具完整支持Mixin的定义(「+mixinName」语法)和调用。编译后的HTML中,Mixin调用处将展开为Mixin体内的实际标签结构,参数传递通过属性形式体现在输出HTML中。这使得开发者可以在不运行Node.js环境的情况下预览Mixin的渲染结果,快速验证Mixin逻辑的正确性。支持带参数的Mixin和块级Mixin(block mixin),满足复杂模板复用场景的预览需求。
条件与循环渲染
工具支持Pug中「if」「else if」「else」「unless」等条件判断语法,以及「each」「while」等循环语法。编译过程中,条件分支根据变量占位符的逻辑关系进行智能展开,循环结构则保留结构化的HTML注释标记,标明循环的起止位置和迭代逻辑。这种处理方式既保留了模板的控制流信息,又输出了结构清晰的HTML代码,帮助开发者理解模板的渲染逻辑。
模板继承与文件包含
工具支持Pug的模板继承语法「extends」和「block」关键字,以及文件包含语法「include」。在单文件模式下,继承和包含关系会以HTML注释的形式标注在输出结果中,标明基础模板和子模板的关系。开发者可以将完整的模板项目粘贴到工具中,获得包含继承关系解析后的完整HTML输出,方便调试模板层次结构。
格式化HTML输出
编译生成的HTML代码经过自动格式化处理,缩进统一、标签对齐、换行规范,具有良好的可读性。输出HTML包含正确的「」文档类型声明、中文语言属性设置、字符编码声明和视口配置等基础结构。开发者可直接复制输出的完整HTML代码,在浏览器中打开即可查看渲染效果,无需任何额外处理。
UD5工具箱