之前參考網(wǎng)上的各種方法，均為達(dá)到期望的效果合冀，于是到Thymeleaf 官網(wǎng)逛了下蚤氏，找到官網(wǎng)的例子來(lái)實(shí)現(xiàn)了：
以fragment方式分離公有css和js，
以replace+參數(shù)的方式傳入每個(gè)頁(yè)面單獨(dú)的css和js.
直接上栗子：
公有css(存放在templates/common/htmlHead.html中):
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title,links)">
<!-- Common styles and scripts -->
<title th:replace="${title}">The awesome application</title>
<meta charset="utf-8"></meta>
<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
<meta name="description" content=""></meta>
<meta name="author" content=""></meta>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></meta>
<link rel="icon" href="/img/icon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" />
<link th:href="@{/webjars/bootstrap/3.3.7/dist/css/bootstrap.css}" rel="stylesheet">
<link href="css/common/top_header.css" rel="stylesheet">
<link href="css/common/bottom_footer.css" rel="stylesheet">
<!--<link th:href="${myCss}" rel="stylesheet">-->
<link th:href="@{/webjars/cropper/2.3.4/dist/cropper.css}" rel="stylesheet">
<link href="css/common/rspMsg.css" rel="stylesheet">
<link href="css/common/common.css" rel="stylesheet">
<!--/* Per-page placeholder for additional links */-->
<th:block th:replace="${links}" />
</head>
一般頁(yè)面調(diào)用公有css砾赔，并使用自己的css:
<!DOCTYPE html>
<html lang="zh-CN">
<head th:replace="common/htmlHead :: common_header(~{::title},~{::link})">
<title>設(shè)置</title>
<link rel="stylesheet" href="css/index.css">
</head>
</html>
公有js的提取方式是一樣的：
<!DOCTYPE html>
<html lang="zh-CN">
<div th:fragment="common_js(scripts)">
<script th:src="@{/webjars/vue/2.3.4/dist/vue.js}"></script>
<script th:src="@{/webjars/vue-resource/1.3.1/dist/vue-resource.js}"></script>
<script th:src="@{/webjars/jquery/3.2.1/dist/jquery.js}"></script>
<script th:src="@{/webjars/tether/1.4.0/js/tether.js}"></script>
<script th:src="@{/webjars/bootstrap/3.3.7/dist/js/bootstrap.js}"></script>
<script th:src="@{/webjars/cropper/2.3.4/dist/cropper.js}"></script>
<script src="js/common/top_header.js"></script>
<script src="js/common/common.js"></script>
<!--/* Per-page placeholder for additional js */-->
<th:block th:replace="${scripts}" />
</div>
</html>
公有js的使用包一層div即可：
......
<body>
......
<!--使用公有js-->
<div th:replace="common/htmlJS::common_js(~{::script})">
<!--每個(gè)頁(yè)面自己的js-->
<script src="js/index.js"></script>
</div>
</body>
</html>
測(cè)試結(jié)果可用蔫骂，具體解釋請(qǐng)參考Thymeleaf官方文檔
另外本人使用的SpringBoot版本是1.5.4么翰，默認(rèn)的thymeleaf不是3.0版本，上面的測(cè)試需要thymeleaf 3.0版本才可以纠吴，需要修改下pom.xml文件硬鞍，添加以下配置即可：
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
<!-- set thymeleaf version -->
<thymeleaf.version>3.0.0.RELEASE</thymeleaf.version>
<thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>
</properties>
最后幫朋友打個(gè)小廣告
