Thymeleaf 之 页面模板应用
2016-11-02 本文已影响786人
钟述林
本文章来自【知识林】
本文章主要讲述使用Thymeleaf做页面模板，页面模板的主要作用是将相对公共的页面部份（如站头、站尾及公共的js、css等）提取出现放到模板页面中，在其他需要使用的地方引用该模板即可。
如果对Thymeleaf的基本使用、maven依赖等不清楚的可以先阅读我的另一篇文章《Thymeleaf 之 初步使用》。
- application.properties
server.port = 1104
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.cache=false
- Controller
@Controller
public class IndexController {
@GetMapping(value = "/index")
public String index(Model model, HttpServletRequest request) {
return "/web/index";
}
}
- 页面模板webModel.html
<!DOCTYPE html>
<html lang="zh-CN"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf学习示例</title>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script type="text/javascript" src="/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="/bootstrap3/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="/bootstrap3/css/bootstrap.min.css"/>
</head>
<body>
<div class="container text-center" style="text-align:center;border:1px #3b8cff solid;">
<h3>头部</h3>
</div>
<div class="container-fluid center-container" style="margin-bottom:70px;">
<div th:include="this :: content"></div>
</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container text-center login-bottom">
© 2016
</div>
</div>
</body>
</html>
注意：
1. 需要使用Thymeleaf的命名空间`xmlns:th="http://www.thymeleaf.org"`
2. 本示例使用了`bootstrap`的知识，如有不清楚的可上[官网](http://v3.bootcss.com)学习或直接忽略。
3. 最关键部份：`<div th:include="this :: content"></div>`使用`th:include`来将数据引入进来。
意为将`content`部份的内容引入到这个地方，`content`是在具体页面中体现，此名称可自己定义。
- 页面index.html
<!DOCTYPE html>
<html lang="zh-CN"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="fragments/webModel">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>测试首页</title>
</head>
<body>
<div th:fragment="content" th:remove="tag">
<h2>这里显示专属本页面的内容</h2>
</div>
</body>
</html>
注意：
1. 需要引入Thymeleaf的命名空间：`xmlns:th="http://www.thymeleaf.org"`
2. 需要引入布局layout的命名空间：`xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"`
3. 指定引用的模板名称：`layout:decorator="fragments/webModel"`（名称即为html页面名称）
3. 使用`th:fragment="content"`来启用页面模板，启用的模板根据模板名称和fragment名称而定。
`content`是根据`webModel.html`页面模板中指定的名称而定。
4. 这里使用了`th:remove="tag"`这表示数据加载完成后将当前标题删除。
示例代码：https://github.com/zsl131/thymeleaf-study/tree/master/study04
本文章来自【知识林】
