本文所属【知识林】:http://www.zslin.com/web/article/detail/32

本文章主要讲述使用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">
                &copy; 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

本文所属【知识林】:http://www.zslin.com/web/article/detail/32
文章点评共:2 条
点评内容: 提交点评

08-07 点评:写的这是什么???

08-07 回复:Theymleaf作见面模板啊

04-06 点评:如果应用多个页面的模板该怎么写了?比如:layout:decorator 引用2个页面