Thymeleaf layout 布局

第一篇环境搭建好之后,下面接着开始对页面进行布局。通常包含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。
高级特性有时间再看一下。


代码参考

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容