之前参考网上的各种方法，均为达到期望的效果，于是到Thymeleaf 官网逛了下，找到官网的例子来实现了：
|
1 2 |
以fragment方式分离公有css和js， 以replace+参数的方式传入每个页面单独的css和js. |
直接上栗子：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
公有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> |
一般页面调用公有CSS，并使用自己的CSS:
|
1 2 3 4 5 6 7 |
<!DOCTYPE html> <html lang="zh-CN"> <head th:replace="common/htmlHead :: common_header(~{::title},~{::link})"> <title>设置</title> <link rel="stylesheet" href="css/index.css"> </head> </html> |
公有js的提取方式是一样的：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!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即可：
|
1 2 3 4 5 6 7 8 9 10 11 |
...... <body> ...... <!--使用公有js--> <div th:replace="common/htmlJS::common_js(~{::script})"> <!--每个页面自己的js--> <script src="js/index.js"></script> </div> </body> </html> |
测试结果可用，具体解释请参考Thymeleaf官方文档
注意，上述的配置在引入的是，会多出来一个DIV标签，如果想去掉这个标签，可以使用如下方式声明以及引用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="zh-CN"> <th:block 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}" /> </th:block> </html> |
公有JS的使用包一层th:block即可：
|
1 2 3 4 5 6 7 8 9 10 11 |
...... <body> ...... <!--使用公有js--> <th:block th:replace="common/htmlJS::common_js(~{::script})"> <!--每个页面自己的js--> <script src="js/index.js"></script> </th:block> </body> </html> |
另外如果使用的SpringBoot版本是1.5.4，默认的thymeleaf不是3.0版本，上面的测试需要thymeleaf 3.0版本才可以，需要修改下pom.xml文件，添加以下配置即可：
|
1 2 3 4 5 6 7 8 |
<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> |
另外如果使用的SpringBoot版本是2.5.0，则不需要任何修改，直接可以生效。