场景

使用Thymelaf 时，可以提取公共页面，比如侧边栏、需要公共引入的css、js文件、页脚等都可以提取出来。只编写业务页面的内容部分即可。

三种不同引入方式的区别

th:insert：将代码块片段整个插入到使用了th:insert的HTML标签中，

th:replace：将代码块片段整个替换使用了th:replace的HTML标签中，

th:include：将代码块片段包含的内容插入到使用了th:include的HTML标签中

用一个官方例子来区分三者的不同：

<!--th:fragment定义代码块标识-->
<footer th:fragment="copy">
&copy; 2011 The Good Thymes Virtual Grocery
</footer>

<!--三种不同的引入方式-->
<div th:insert="footer :: copy"></div>
<div th:replace="footer :: copy"></div>
<div th:include="footer :: copy"></div>

<!--th:insert是在div中插入代码块，即多了一层div-->
<div><footer>&copy; 2011 The Good Thymes Virtual Grocery</footer>
</div>

<!--th:replace是将代码块代替当前div，其html结构和之前一致-->
<footer>
&copy; 2011 The Good Thymes Virtual Grocery
</footer>

<!--th:include是将代码块footer的内容插入到div中，即少了一层footer-->
<div>
&copy; 2011 The Good Thymes Virtual Grocery
</div>

实现

将公共的页面放在template目录下的layout目录下

采用从后往前的顺序来引用

最终业务开发页面代码

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"th:replace="layout/layout(title='收货单数据',cssPaths='/public/css/plugins/datapicker/datepicker3.css,/public/css/plugins/switchery/switchery.css,/public/css/plugins/dropzone/basic.css,/public/css/plugins/dropzone/dropzone.css,/public/css/plugins/select2/select2.min.css,/public/css/plugins/dataTables/datatables.min.css,/public/css/plugins/daterangepicker/daterangepicker-bs3.css,/public/css/plugins/jsTree/style.min.css',jsPaths='/public/js/plugins/dataTables/datatables.min.js,/public/js/plugins/dataTables/dataTables.bootstrap4.min.js,/public/js/plugins/fullcalendar/moment.min.js,/public/js/plugins/jsTree/jstree.min.js,/public/js/plugins/sweetalert/sweetalert2.all.min.js,/public/js/plugins/ladda/spin.min.js,/public/js/plugins/ladda/ladda.min.js,/public/js/plugins/ladda/ladda.jquery.min.js,/public/js/plugins/select2/select2.full.min.js,/public/js/plugins/dropzone/dropzone.js,/public/js/plugins/switchery/switchery.js,/public/js/plugins/daterangepicker/daterangepicker.js,/public/js/plugins/datapicker/bootstrap-datepicker.js,/public/js/plugins/validate/jquery.validate.min.js,/public/js/plugins/validate/validate_zh.js,/modular/utils.js,/modular/receiveOrder/wmsReceiveOrder.js')"><!-- layout文件路径-->
<div th:fragment="content"><div class="ibox float-e-margins"><div class="ibox "><div class="ibox-title"><h5>条件搜索</h5><div class="ibox-tools"><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></div></div><div class="ibox-content"><table class="table my-minus-1 mb-minus-1"><tbody><tr><td><div class="row" id="searchCondition"><div class="col-sm-2"><div class="form-group"><label class="col-form-label" for="purchaseCode">收货单号</label><input type="text" id="purchaseCode" name="purchaseCode" value="" placeholder="收货单号" class="form-control"></div></div><div class="col-sm-2"><div class="form-group"><label class="col-form-label" for="supplierName">供应商名称</label><input type="text" id="supplierName" name="supplierName" value="" placeholder="供应商名称" class="form-control"></div></div><div class="col-sm-2"><div class="form-group"><label class="col-form-label" for="status">状态</label><select  class="form-control" id="status" name="status"><option value="">全部</option><option th:each="result : ${codeList}" th:value="${result.codeValue}" th:text="${result.codeName}"></option></select></div></div></div></td></tr></tbody><tfoot><tr class="text-center"><td colspan="4"><button id="resetBtn" class="btn btn-info mt-2" type="button"><i class="fa fa-reply"></i> 重置</button><button id="searchBtn" class="btn btn-info mt-2" type="button"><i class="fa fa-search"></i> 搜索</button></td></tr></tfoot></table></div></div><div class="ibox-content"><div class="table-responsive"><P><shiro:hasPermission name="roleAdd">　　</shiro:hasPermission><button id="detailBtn" class="btn btn-info " type="button"><i class="fa fa-eye"></i> 查看</button><button id="delBtn" class="btn btn-info " type="button"><i class="fa fa-trash-o"></i> 删除</button><button id="submitBtn" class="btn btn-info " type="button"><i class="fa fa-arrow-up"></i> 提交</button><button id="importBtn" class="btn btn-info " type="button"><i class="fa fa-file-excel-o"></i> 导入</button><button id="printBtn" class="btn btn-info " type="button"><i class="fa fa-print"></i> 打印</button><button id="dowloadBtn" class="btn btn-info " type="button"><i class="fa fa-download"></i> 模板下载</button><button id="InOrderBtn" class="btn btn-info " type="button"><i class="fa fa-plus"></i> 生成入库单数据</button><button id="refreshBt" class="btn btn-info " type="button"><i class="fa fa-refresh"></i> 刷新</button></P><p></p><table id="wmsReceiveOrder_table_id" class="table table-striped table-bordered hover" style="width:100%"><thead><tr><th>序号</th><th>收货单号</th><th>收货日期</th><th>收货人</th><th>供应商编号</th><th>供应商名称</th><th>总托数</th><th>总件数</th><th>送货单号</th><th>创建人</th><th>创建日期</th><th>状态</th></tr></thead><tbody></tbody></table></div></div></div><div class="modal inmodal" id="apImportModel" tabindex="-1" role="dialog"  aria-hidden="true"><div class="modal-dialog" id="apImportDiv" th:fragment="apImportDiv"><div class="modal-content animated fadeIn"><button type="button" class="close" onclick="return Testclose();" id="closeUploadBtn"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button><form  class="dropzone"  id="dropzoneForm" enctype="multipart/form-data"><div class="fallback"><input name="file" value="1M以内的Excel文件" type="file" id="file_id"  accept=".xls,.xlsx" onchange="fileChange(this);" /></div></form><button id="uploladBtn" class="btn btn-info mt-2" type="button" onclick="return uploadExcel()"><i class="fa fa-reply"></i>上传</button><button id="parseBtn" class="btn btn-info mt-2" type="button" onclick="return parseExcel()"><i class="fa fa-reply"></i>导入</button></div></div></div><!-- 查看详情弹窗显示--><div class="modal inmodal" id="receiveOrderDetailsModel" tabindex="-1" role="dialog"  aria-hidden="true"><div class="modal-dialog" id="receiveOrderDetailsDiv" th:fragment="receiveOrderDetailsDiv"><div class="modal-content animated fadeIn"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button></div></div></div>
</div></html>

