八、模板布局（Template Layout）

8.1 包含模板片段（Including template fragments）

定义和引用片段

我们通常想要从别的模板文件中调用一些模板片段，例如 页面的头部、底部和菜单...等

th:fragment

定义一个文件 /WEBINF/templates/footer.html

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:th="http://www.thymeleaf.org">

<body>

<div th:fragment="copy">

&copy; 2011 The Good Thymes Virtual Grocery

</div>

</body>

</html>

定义了个名为copy的片段，可以通过用th:include 和 th:replace 放到其他页面中

<body>

<div th:include="footer::copy"></div>

</body>

三种格式：

  • "templatename::domselector" 或者 templatename::[domselector] ——包含名为templatename的domselector部分，英文原文：Includes the fragment resulting from executing the specified DOM Selector on the template named templatename .
  • "templatename" ——包含外部模板文件的整个片段
  • "::domselector"或者"this::domselector" ——包含来自自身模板文件的片段

templatename和domselector部分都可以是其他任何表达式（甚至是条件判断表达式）

<div th:include= "footer::(${user.isAdmin}? #{footer.admin}: #{footer.normaluser})"></div>

Referencing fragments(引用片段) without th:fragment 

...

<div id="copy-section">

&copy; 2011 The Good Thymes Virtual Grocery

</div>

...

通过id属性引用上面的片段

<body>

...

    <div th:include="footer:: #copy-section"></div>

</body>

th:include和th:replace(也可写成th:substituteby)的区别

前者包含片段的内容到当前标签内，后者是用整个片段（内容和上一层）替换当前标签（不仅仅是标签内容）。

<footer th:fragment="copy">

&copy; 2011 The Good Thymes Virtual Grocery

</footer>
<body>

...

<div th:include="footer :: copy"></div>

<div th:replace="footer :: copy"></div>

</body>

编译后：

<body>

...

    <div>

        &copy; 2011 The Good Thymes Virtual Grocery

    </div>

    <footer>

        &copy; 2011 The Good Thymes Virtual Grocery

    </footer>

</body>

8.2 可带参数的片段标签（Parameterizable fragment signatures）

<div th:fragment="frag (onevar,twovar)">

    <p th:text="${onevar}+' - ' +${twovar}">...</p>

</div>
<div th:include="::frag(${value1},${value2})">...</div>

<div th:include="::frag(onevar=${value1},twovalue=${vaule2})"></div>

<div th:include="::frag(twovalue=${vaule2},onevar=${value1})"></div>

即使标签没有定义参数,like this:

<div th:fragment="frag">

...

</div>

我们还是可以用这句：

<div th:include="::frag(onevar=${value1},twovar=${value2})"></div>

//等价于 th:include和th:with

<div th:include="::frag" th:with="onevar=${value1},twovar=${value2}"></div>

Note that this specification of local variables for a fragment —no matter whether it has a signature or not— does not cause the context to emptied previously to its execution. Fragments will still be able to access every context variable being used at the calling template like they currently are.

th:assert for in-template assertions

<div th:assert="${onevar},(${twovar} !=43)">...</div>

要验证参数时会派上用场

<header th:fragment="contentheader(title)" th:assert="${!#string.isEmpty(title)}">...</header>

8.3 移除模板标签（Removing template fragments）

th:remove

<table>

    <tr>

        <th>NAME</th>

        <th>PRICE</th>

        <th>IN STOCK</th>

        <th>COMMENTS</th>

    </tr>

    <tr th:each="prod : ${prods}" th:class="${prodStat.odd}? 'odd'">

        <td th:text="${prod.name}">Onions</td>

        <td th:text="${prod.price}">2.41</td>

        <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>

        <td>

            <span th:text="${#lists.size(prod.comments)}">2</span> comment/s

            <a href="comments.html"

th:href="@{/product/comments(prodId=${prod.id})}"

th:unless="${#lists.isEmpty(prod.comments)}">view</a>

        </td>

</tr>

<tr class="odd" th:remove="all">

    <td>Blue Lettuce</td>

    <td>9.55</td>

    <td>no</td>

    <td>

        <span>0</span> comment/s

    </td>

</tr>

<tr th:remove="all">

    <td>Mild Cinnamon</td>

    <td>1.99</td>

    <td>yes</td>

    <td>

        <span>3</span> comment/s

        <a href="comments.html">view</a>

    </td>

</tr>

</table>

th:remove="all" ——移除整个元素包括全部子元素

th:remove="body" ——不移除本身标签元素，移除全部子元素

th:remove="tag" ——只移除本身标签元素，子元素还存在的

th:remove="all-but-first" ——移除所有子元素除了第一个子元素

th:remove="none" 不做任何移除

我们来看一个all-but-first的应用场景：

<table>

<thead>

<tr>

<th>NAME</th>

<th>PRICE</th>

<th>IN STOCK</th>

<th>COMMENTS</th>

</tr>

</thead>

<tbody th:remove="all-but-first">

<tr th:each="prod : ${prods}" th:class="${prodStat.odd}? 'odd'">

<td th:text="${prod.name}">Onions</td>

<td th:text="${prod.price}">2.41</td>

<td th:text="${prod.inStock}? #{true} : #{false}">yes</td>

<td>

<span th:text="${#lists.size(prod.comments)}">2</span> comment/s

<a href="comments.html"

