thymeleaf中的fragment使用

https://blog.csdn.net/whatlookingfor/article/details/78321451

fragment介绍

fragment类似于JSP的tag,在html中文件中,可以将多个地方出现的元素块用fragment包起来使用。

fragment使用

定义fragment

所有的fragment可以写在一个文件里面,也可以单独存在,例如

<footer th:fragment="copy">  
   the content of footer 
</footer>
  • 1
  • 2
  • 3
  • 4

fragment的引用

  1. th:insert:保留自己的主标签,保留th:fragment的主标签。
  2. th:replace:不要自己的主标签,保留th:fragment的主标签。
  3. th:include:保留自己的主标签,不要th:fragment的主标签。(官方3.0后不推荐)
导入片段:
<div th:insert="footer :: copy"></div>  

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

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

结果为:
<div>  
    <footer>  
       the content of footer   
    </footer>    
</div>    

<footer>  
    the content of footer 
</footer>    

<div>  
    the content of footer 
</div>  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

在Springboot中,默认读取thymeleaf文件的路径是:src/main/resource/templates,静态文件为src/main/resource/static,这个默认值可以在配置文件中修改:spring.thymeleaf.prefix=classpath:/templates/

所有在调用fragment时,是默认从thymeleaf的根路径开始设置的: 
例如 
<head th:replace="/include/header::head" > 
从读取templates/include/header.html中 fragment=head的代码块

fragment的参数设置

<div th:fragment="frag (onevar,twovar)">
    <p th:text="${onevar} + ' - ' + ${twovar}">...</p>
</div>


<div th:replace="::frag (${value1},${value2})">...</div>
<div th:replace="::frag (onevar=${value1},twovar=${value2})">...</div>
可以不按照参数定义的顺序
<div th:replace="::frag (twovar=${value2},onevar=${value1})">...</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

fragment的lexible layouts

定义(文件地址:include/header.html):

<head th:fragment="head(title,links,scripts)">  
<title th:replace="${title}">The awesome application</title>  

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  

<th:block th:replace="${links}" />  
<th:block th:replace="${scripts}" />  

</head>  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

调用:

<head th:include="include/header :: head(~{::title},~{::link},~{::script})">   
<title>html的title</title>  
<link rel="stylesheet" th:href="@{/css/bootstrap.css}">  
<script th:src="@{/js/bootstrap.js}"></script>  
</head>  
  • 1
  • 2
  • 3
  • 4
  • 5

注意是link 和script,不是links 和scripts 
如果调用的页面没有link或者script ,则指定传入的参数为~{}即可。

<head th:include="include/header :: head(~{::title},~{},~{})">   
  • 1
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/whatlookingfor/article/details/78321451

猜你喜欢

转载自blog.csdn.net/liyanlei5858/article/details/80183409