注：

1.此页面通过th:replace来添加需要引用的css和js文件，即用layput目录下的layout.html来代替，并传递三个参数，一个是页面标题，一个是CSS路径，一个是js路径。

2.th:fragment部分就是声明一个代码块，是主要的业务代码部分。

来到引用的layout.html

layout是控制整个页面布局的模板文件。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"xmlns:th="http://www.thymeleaf.org" >
<head th:replace="layout/header::head(${title},${cssPaths})"></head>
<body>
<div id="wrapper"><div th:replace="layout/slider::silder()"></div><div id="page-wrapper" class="gray-bg" ><div th:replace="layout/navbar::navbar()"></div><div class="wrapper wrapper-content animated fadeInRight"><div th:include="::content"></div></div><div class="footer"><div class="pull-right"><a href="https://blog.csdn.net/BADAO_LIUMANG_QIZHI" target="_wongoing">霸道 </a>技术支持</div><div><strong>流氓</strong> 气质管理系统</div></div></div>
</div>
</body>
<footer th:replace="layout/footer::foot(${jsPaths})"></footer>
</html>

注：

1.head部分通过th:replace来使用layout目录下的header.html下的head代码块（即使用th:fragment="head(title,cssPaths)标识的部分）来代替，并将从上个页面接收到的参数再传递给head代码块。

2.再往下使用layout目录下的slide.html中的silder代码块来代替，使用公共侧边栏，下面同理引入导航栏。

3.再往下使用 th:include来引进当前页面的content代码块，即上个页面使用<div th:fragment="content">声明的部分。

4.再往下就是公共的页脚部分，没有抽取公共页面，直接写死即可。

5.再往下就是使用th:replace引用的页脚部分，接受上个页面传递的js路径参数，并传递给layout目录下的footer.html中的foot代码块。

