在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>注意 引入模板 不可以用/开头 要不发布之后会找不到文件