Thymeleaf中layout.html与布局方法

03th of August 2017 Java Java 7377

本人用过Thinkphp的layout布局和Yii2的layout布局，感觉都很好用很方便，今天来说一下Thymeleaf的layout布局与引用html片段的方法

一，实现Thymeleaf中layout步骤如下：

1，实现一个base的html页面，对于你的项目基础的html代码：

//templates/layout/base.html
<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="csrf-param" content="_csrf"/>
    <title>Home</title>
    <meta content="" name="keywords"/>
    <meta content="" name="description"/>
    <link type="image/x-icon" th:src="@{favicon.ico}" rel="shortcut icon"/>
    <link th:src="@{bootstrap/css/bootstrap.css}" rel="stylesheet"/>
</head>
<body>
<span th:text="'这是top部分'">top</span>
<br />
<div layout:fragment="content"></div>
<br />
<span th:text="'这是footer部分'">footer</span>
<script th:src="@{js/jquery-1.9.1.min.js}"></script>
<script th:src="@{bootstrap/js/bootstrap.js}"></script>
</body>
</html>
//这里要注意要引入
//xmlns:th="http://www.thymeleaf.org"：th属性
//xmlns:layout="http://www.w3.org/1999/xhtml"：layout属性
//<div layout:fragment="content"></div>：为要被替换的部分

2，实现一个index的html页面使用布局

//templates/index/index.html
<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml" layout:decorator="layout/indexmain">
<div class="bs-example" layout:fragment="content">
<div layout:fragment="content" class="ccy">
<span th:text="${userphone}">页面的正文部分</span>
</div>
</html>
//这里要注意引入的属性
//layout:fragment="content"：为base中定义要被替换的content
//xmlns:th="http://www.thymeleaf.org"：th属性
//xmlns:layout="http://www.w3.org/1999/xhtml"：layout属性
//layout:decorator="layout/indexmain"：指定layout文件的路径

注：xmlns:与layout:path..必须在<html 这里指定>

3，测试layout代码，创建一个Controller:

@Controller
public class IndexController {
    @GetMapping(value = "/")
    public String index(ModelMap map){
        map.addAttribute("userphone", "13111111111");
        return "index/index";
    }
}
//启动应用后在浏览器中访问对应地址，你可以看到layout布局已经成功了

二，引用html片段的方法

Thymeleaf有多种方式引入

th:insert 3.0+版本新加的

th:replace 2.0+ 3.0+都可用

th:include 这个在3.0版本已经不建议使用

事例代码：

<!-- 有这么一个html段 -->
<footer th:fragment="copy"> 
  © 2011 The Good Thymes Virtual Grocery
</footer>
<!-- 引用html段 -->
<body>
  <div th:insert="footer :: copy"></div>
  <div th:replace="footer :: copy"></div>
  <div th:include="footer :: copy"></div>
</body>
<!-- 最终结果 -->
<body>
  <!-- th:insert，div tag内部插入html段 -->
  <div>
    <footer>
      © 2011 The Good Thymes Virtual Grocery
    </footer>
  </div>
  <!-- th:replace，使用html段直接替换 div tag -->
  <footer>
    © 2011 The Good Thymes Virtual Grocery
  </footer>
  <!-- th:include，div tag内部插入html段（仅保留段子元素的内容） -->
  <!-- 仔细对比 th:insert 与 th:include的结果 -->
  <div>
    © 2011 The Good Thymes Virtual Grocery
  </div>
</body>

我们一般使用 th:fragment 与 th:replace就可以了

参考链接：http://blog.csdn.net/xyr05288/article/details/51067009 、 http://www.jianshu.com/p/db16d4d8d9c7

Label

Hot