thymeleaf 语法 —— thymleaf 的3种页面布局 layout、 th:include、th:replace 参数传递

最新推荐文章于 2025-03-17 17:06:11 发布

猎人在吃肉

最新推荐文章于 2025-03-17 17:06:11 发布

阅读量1.2w

点赞数 3

分类专栏： # Spring Boot 文章标签： layout th:include 布局 thymeleaf fragment

在注明出处的前提下，欢迎任何形式的转载。

本文链接：https://blog.csdn.net/xiaojin21cen/article/details/102919572

版权

Spring Boot 专栏收录该内容

42 篇文章

订阅专栏

文章目录

方式1、layout:decorator、layout:fragment

依赖：

<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>

controller

@Controller
public class ThymeleafController {
  
    @RequestMapping("/Content2")
    public String Content1(ModelMap map) {
    	return "/fragments2/Content";
    }    
}

Layout.html （ layout:fragment ）：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" 
		xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
  <title>Layout 页面</title>
</head>
<body>
  <header>
    <h1>Layout 标题</h1>
  </header>
  <section layout:fragment="content">
    <p>Layout 内容待填充</p>
  </section>
  <footer>
    <p>Layout footer</p>
    <p layout:fragment="custom-footer">Layout 底部待填充</p>
  </footer>  
</body>
</html>

Content.html （ layout:decorator、layout:fragment ）：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
    layout:decorator="~{/fragments2/Layout}"><!-- layout文件路径-->
<head>
    <title>凤凰网</title>
</head>
<body>
    <div layout:fragment="content">
       国际领先！“天河二号”算出量子霸权标准
    </div>
</body>
</html>

说明：

Layout.html 是模块、布局；

Content.html 是数据；

进入 Content.html 时，通过 layout:decorator 标签指定的模板，然后用 Content.html 中的数据填充模板，最终得到页面。

请求过程说明：

通过请求进入Content.html 页面时，layout:decorator 标签指定去加载 Layout.html 模板。然后用 Content.html 中的数据去填充 Layout.html 模板，最终得到一个页面。如下图所示：

在这里插入图片描述

解析后的代码：

<!DOCTYPE html>
<html>
<head>
<title>凤凰网</title>
</head>
<body>
  <header>
    <h1>Layout 标题</h1>
  </header>
  <div>
       国际领先！“天河二号”算出量子霸权标准
    </div>
  <footer>
    <p>Layout footer</p>
    <p>Layout 底部待填充</p>
  </footer>  
</body>
</html>

方式2、 th:include

依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

Controller：

@Controller
public class ThymeleafController {
    
    @RequestMapping("/fragment")
    public String fragment(ModelMap map) {
        return "/fragments/content";
    }
}

footerPage.html ：

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


<span th:fragment="copy">
GDP总和达23万亿美元，世界最大自贸区即将出炉！ 
</span>

</body>
</html>

content.html ：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>thymleaf th:include 语法</title>
</head>
<body>
   
   
需要替换的片段内容：<br> 
导入片段：<br>

<div th:include="fragments/footerPage :: copy"></div>
   
</body>
</html>

说明：

<div th:include="fragments/footerPage :: copy"></div>

等价于

<div th:include="~{fragments/footerPage :: copy}"></div>

在这里插入图片描述

解析后的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>thymleaf th:include 语法</title>
</head>
<body>
   
需要替换的片段内容：<br> 
导入片段：<br>

<div>
GDP总和达23万亿美元，世界最大自贸区即将出炉！ 
</div>
   
</body>
</html>

方式3、 th:replace 带参数的页面布局

Controller ：

@RequestMapping("/main")
public String main(ModelMap map) {
	return "/fragments5/main";
}

base.html ：

<head th:fragment="common_header(title,links)">
<title th:replace="${title}">The awesome application</title>

	<!-- 共用的css和js -->
  <link rel="stylesheet" type="text/css" media="all" th:href="@{/css/awesomeapp.css}">
  <link rel="shortcut icon" th:href="@{/images/favicon.ico}">
  <script type="text/javascript" th:src="@{/js/scripts/commonjs.js}"></script>

	<!-- 额外添加的链接 -->
  <th:block th:replace="${links}" />
  
</head>

main.html：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/fragments5/base :: common_header(~{::title},~{::link})">
  <title>Main页面</title>
  <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
  <link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}">
</head>
<body>

<h1>th:replace</h1>

</body>
</html>

运行结果：
在这里插入图片描述
解析后的代码：

<!DOCTYPE html>
<html>
<head>
<title>Main页面</title>

	<!-- 共用的css和js -->
  <link rel="stylesheet" type="text/css" media="all" href="/css/awesomeapp.css">
  <link rel="shortcut icon" href="/images/favicon.ico">
  <script type="text/javascript" src="/js/scripts/commonjs.js"></script>

	<!-- 额外添加的链接 -->
  <link rel="stylesheet" href="/css/bootstrap.min.css"><link rel="stylesheet" href="/themes/smoothness/jquery-ui.css">
  
</head>
<body>

<h1>th:replace</h1>

</body>
</html>

模板解析：

1、进入 main.html 页面时，根据 head中的 th:replace="/fragments5/base ，使用 base.html 中的内容替换 main.html 中 header 中的全部内容；

2、common_header(~{::title},~{::link}) ，将本页面（即main.html）中的title 标签，link标签的数据全部传到 base.html 中的 common_header 片段中；

3、base.html 中 <title th:replace="${title}"> 使用 main.html 页面中的 title 数据（Main页面）来填充、替换，
<th:block th:replace="${links}" /> 使用 main.html 页面中的 link 标签的数据（两个link 样式）来填充、替换。

4、 main.html 的 header 部分解析完毕后，继续往下执行 body 中的内容。