Thymeleaf实现一张页面中引入另一张HTML文件

最近在修改网站页面的时候,发现页面代码有很多重复的地方,有很多地方需要优化。由于项目采用的是springboot框架+Thymeleaf前端模板引擎,这次主要优化的地方是页面头文件,导航栏和页脚。

做一些公共文件,实现和freemark的include标签一样的功能。


1.新建所需的公共HTML文件(子页面),如header or footer:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:http="http://www.w3.org/1999/xhtml" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
	<!-- th:fragment 定义需要引入的代码块,该div包含的内容即为引用的公共内容 -->
     <div th:fragment="myfooter">
	 	<div class="footer">
		<--footer内容-->
		</div>
    </div>
</html>
2.在另一张页面(父页面)中需要引用子页面的位置处添加以下代码:
<!--公共footer  -->
<!--common/footer:是子页面的文件路径 ;myfooter:是子页面中被引用代码块的名称
(如th:fragment="myfooter") -->
<div th:replace="common/footer :: myfooter"  ></div>
这样就可以父页面嵌套子页面中指定的内容了。
此时子页面的所有内容都会被嵌套在父页面指定的div处。

猜你喜欢

转载自blog.csdn.net/SHUKAI618/article/details/85269994