依赖:
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-thymeleafartifactId>
dependency>
<dependency>
<groupId>nz.net.ultraq.thymeleafgroupId>
<artifactId>thymeleaf-layout-dialectartifactId>
dependency>
controller
@Controller
public class ThymeleafController {
@RequestMapping("/Content2")
public String Content1(ModelMap map) {
return "/fragments2/Content";
}
}
Layout.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 footerp>
<p layout:fragment="custom-footer">Layout 底部待填充p>
footer>
body>
html>
Content.html :
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
layout:decorator="~{/fragments2/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 模板,最终得到一个页面。如下图所示:
解析后的代码:
<html>
<head>
<title>凤凰网title>
head>
<body>
<header>
<h1>Layout 标题h1>
header>
<div>
国际领先!“天河二号”算出量子霸权标准
div>
<footer>
<p>Layout footerp>
<p>Layout 底部待填充p>
footer>
body>
html>
依赖:
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-thymeleafartifactId>
dependency>
Controller:
@Controller
public class ThymeleafController {
@RequestMapping("/fragment")
public String fragment(ModelMap map) {
return "/fragments/content";
}
}
footerPage.html :
<html xmlns:th="http://www.thymeleaf.org">
<body>
<span th:fragment="copy">
GDP总和达23万亿美元,世界最大自贸区即将出炉!
span>
body>
html>
content.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>
说明:
等价于
解析后的代码:
<html>
<head>
<meta charset="UTF-8">
<title>thymleaf th:include 语法title>
head>
<body>
需要替换的片段内容:<br>
导入片段:<br>
<div>
GDP总和达23万亿美元,世界最大自贸区即将出炉!
div>
body>
html>
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 applicationtitle>
<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:
<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:replaceh1>
body>
html>
<html>
<head>
<title>Main页面title>
<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:replaceh1>
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 中
使用 main.html 页面中的 title 数据(Main页面)来填充、替换,
使用 main.html 页面中的 link 标签的数据(两个link 样式)来填充、替换。
4、 main.html 的 header 部分解析完毕后,继续往下执行 body 中的内容。