引入的head页面代码

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title,cssPaths)"><title th:text="${title}"></title><meta charset="UTF-8"/><meta name= "viewport"content="width=device-width, initial-scale=1.0"><!--begin::基础样式 --><link th:href="@{/public/css/bootstrap.min.css}" rel="stylesheet"><link th:href="@{/public/font-awesome/css/font-awesome.css}" rel="stylesheet"><link th:href="@{/public/css/animate.css}" rel="stylesheet"><link th:href="@{/public/css/style.css}" rel="stylesheet"><link th:href="@{/public/css/my-style.css}" rel="stylesheet"><!--end::基础样式 --><!--begin::页面样式 --><link rel="stylesheet" type="text/css" th:each="cssPaths,status:${#strings.setSplit(cssPaths,',')}" th:href="@{${cssPaths}}"/><!--end::页面样式 --></head>
</html>

注：

1.通过th:fragment="head(title,cssPaths)接收上个页面传递过来的参数，标题和CSS路径。

2.通过th:text="${title}"动态显示标题。

3.然后引用一些基础样式，引用href属性通过@符号来引用。

4.然后分隔接受的cssPath参数，通过循环依次引入，使用内置变量通过#strings.setSplit，使用#来使用。使用${cssPaths}接受上个页面传递的参数。使用@符号使用href属性。

引入的silder页面代码

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"><nav class="navbar-default navbar-static-side" role="navigation" th:fragment="silder()"><div class="sidebar-collapse"><ul class="nav metismenu" id="side-menu"></ul></div></nav>
</html>

引入的navbar页面代码

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"><div class="row border-bottom" th:fragment="navbar()"><nav class="navbar navbar-static-top white-bg" role="navigation" style="margin-bottom: 0"><div class="navbar-header"></div><ul class="nav navbar-top-links navbar-right"><li><a th:href="@{/logout}"><i class="fa fa-sign-out"></i> 退出</a></li></ul></nav></div>
</html>

注：

1.只是抽取了退出按钮，其中退出的href属性通过th:href="@{/logout}"来引用，跳转到退出登录对应的url。

引入的foot页面代码

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<footer th:fragment="foot(jsPaths)"><!--begin::基础js --><!-- Mainly scripts --><script th:src="@{'/public/js/jquery-3.1.1.min.js?t='+${#strings.randomAlphanumeric(9)}}"></script><script th:src="@{'/public/js/popper.min.js?t='+${#strings.randomAlphanumeric(9)}}"></script><script th:src="@{'/public/js/bootstrap.min.js?t='+${#strings.randomAlphanumeric(9)}}"></script><script th:src="@{'/public/js/plugins/metisMenu/jquery.metisMenu.js?t='+${#strings.randomAlphanumeric(9)}}"></script><script th:src="@{'/public/js/plugins/slimscroll/jquery.slimscroll.min.js?t='+${#strings.randomAlphanumeric(9)}}"></script><!-- Custom and plugin javascript --><script th:src="@{'/public/js/inspinia.js?t='+${#strings.randomAlphanumeric(9)}}"></script><script th:src="@{'/public/js/plugins/pace/pace.min.js?t='+${#strings.randomAlphanumeric(9)}}"></script><script th:src="@{'/public/js/cookie.js?t='+${#strings.randomAlphanumeric(9)}}"></script><!--end::基础js --><!--begin::页面js --><script th:each="jsPaths,status:${#strings.setSplit(jsPaths,',')}" th:src="@{${jsPaths}+'?t='+${#strings.randomAlphanumeric(9)}}"></script><!--end::页面js --><script th:src="@{'/modular/index.js?t='+${#strings.randomAlphanumeric(9)}}"></script></footer>
</html>

注：

1.大体思路同上面的cssPath路径的解析引用。

2.这里在每个引用的js后面追加了一个9位的随机数，掩人耳目。

Thymeleaf提取公共页面（从实例入手，以inspinia模板为例）相关推荐

Thymeleaf抽取公共页面片段
抽取页面项目中,一般把所有的公共页面片段都抽取出来放在一个独立的页面中其他,所有的页面根据需要进行引用参考文档 th:fragment 抽取公共元素 Name,随便自定义命名 <!DOC ...
The way of Webpack learning (II.) -- Extract common code（多页面提取公共代码）
学习之路基于webpack3.10.0,webpack4.0之后更新. 多页面提取公共代码!!! 一:文件关系 pageA --> subA.subB --> moduleA pageB ...
thymeleaf公共页面元素抽取 || 引入片段的时候传入参数
thymeleaf公共页面元素抽取三种引入公共片段的th属性: th:insert:将公共片段整个插入到声明引入的元素中 th:replace:将声明引入的元素替换为公共片段 th:include: ...
thymeleaf页面中引入公共页面
一.前言当我们在html页面使用thymeleaf时,经常会遇到这样的情况.有一些html片段在我们所有页面都存在,造成了代码重复.遇到这种场景,我们就可以把公共代码段抽取到一个公共页面,在需要使用 ...
5.5 Thymeleaf 页面布局（Thymeleaf 公共页面抽取）
第5章 Thymeleaf 模板引擎 5.1 Thymeleaf 入门 5.2 Thymeleaf 表达式 5.3 Thymeleaf 表达式的语法 5.4 Thymeleaf 的高级用法 5.5 T ...
实例入手vue-router重定向
场景当一进来某一个APP,想让其显示某个页面,所以需要在index.vue使用重定向使其重定向到初始页面. 效果前文从实例入手学习Vue-router的使用-实现音乐导航菜单切换 https:/ ...
CMake 入门实战，从实例入手，讲解 CMake 的常见用法，例如aux_source_directory的用法
http://www.hahack.com/codes/cmake/ https://sourceforge.net/projects/qmake2cmake/ --qmake转换cmake小工具什 ...
利用Div CSS(嵌套盒模型)布局页面完整实例流程
Div CSS(嵌套盒模型)布局页面完整实例流程: <!DOCTYPE html> <html> <head> <meta charset=" ...
利用Div+CSS(嵌套+盒模型)布局页面完整实例流程
Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html> <html> <head> <meta charset=" ...

Thymeleaf提取公共页面（从实例入手，以inspinia模板为例）

场景