P5 组件的使用

创建控制器

@GetMapping("/p5")
public void p5(Model model) {
}

创建前端

创建templates/comonent/p5.html这个用来存储我们的组件，代码如下：

通过th:fragment指定组件的名称
或者通过给组件一个id，后面通过id使用组件

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

<div th:fragment="header">
    <div style="height: 100px; background-color: gold">
        <h1>I'am Header</h1>
    </div>
</div>

<div th:fragment="footer">
    <div style="height: 100px; background-color: cornflowerblue">
        <h1>I'am Footer</h1>
    </div>
</div>

<div id="body">
    <div style="height: 100px; background-color: yellowgreen">
        <h1>I'am Body</h1>
    </div>
</div>

</html>

创建templates/p5.html用来最为最终的渲染

通过th:insert="component/p5::header"将这个组件插入到div当中去
通过th:insert="component/p5::#body"，通过id寻找组件，并插入到div当中去
通过th:replace="component/p5::footer"，将组件替换掉div标签

<!DOCTYPE html>
<html lang="en" xmlns:th="<http://www.thymeleaf.org>">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div th:insert="component/p5::header"></div>
<div th:insert="component/p5::#body"></div>
<div th:replace="component/p5::footer"></div>

</body>
</html>