CH07-模板布局

包含模板片段

定义和引用片段

在我们的模板中，我们经常需要从其他模板中添加 html 页面片段，如页脚、标题、菜单…

为了做到这一点，Thymeleaf 需要我们来定义这些“片段”，可以使用th：fragment属性来完成。我们定义了/WEB-INF/templates/footer.html页面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <body>

    <div th:fragment="copy">
      &copy; 2017 <a href="https://waylau.com">waylau.com</a>
    </div>

  </body>
</html>

如果，我们想引用这个 copy 代码片段，我们可以用 th:insert 或 th:replace 属性 (th:include 也是可以，但自 Thymeleaf 3.0 以来就不再推荐):

<body>

  ...

  <div th:insert="~{footer :: copy}"></div>

</body>

注意th：insert需要一个片段表达式（〜{...}）。 在上面的例子中，非复杂片段表达式，（〜{，}）包围是完全可选，所以上面的代码将等效于：

<body>

  ...

  <div th:insert="footer :: copy"></div>

</body>

片段规范语法

  • "~{templatename::selector}" 名为templatename的模板上的指定标记选择器。 selector可以只是一个片段名。
  • "~{templatename}" ： 包含完整的模版 templatename
  • ~{::selector}" or "~{this::selector}" 相同模版中的代码片段

不使用 th:fragment

不使用 th:fragment也可以引用HTML片段，比如：

...
<div id="copy-section">
  &copy; 2017 <a href="https://waylau.com">waylau.com</a>
</div>
...

通过 id 也可以引用到页面片段:

<body>

  ...

  <div th:insert="~{footer :: #copy-section}"></div>

</body>

th:insert、 th:replace 、th:include三者区别

  • th：insert是最简单的：它将简单地插入指定的片段作为正文 的主标签。
  • th：replace用指定实际片段来替换其主标签。
  • th：include类似于th：insert，但不是插入片段它只插入此片段的内容。

所以

<footer th:fragment="copy">
  &copy; 2017 <a href="https://waylau.com">waylau.com</a>
</footer>

三种方式引用该片段

<body>

  ...

  <div th:insert="footer :: copy"></div>

  <div th:replace="footer :: copy"></div>

  <div th:include="footer :: copy"></div>

</body>

结果为：

<body>

  ...

  <div>
    <footer>
      &copy; 2017 <a href="https://waylau.com">waylau.com</a>
    </footer>
  </div>

  <footer>
    &copy; 2017 <a href="https://waylau.com">waylau.com</a>
  </footer>

  <div>
    &copy; 2017 <a href="https://waylau.com">waylau.com</a>
  </div>

</body>