页面布局就是对前端的页面进行划分区域,每个区域有不同的职责,布局是为了更好地重复利用前端代码,避免大量重复性的劳动。在现有的前端系统中,页面布局成了前端开发最重要的工作之一,Thymeleaf 在设计之初对页面布局就有考虑,通过 Thymeleaf 的相关语法可以很容易地实现对前端页面布局。
快速入手
Spring Boot 2.0 将布局单独提取了出来,需要单独引入依赖:thymeleaf-layout-dialect。
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>
首先定义一个代码片段 copyright.html,放到 layout 目录下:
<footer th:fragment="copyright">
© 2018
</footer>
th:fragment 定义一个代码片段,创建 index.html 在页面任何地方引入:
<body>
<div th:insert="layout/copyright :: copyright&#