最近在修改网站页面的时候，发现页面代码有很多重复的地方，有很多地方需要优化。由于项目采用的是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>
网友评论