HTML to Thymeleaf 转换工具
1
上传文件
2
配置映射
3
生成模板
4
预览结果
文件上传
HTML文件
上传需要转换的HTML文件
上传并加载
测试数据
JSON数据文件
或手动输入JSON测试数据
JSON数据
验证JSON
文件信息
映射关系配置
添加映射
请先上传HTML文件，然后添加映射关系
转换结果
Thymeleaf
预览
Thymeleaf模板代码
复制
下载
生成的Thymeleaf模板将显示在这里
渲染预览结果
预览结果将显示在这里
配置映射关系
网页元素选择
选择器类型
CSS Selector
XPath
JS路径 (querySelector)
选择器路径
支持数组通配符 * ，例如：div:nth-child(*)
选择器预览
选择器路径将显示在这里
Thymeleaf配置
Thymeleaf类型
th:text (文本替换)
th:each (循环)
th:if (条件显示)
th:src (图片/资源路径)
th:href (链接)
th:attr (属性)
变量路径
支持多级路径，例如：tag.text, user.profile.name
循环变量名
属性名
条件类型
简单变量 (true/false)
非空检查 (!= null)
数值/字符串比较
取反条件 (!variable)
自定义表达式
选择您要使用的条件类型
变量名
当变量为true时显示元素
变量名
当变量不为空时显示元素
左值
操作符
> 大于
< 小于
>= 大于等于
<= 小于等于
=== 等于
=!= 不等于
右值
字符串请用单引号包围，如：'admin'
变量名
当变量为false时显示元素（取反）
自定义表达式
支持Thymeleaf条件表达式，如：
• user != null && user.isActive
• items.size() > 0
• status == 'success' || status == 'warning'
条件说明：
只有当条件为true时，元素才会显示在页面上
变量路径预览
变量路径将显示在这里
映射描述 (可选)
通知