Thymeleaf layout 布局
2016-10-15 本文已影响12409人
_流浪的猫_
第一篇环境搭建好之后，下面接着开始对页面进行布局。通常包含header、footer、menu等等，下面用Thymeleaf来实现，顺便把bootstrap也加进来。另外Thymeleaf版本之间有差异，需要注意。
- 在templates下新建common文件夹
- 在common下建一个top_header.html文件
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<header>
<!-- 来自bootstrap例子 -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<!-- 其他已删 -->
</nav>
</header>
</html>
- index.html中引入top_header的内容（这样就可以了）
<body>
<!-- 这种写法，如果top_header中有多个header tag，则都引入进来 -->
<header th:replace="common/top_header :: header"></header>
</body>
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>
Thymeleaf 布局常用写法：
- 使用th:fragment给html段指定一个名称，然后通过名称引用，最常用
<!-- 1、通过th:fragment指定一个html段 -->
<footer th:fragment="copy">
© 2011 The Good Thymes Virtual Grocery
</footer>
<!-- 2、通过th:insert或th:replace引用html段 -->
<!-- :: 前面是html页面的相对路径，不需要写后缀(.html)；后面是段的名称，即th:fragment="copy" 中的copy -->
<div th:insert="footer :: copy"></div>
- 直接使用html tag引入，不需要写th:fragment（如最开始的例子）
<!-- 这种写法，如果top_header中有多个header tag，则都引入进来，适用只有一个相同tag的情况 -->
<header th:replace="common/top_header :: header"></header>
- 使用html tag的id属性，不需要写th:fragment
<!-- 一个html段，div指定一个id -->
<div id="copy-section">
© 2011 The Good Thymes Virtual Grocery
</div>
<!-- 引用上面的html段 -->
<!-- :: 前面是html名称相对路径，不需要写后缀(.html)；后面是html tag的id，id前需要加 #，这是3.0+的写法 -->
<div th:insert="~{footer :: #copy-section}"></div>
<!-- 2.0+要这么写 -->
<div th:insert="footer :: #copy-section"></div>
开发时还有一种情况，比如html的head部分，很多公用的东西，但有个别不一样的，如title属性，本页面的css、js之类的，在传统jsp开发时，用<jsp:include>标签可直接引入公用部分，而对于thymeleaf的insert和replace都不好用，后来尝试直接引入页面的方法居然可以了：
<head>
<title>自己页面的名字<title>
<!-- 引入整个页面的内容，而不是上面提到的方法（只引入指定的段） -->
<!-- 官方未提到该用法，这个属于偷巧的做法 -->
<head th:replace="common/head"/> <!-- 未使用 :: 符号 -->
<!-- 下面加自己的css、js，如果有 -->
</head>
看官方文档，这种情况应该使用layout的高级特性：Parameterizable fragment signatures。
高级特性有时间再看一下。
