有時候很多css文件是公共的，我們必須要在每個html文件中引入它們，其實我們可以利用Thymeleaf的模板布局，把這些css文件抽出來，同時如果有某個html文件專屬的css文件，還可在引入模板的基礎上單獨引入該css文件。
首先，建立一個公共文件layout.html
1 <!DOCTYPE html> 2 <html xmlns:th="http://www.thymeleaf.org"> 3 <head th:fragment="common_head(title,links)"> 4 <meta charset="UTF-8"> 5 <title th:replace="${title}">CSDN博客</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> 7 <link rel="shortcut icon" th:href="@{/resources/images/logo_ico_16.ico}" /> 8 <link rel="stylesheet" th:href="@{/resources/css/index.css}"/> 9 <link rel="stylesheet" th:href="@{/resources/iconfont/iconfont.css}"> 10 <link rel="stylesheet" th:href="@{/resources/css/common.css}"/> 11 <th:block th:replace="${links}" /> 12 </head> 13 <body> 14 15 </body> 16 </html>
上面的“<head th:fragment="common_head(title,links)">”即為定義好的css模板，其中title和links為兩個動態傳入的變量，而th:block會在links值為空時自動隱藏，這樣就可以實現除了css模板中的css文件之外，需要再單獨引入css和不需要引入單獨css兩種情況。使用方法如下：
一、需要單獨引入css
在實際的html文件中加入：
<head th:replace="layout :: common_head(~{::title},~{::link})"> <title>測試公共css引入</title> <link rel="stylesheet" th:href="@{/resources/css/detail.css}"/> <link rel="stylesheet" th:href="@{/resources/css/profile.css}"/> </head>
其中的title會自動將css模板中的title替換，而里面的多個link標簽（只有一個link標簽也可）也會替換th:block標簽
二、不需要單獨引入css
在實際的html文件中加入：
<head th:replace="layout :: common_head(~{::title},~{})"> <title>測試公共css引入</title> </head>
這種情況其實就是將傳入的第二個變量置為空
但是這兩種情況title都是必須的