Thymeleaf layout 布局

简介

Thymeleaf是现代化服务器端的Java模板引擎，不同与JSP和FreeMarker，Thymeleaf的语法更加接近HTML，并且也有不错的扩展性。
详细资料可以浏览官网(http://www.thymeleaf.org/)。本文主要介绍Thymeleaf模板的使用说明：

thymeleaf的layout常用的有两种方式用法：

日常开发中，我们经常会将导航栏，页尾，菜单等部分提取成模板供其它页面使用。

fragment,include和replace的运用：

Thymeleaf的多种引入方式

· th:insert 3.0+版本新加的
· th:replace 2.0+ 3.0+都可用
· th:include 这个在3.0版本已经不建议使用

将页面里的每个部分都分成块 -> fragment 使用 th:include 和 th:replace 来引入页面

在components下新建一个header.html和footer.html
再在templates下新建一个components文件夹

components中header的fragment:

<!-- components/header.html -->
  <header th:fragment="header">
    <ul>
      <li>news</li>
      <li>blog</li>
      <li>post</li>
    </ul>
  </header>

components中footer的fragment:

<!-- components/footer.html -->
<header th:fragment="footer">
  <div>i am footer.</div>
</header>

主页index(用include):

<!-- index.html -->
  <html>
    <head>
      <meta charset="utf-8"/>
      <title>demo</title>
    </head>
    <body>
      <div th:include="components/header :: header"></div>
      <div class="container">
        <h1>hello world</h1>
      </div>
      <div th:include="components/footer :: footer"></div>
    </body>
  </html>

主页index(用replace)

<html>
  <head>
    <meta charset="utf-8"/>
    <title>demo</title>
  </head>
  <body>
    <div th:replace="components/header :: header">
      <!-- 使用th:replace进来的header.html会替换下面的这个header -->
      <header>
        <ul>
          <li>static - news</li>
          <li>static - blog</li>
          <li>static - post</li>
        </ul>
      </header>
    </div>
    <div class="container">
      <h1>hello world</h1>
    </div>
    <div th:include="components/footer :: footer"></div>
  </body>
</html>

insert, include和replace的区别：

<!-- 要被引用的html块 -->
-----------------------------
<footer th:fragment="footer"> 
  2017 Copyright © TonyNYL 
</footer>

<!-- 引用html段 -->
  -----------------------------------------
<body>
  <div th:insert="footer :: footer"></div>
  -----------------------------------------
  <div th:replace="footer :: footer"></div>
  -----------------------------------------
  <div th:include="footer :: footer"></div>
</body>

<!-- 最终形成结果 -->
  ---------------------------------------------------------
<body>
  <!-- th:insert，div tag内部插入html块 -->
  <div>
    <footer>
      2017 Copyright © TonyNYL 
    </footer>
  </div>
  ---------------------------------------------------------
  <!-- th:replace，使用html块直接替换 div tag -->
  <footer>
    2017 Copyright © TonyNYL 
  </footer>
  ---------------------------------------------------------
  <!-- th:include，div tag内部插入html块（仅保留段子元素的内容） -->
  <!-- 仔细对比 th:insert 与 th:include的不同 -->
  <div>
    2017 Copyright © TonyNYL 
  </div>
</body>

用html中的id属性代替fragment定义的名称：

<!--footer.html块 -->
<div id="footer">
    2017 Copyright © TonyNYL
</div>

<!-- 引用上面的html块 -->
<!-- :: 前面是html名称相对路径，不需要写后缀(.html)；后面是html tag的id，id前需要加 #，这是3.0+的写法 -->
<div th:insert="~{footer :: #footer}">
</div>
------------------------------------------------------
<!-- 2.0+要这么写 -->
<div th:insert="footer :: #footer">
</div>

layout:decorator的运用

在layouts的文件夹中新建一个layout.html作为模板

<!-- layout/layout.html -->
<html>
  <head>
    <meta charset="utf-8"/>
    <title>demo</title>
  </head>
  <body>
    <div th:include="components/header :: header"></div>
    <div layout:fragment="content"></div>
    <div th:include="components/footer :: footer"></div>
  </body>
</html>

再在需要改布局模板的页面加入layout.html

<!-- index.html -->
<html layout:decorator="layout/layout">
  <head>
  </head>
  <body>
    <div layout:fragment="content">
      <h2>hello TonyNYL!</h2>
    </div>
  </body>
</html>

layout模板的布局传入的属性值

首先，定义一个属性样式

1
2
3

.active {
  background-color: white;
}

<header th:fragment="header (tab)">
  <ul>
    <li><span th:class="${tab eq 'home'} ? active">home</span></li>
    <li><span th:class="${tab eq 'blog'} ? active">blog</span></li>
    <li><span th:class="${tab eq 'news'} ? active">news</span></li>
  </ul>
</header>

在需要的地方调用这个方法

1	<div th:include="components/header :: header(tab='blog')"></div>

最近访客