目录:
使用Thymeleaf
项目开发中,经常会遇到网页中有大量的重复的内容,此时我们就需要考虑把重复的内容抽取出来,这样就会显得网页不是那么的臃肿。Thymeleaf模板引擎
也为我们提供了这种功能。
项目开发中,我们通常会在页面添加一个底边框,用于显示一些版权所有
等信息。每个页面都需要显示的那种,此时我们就可以使用 Thymeleaf 模板为我们提供的公共组件抽取功能,来完成这一操作。
举例:如下代码为我们项目中多次重复使用的一段代码,我们需要对该内容就行抽取。
<footer>
© 2011 The Good Thymes Virtual Grocery
</footer>
1.如下是项目中 index.html
页面代码,需要对公共代码抽取
<head>
<meta charset="utf-8">
<title>index页面</title>
</head>
<body>
<div>
<span>省略部分代码</span>
<span>省略部分代码</span>
</div>
<footer>
© 2011 The Good Thymes Virtual Grocery
</footer>
<body>
第一种方式:
①使用th:fragment="片段名"
的方式将其抽取成一个公共片段
<head>
<meta charset="utf-8">
<title>index页面</title>
</head>
<body>
<div>
<span>省略部分代码</span>
<span>省略部分代码</span>
</div>
<footer th:fragment="copy">
© 2011 The Good Thymes Virtual Grocery
</footer>
<body>
②.如果user.html
页面也用到了这个片段,我们只需通过~{templatename::fragmentname}
(模板名::片段名) 的方式引入即可
<head>
<meta charset="utf-8">
<title>user页面</title>
</head>
<body>
<div>
<span>省略部分代码</span>
<span>省略部分代码</span>
</div>
<!--引入抽取的公共片段-->
<div th:insert=“~{index::copy}”></div>
<body>
第二种方式:
①只需要在公共组件添加一个 id 或 class 等只要css 能唯一定位到的属性即可 (此处以 id 为例)
<head>
<meta charset="utf-8">
<title>index页面</title>
</head>
<body>
<div>
<span>省略部分代码</span>
<span>省略部分代码</span>
</div>
<footer id="copy">
© 2011 The Good Thymes Virtual Grocery
</footer>
<body>
②.使用~{templatename::selector}
(模板名::选择器) 的方式引入即可
<head>
<meta charset="utf-8">
<title>user页面</title>
</head>
<body>
<div>
<span>省略部分代码</span>
<span>省略部分代码</span>
</div>
<!--引入抽取的公共片段-->
<div th:insert=“~{index :: #copy}”></div>
<body>
备注:我们也可以将公共组件单独写成一个 html ,使用文件名::片段名
或 文件名::选择器
方式引入
额外内容:使用其他th 属性
引入
除去th:insert
外,Thymeleaf 在公共片段引入方面,为我们提供了 2个属性可供我们选择,分别是:、th:replace
、th:include
,通过名称你应该也能够理解。三种引入公共片段的th属性区别如下:
-
th:insert:将公共片段整个插入到声明引入的元素中
-
th:replace:将声明引入的元素替换为公共片段
-
th:include:将被引入的片段的内容包含进这个标签中
<!--公共片段-->
<footer th:fragment="copy">
© 2011 The Good Thymes Virtual Grocery
</footer>
<!--引入方式(可以使用省略~{}的方式,如下:)-->
<div th:insert="index :: copy"></div>
<div th:replace="index :: copy"></div>
<div th:include="index :: copy"></div>
<!--效果-->
<!--th:insert(直接将片段插入到div标签中)-->
<div>
<footer>
© 2011 The Good Thymes Virtual Grocery
</footer>
</div>
<!--th:replace(直接使用片段将div标签替换掉)-->
<footer>
© 2011 The Good Thymes Virtual Grocery
</footer>
<!--th:include(直接将片段中的内容包含在div标签下)-->
<div>
© 2011 The Good Thymes Virtual Grocery
</div>
附:Thymeleaf 开发参考手册一份:参考手册链接。这部分内容的介绍,可参考手册:8 Template Layout 章节
Thymeleaf 公共组件抽取内容,介绍到此为止
如果本文对你有所帮助,那就给我点个赞呗
End