使用 Thymeleaf 动态渲染 HTML 标签名（渲染.标签.动态.Thymeleaf.HTML...）

使用 thymeleaf 动态渲染 html 标签名

本文介绍了如何在 Thymeleaf 模板中动态生成 HTML 标签名，根据模型属性值动态渲染 <h1> 到 <h6> 等标题标签。虽然可以使用 th:utext 实现，但推荐使用 Thymeleaf 片段（fragments）来提高代码可读性、可维护性，并降低安全风险。通过片段，可以更清晰地组织模板结构，避免直接在模板中嵌入未经转义的 HTML 代码。

动态生成标签名的需求场景

在某些场景下，我们需要根据后端传递的模型数据，动态地渲染 HTML 标签。例如，根据文章的层级（level）动态生成 <h1> 到 <h6> 的标题标签。直接在模板中编写大量的 th:if 条件判断虽然可行，但代码冗余且难以维护。

使用 th:utext 实现动态标签名（不推荐）

Thymeleaf 提供了 th:utext 属性，允许输出未经转义的 HTML 代码。我们可以利用字符串拼接的方式，动态生成标签名。

<th:block th:utext="|<h${model.level}>${model.title}</t${model.level}>|">

这种方法虽然可以实现需求，但是存在以下问题：

可读性差：模板代码难以阅读和理解。
安全性风险：如果 model.title 包含用户输入，可能会导致跨站脚本攻击（XSS）。
维护性差：修改和调试代码比较困难。

因此，不推荐使用 th:utext 来动态生成标签名。

使用 Thymeleaf 片段（Fragments）实现动态标签名（推荐）

Thymeleaf 片段是一种更优雅、更安全、更易于维护的解决方案。我们可以将动态标签名的逻辑封装在一个片段中，然后在模板中引用该片段。

1. 定义片段

在模板中定义一个名为 title 的片段，该片段接受 level 和 title 两个参数。

<th:block th:fragment="title(level, title)">
  <h1 th:text="${title}" th:if="${level == 1}"></h1>
  <h2 th:text="${title}" th:if="${level == 2}"></h2>
  <h3 th:text="${title}" th:if="${level == 3}"></h1>
  <h4 th:text="${title}" th:if="${level == 4}"></h1>
  <h5 th:text="${title}" th:if="${level == 5}"></h1>
  <h6 th:text="${title}" th:if="${level == 6}"></h1>
</th:block>

2. 引用片段

PIA

全面的AI聚合平台，一站式访问所有顶级AI模型

226 查看详情 PIA

在需要动态生成标签名的位置，使用 th:replace 属性引用该片段，并传递 level 和 title 参数。

<th:block th:replace="index :: title(level=${model.level}, title=${model.title})" />

其中，index 是包含片段的模板文件名（不包含后缀），title 是片段的名称。

完整示例

假设我们有一个名为 index.html 的模板文件，包含以下内容：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf 动态标签名示例</title>
</head>
<body>

<th:block th:replace="index :: title(level=${model.level}, title=${model.title})" />

<th:block th:fragment="title(level, title)">
    <h1 th:text="${title}" th:if="${level == 1}"></h1>
    <h2 th:text="${title}" th:if="${level == 2}"></h2>
    <h3 th:text="${title}" th:if="${level == 3}"></h3>
    <h4 th:text="${title}" th:if="${level == 4}"></h3>
    <h5 th:text="${title}" th:if="${level == 5}"></h3>
    <h6 th:text="${title}" th:if="${level == 6}"></h3>
</th:block>

</body>
</html>

在 Spring Boot 控制器中，我们可以传递一个包含 level 和 title 属性的模型对象：

@Controller
public class MyController {

    @GetMapping("/index")
    public String index(Model model) {
        model.addAttribute("model", new MyModel(3, "我的标题"));
        return "index";
    }

    static class MyModel {
        private int level;
        private String title;

        public MyModel(int level, String title) {
            this.level = level;
            this.title = title;
        }

        public int getLevel() {
            return level;
        }

        public String getTitle() {
            return title;
        }
    }
}

访问 /index 路径，将会生成以下 HTML 代码：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf 动态标签名示例</title>
</head>
<body>

<h3>我的标题</h3>

</body>
</html>

可以看到，Thymeleaf 根据 model.level 的值，动态生成了 <h3> 标签。

总结

使用 Thymeleaf 片段可以更优雅、更安全地实现动态标签名。这种方法不仅提高了代码的可读性和可维护性，还降低了安全风险。在实际开发中，建议优先使用 Thymeleaf 片段来处理动态标签名的需求。

以上就是使用 Thymeleaf 动态渲染 HTML 标签名的详细内容，更多请关注知识资源分享宝库其它相关文章！

相关标签： html app 后端代码可读性 spring spring boot html xss if 封装字符串对象 th 大家都在看：基于滚动位置动态控制HTML元素样式：实现范围限制的平滑过渡效果基于滚动位置的HTML元素样式动态控制与边界限制利用 window.scrollY 精准控制 HTML 元素样式及边界使用JavaScript控制HTML元素样式随页面滚动动态变化利用Rvest和XPath进行高级HTML元素属性选择教程