本文共 3383 字，大约阅读时间需要 11 分钟。

目录

thymeleaf 模板布局概述

1、一个系统中各个页面的头部、底部、左侧或右侧通常都是一致的，不需要每个页面都重复写，而应该提取出来，大家各自引用。好处就是能大大的减少代码量，以及修改时不再需要每隔页面再去修改。

2、JSP 可以使用 <jsp:include page=” ”...动态包含，Thymeleaf 可以使用 th:fragment + th:replace 。

3、假设应用中需要一个公用的底部模板 html 文件为 /templates/commonsFooter.html，使用 th:fragment 将其抽取为一个名字叫 "copy" 的代码片段，以后在其它需要引用的地方可以使用 th:insert 、th:replace、th:include 等进行引用。

   
         网站标识码bm0100001　京ICP备05070218号　京公网安备11010202000001号
   

4、三种引入公共片段的 th 属性：

1. <div th:insert="commonsFooter:: selector|fragmentname"></div>：将公共片段整个插入到声明引入的元素中
2. <div th:replace="commonsFooter:: selector|fragmentname"></div>：将声明引入的元素替换为公共片段
3. <div th:include="commonsFooter:: selector|fragmentname"></div>：将被引入的片段的内容包含进这个标签中
4. 注意：commonsFooter 是模板 html 文件名称，selector 是选择器，如标签的 id 值等；fragmentname 就是 th:fragment 声明的片段名称

   
   
   
   
   
   
   
   
    
    
   
   
   
        © 2011 The Good Thymes Virtual Grocery
   

thymeleaf 公共部分抽取

环境：Java jdk 1.8 +Spring boot 2.1.3 + Thymeleaf。

1、上面是 Thymeleaf 的语法介绍，详细信息可以参考《》

现在正式开始使用。

一：抽取公共元素

1、对于各页面中公共的头部、底部、左侧、右侧代码使用一个单独的 .html 文件来放置，源码：

2、中抽取了公共的头部、底部内容，同理还可以抽取公共的样式与 js 等内容。

3、公共模板中使用 th:fragment="commonsHead" 标识头部片段， th:fragment="commonsFooter" 标识公共的底部片段，除此之外也可以使用 id、或者 class 来标识。

4、公共模板（.html）必须在 templates 目录下，否则引用时会找不到，一个文件里面可以定义任意多个 th:fragment 片段。

二：引用公共元素

1、在需要引用的位置使用 th:replace 表达式进行引用，

2、如 <div th:replace="commonsTemplate::commonsFooter"></div> 表示引用 template 目录下 commonsTemplate.html 文件中的 th:fragment="commonsFooter" 定义的片段.

3、在任何需要引用的页面，都可以使用 th:replace 进行引用，让模板片段替换自己。

thymeleaf 链接动态高亮显示

1、对于菜单栏或者导航栏，用户点击某个栏目的时候，跳转到此页面的同时还应该让此栏目高亮显示进行提醒。

2、Thymeleaf 实现链接动态高亮需要使用参数化片段签名功能，即在引入片段的时候传递参数过去，这在以前使用 JSP 动态包含时也是这么做的。

1. th:fragment 声明片段的时候可以同时声明参数，里面则可以使用这些参数的值.
2. th:insert、th:replace、th:include 引用片段的时候就可以将参数值传递过去，传值的时候可以直接按顺序传递过去，也可以不按顺序但是按着参数名传递.

8.2 Parameterizable fragment signatures1）     In order to create a more function-like mechanism for template fragments,     fragments defined with th:fragment can specify a set of parameters:
   
    
    
...
   
2）    This requires the use of one of these two syntaxes to call the fragment from th:insert or th:replace :
   
    ...
   
3）    Note that order is not important in the last option:
   
    ...
   
   
    ...
   

3、根据“选择器”进行引用时，是无法声明参数的，所以 th:fragment 也可以不用声明参数，在引用的时候可以直接通过参数名将值传过去使用。

Fragment local variables without fragment argumentsEven if fragments are defined without arguments like this:
   
        ...
   
We could use the second syntax specified above to call them (and only the second one):
   

4、上面是理论介绍，下面正式开始。

一：公共模板片段中定义参数

1、如 <header class="header-area" th:fragment="commonsHead(activeUrl)">：参数名称可以指定多个。

2、指定了参数名称时，th:replace 引用时则必须传递值过来，否则报错。

3、源码：

二：公共模板片段中使用参数值进行判断

1、如 <li title="http put 请求" th:id="${activeUrl=='httpPut'}?'item-active'">：三元运算符进行条件判断，当条件满足时，为他设置 id 值。

2、这个 id 值会在 css 文件中设置样式，也可以直接添加 class 属性，因为需要覆盖第三方引用的样式，所以才使用了 id 来设置。因 id 引用优先级大于 class 引用。

3、源码：

#item-active {    font-size: 150%;    color: #00aaf3;}

三：引用公共的模板片段

1、如 <div th:replace="commonsTemplate::commonsHead(httpPut)"></div>：将参数值按顺序传递过去。

2、如果 th:fragment 未定义参数名称，则可以在传递时直接指定，如

<div th:replace="commonsTemplate::commonsHead(activeUrl = 'httpPut')"></div>

3、比如使用 id 选择器时：<div th:replace="commonsTemplate::#commonsHead(activeUrl ='httpPut')"></div>

4、传递的值可以随意定义，在公共模板片段中取值后按着规则判断即可。

转载地址：https://wangmaoxiong.blog.csdn.net/article/details/81380844 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！