th:href="@{/product/comments(prodId=${prod.id})}"

th:unless="${#lists.isEmpty(prod.comments)}">view</a>

</td>

</tr>

<tr class="odd">

<td>Blue Lettuce</td>

<td>9.55</td>

<td>no</td>

<td>

<span>0</span> comment/s

</td>

</tr>

<tr>

<td>Mild Cinnamon</td>

<td>1.99</td>

<td>yes</td>

<td>

<span>3</span> comment/s

<a href="comments.html">view</a>

</td>

</tr>

</tbody>

</table>

th:remove后面也可以是表达式，只要是返回 ( all , tag , body , all-but-first , none )中的任意一个；th:remove把null看成none，所以也可以返回为null值，所以下面两句话一样。

<a href="/something" th:remove="${condition}? tag">Link text not to be removed</a>
<a href="/something" th:remove="${condition}? tag : none">Link text not to be removed</a>

thymeleaf 模板布局的更多相关文章

  1. Thymeleaf模板布局

    ⒈定义片段 1.使用th:fragment <div th:fragment="copy"> © 2019 <a href="http://www.co ...

  2. Thymeleaf 模板布局三种区别

  3. Thymeleaf 模板

    Thymeleaf 模板布局 th:fragment.th:replace.th:insert.th:remove th:fragment  模板布局 模板片段说明 模板中,经常希望从其他模板中包含⼀ ...

  4. Springboot 使用thymeleaf模板layout布局

    使用layout布局前应该在pom文件中导入thymeleaf(dialect)依赖:如下 <properties> <project.build.sourceEncoding> ...

  5. （八）Thymeleaf的 th:* 属性之—— 模板布局& th:with& 属性优先级

    3.7 模板布局 模板名称:layout.html 3.7.1 th:fragment e.g.模板名为footer.html页面body部分如下: <body> <div th:f ...

  6. Thymeleaf模板的使用

    使用模板的要点:     页面主体结构固定,具体参数可变,尽可能让参数动态化,才能提高模板的复用性 ================================================== ...

  7. thymeleaf模板的使用（转）

    作者:纯洁的微笑 出处:http://www.ityouknow.com/ 在上篇文章springboot(二):web综合开发中简单介绍了一下thymeleaf,这篇文章将更加全面详细的介绍thym ...

  8. Java 前端模板引擎学习：thymeleaf 模板引擎

    模板引擎接口 ITemplateEngine 一.后台数据与外部数据 1.处理后台数据 $表达式是个变量表达式,用于处理在  request parameters and the request, s ...

  9. 4.3 thymeleaf模板引擎的使用

    参考说明:以下笔记参考来自尚硅谷springboot教学中的笔记! thymeleaf官网docs: https://www.thymeleaf.org/documentation.html 模板引擎 ...

随机推荐

  1. 类的this指针 总结

    类的this指针有以下特点: (1)this只能在成员函数中使用 全局函数,静态函数都不能使用this. 实际上,成员函数默认第一个参数为T* const this. 如: class A { pub ...

  2. Spirng_Batch

    一.需求分析 使用Spring Batch对XML文件进行读写操作: 从一个xml文件中读取商品信息, 经过简单的处理, 写入另外一个xml文件中. 二.代码实现 1. 代码结构图: 2. appli ...

  3. Eclipse的java代码出错：The import org.apache cannot be resolved

    Eclipse中,折腾java代码. 把之前在android中的代码拿过来使用. 结果出现The import org.apache cannot be resolved的错误: [解决过程] 1.这 ...

  4. Mybatis的简单示例

    首先新建一个JavaWeb项目并导入mybatis依赖的jar包,同时Mybatis是对数据库的操作所以我们需要在数据库中新建一个表user用来演示. 新建完表之后我们还需要建立相对应的实体类User ...

  5. [PHP] Eclipse开发PHP环境配置

    首先准备好软件: 1. Apache,到这里找个最新版本 2. PHP,到这里下载 3. Eclipse IDE for Java EE Developers,到这里下载 4. DLTK Core F ...

  6. CSS设置行内元素和块级元素的水平居中、垂直居中

    CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...

  7. Objective-C ,ios,iphone开发基础:多个视图（view）之间的切换2，使用导航栏控制，以及视图之间传值。

    首先需要说明的是每个应用程序都是一个window,背景色为黑色.在window上可以跑多个view进行来回切换,下面就通过手动写代码来体现导航栏切换view的原理. 第一步,新建一个single vi ...

  8. [改善Java代码]不要只替换一个类

    建议20: 不要只替换一个类 我们经常在系统中定义一个常量接口(或常量类),以囊括系统中所涉及的常量,从而简化代码,方便开发,在很多的开源项目中已采用了类似的方法,比如在Struts2中,org.ap ...

  9. Centos系统使用代理上网时 yum的代理设置

    yum的存在使centos上软件的安装.配置.升级.卸载变得十分的方便,但是当安装centos的机器是通过代理服务器访问外网的话,yum的 使用就变得无从下手了,以下介绍以下怎样为yum配置代理地址及 ...

  10. MVC中提示错误：从客户端中检测到有潜在危险的 Request.Form 值的详细解决方法

    今天往MVC中加入了一个富文本编辑框,在提交信息的时候报了如下的错误:从客户端(Content="<EM ><STRONG ><U >这是测试这...&q ...