Thymeleaf用作layout

Thymeleaf可以在一个大文件里用th:replace或者th:insert来引用一个小文件里的片段（旧的th:include自Thymeleaf 3.0起已不推荐使用，建议用th:insert代替）。也可以把一个大的文件用作layout，在它的基础上扩展。

layout.html

注意<title>和<body>上的th:replace="${...}"：它们会被替换成子页面传进来的片段。如果layout里不使用body参数，子页面的内容就会被丢弃。

<!DOCTYPE html>
<html
  lang="zh-CN"
  xmlns:th="http://www.thymeleaf.org"
  th:fragment="layout (title, body)">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title th:replace="${title}">Layout</title>
  </head>
  <body th:replace="${body}"></body>
</html>

extend.html

<html>上的th:replace会把整个页面替换成layout片段，同时用~{::title}和~{::body}把本页面的<title>和<body>作为参数传给layout。

<!DOCTYPE html>
<html
  lang="zh-CN"
  xmlns:th="http://www.thymeleaf.org"
  th:replace="~{layout::layout (~{::title}, ~{::body})}">
  <head>
    <title>Extend</title>
  </head>
  <body>
    <p>这里是子页面自己的内容</p>
  </body>
</html>

渲染extend.html的结果：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Extend</title>
  </head>
  <body>
    <p>这里是子页面自己的内容</p>
  </body>
</html>