使用 Thymeleaf 呈现动态标签名称

Question

有没有办法用模板中不固定的标签名称来渲染标签？ 我想根据页面模型的某些属性生成标题标签h1 、 h2 、 ...或h6 ，例如以下模板：

<h1 th:text="${model.title}" th:if="${model.level == 1}"></h1>
<h2 th:text="${model.title}" th:if="${model.level == 2}"></h2>
<h3 th:text="${model.title}" th:if="${model.level == 3}"></h3>
<h4 th:text="${model.title}" th:if="${model.level == 4}"></h4>
<h5 th:text="${model.title}" th:if="${model.level == 5}"></h5>
<h6 th:text="${model.title}" th:if="${model.level == 6}"></h6>

这可以以更聪明的方式完成吗？

Answer 1

您可以使用th:utext输出未转义的 html。 因此，例如这样的事情会起作用：

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

然而，Thymeleaf 并不是真正为这个用例而设计的——将未转义的 HTML 放入您的模板中很容易出错，并且具有安全含义（特别是如果您正在接受用户输入），并且该模板现在很难阅读。

我建议将您原来的 Thymeleaf 放入一个片段并使用它。

HTML：

<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}"></h4>
  <h5 th:text="${title}" th:if="${level == 5}"></h5>
  <h6 th:text="${title}" th:if="${level == 6}"></h6>
</th:block>

Answer 2

像这样的东西可能会起作用，但我怀疑它是否更具可读性，因此我不建议这样做。 因为为未来的开发人员进行调试可能比输入所有 ifs（或开关）更麻烦。

<h1 id="placeholder">PLACEHOLDER<h1>

<script th:inline="javascript">
let element = /*[['h' + ${model.level}]]*/ "";
let $header = $(document.createElement(element));
$("#placeholder").replaceWith($header);
</script>

请记住，这只是模拟代码，可能有一些拼写错误，但想法应该是正确的