thymeleaf 定义公共header 和 公共js
在common文件夹下创建common_header.html文件
内容如下
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title,links,styles)">
<meta charset="utf-8">
<title th:replace="${title}">The awesome application</title>
<!--全局通用框架样式 begin-->
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" th:href="@{/content/ui/global/bootstrap/css/bootstrap.min.css}">
<!-- Font Awesome -->
<link th:href="@{/content/ui/global/font-awesome/css/font-awesome.css}" rel="stylesheet" />
<!-- Theme style -->
<link rel="stylesheet" th:href="@{/content/adminlte/dist/css/AdminLTE.css}">
<link rel="stylesheet" th:href="@{/content/adminlte/dist/css/skins/_all-skins.css}">
<link th:href="@{/content/min/css/supershopui.common.min.css}" rel="stylesheet" />
<link th:href="@{/content/plugins/iCheck/all.css}" rel="stylesheet" />
<link th:href="@{/content/plugins/zTree/css/metroStyle/metroStyle.css}" rel="stylesheet" />
<link th:href="@{/content/plugins/webuploader/webuploader.css}" rel="stylesheet" />
<link th:href="@{/content/plugins/bootstrap-table/bootstrap-table.css}" rel="stylesheet" />
<link th:href="@{/content/plugins/my97DatePicker/skin/WdatePicker.css}" rel="stylesheet" />
<link th:href="@{/content/ui/global/bootstrap-switch/css/bootstrap-switch.css}" rel="stylesheet" />
<link th:href="@{/content/plugins/select2/css/select2.min.css}" rel="stylesheet" />
<link th:href="@{/content/plugins/select2/css/select2-bootstrap.min.css}" rel="stylesheet" />
<!--<link th:href="@{/content/ui/css/common.css}" rel="stylesheet" />-->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!--全局通用框架样式 end-->
<!--/* Per-page placeholder for additional links */-->
<th:block th:replace="${links}" />
<!--/* Per-page placeholder for additional styles */-->
<th:block th:replace="${styles}" />
</head>
使用如下：
1：可以自带标题 也可以追加css引入,如果需要自定义 style 样式 加上标签，在common_header 参数加上即可
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<!--<head th:replace="common/common_header :: common_header(~{::title},~{::link})">-->
<head th:replace="common/common_header :: common_header(~{::title},~{::link},~{})">
<title>用户首页</title>
<!--<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">-->
<link rel="stylesheet" th:href="@{/content/plugins/ueditor/themes/default/css/ueditor.css}">
</head>
在common文件夹下创建common_foot.html文件
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<div th:fragment="foot">
<script th:src="@{/content/ui/global/jQuery/jquery.min.js}"></script>
<script th:src="@{/content/common/common.js}"></script>
<!-- Bootstrap 3.3.6 -->
<script th:src="@{/content/ui/global/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/content/min/js/supershopui.common.js}"></script>
<script th:src="@{/content/plugins/iCheck/icheck.min.js}"></script>
<script th:src="@{/content/ui/global/bootstrap-switch/js/bootstrap-switch.js}"></script>
<script th:src="@{/content/plugins/my97DatePicker/WdatePicker.js}"></script>
<script th:src="@{/content/common/layer/layer.js}"></script>
<script th:src="@{/content/plugins/bootstrap-select/js/bootstrap-select.js}"></script>
<script th:src="@{/content/plugins/select2/js/select2.full.min.js}"></script>
<script th:src="@{/content/plugins/moment/moment.js}"></script>
</div>
使用如下：
<div th:replace="common/common_foot :: foot"></div>
注意 引入模板 不可以用/开头 要不发布之后会找不到文件
---------------------
作者：奋斗青年LOVE
来源：CSDN
原文：https://blog.csdn.net/qq_33842795/article/details/80322829
版权声明：本文为博主原创文章，转载请附上博文链接！
