如何使用Thymeleaf Fragment和Replace标签在HTML中插入公共CSS代码

步骤1：创建公共CSS片段 #

首先在你的Thymeleaf模板目录（一般为resources/templates）下新建片段存放目录fragments，在目录中新建common_head.html文件，写入如下内容：

<head th:fragment="common_styles">
    <link rel="stylesheet" th:href="@{/assets/css/plugins.css}">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/bootstrap.min.css}">
    <!-- 主样式CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/style.css}">
    <link rel="stylesheet" th:href="@{/assets/css/responsive.css}">
</head>

注意：这里使用Thymeleaf的上下文路径语法@{/}替代硬编码的相对路径../static，可以适配不同层级的页面引用，避免静态资源加载失败的问题。SpringBoot项目默认会自动映射resources/static目录下的静态资源，不需要在路径中写/static。

步骤2：在所有HTML页面中引入片段 #

在需要引入公共样式的HTML文件中，先确保html标签已经声明Thymeleaf命名空间，之后直接在head标签上引入片段即可：

<!DOCTYPE html>
<!-- 声明Thymeleaf命名空间 -->
<html xmlns:th="http://www.thymeleaf.org">
<!-- 引入公共CSS片段 -->
<head th:replace="~{fragments/common_head :: common_styles}">
    <!-- 页面专属的CSS可以继续在这里追加，不会被片段覆盖 -->
    <link rel="stylesheet" th:href="@{/assets/css/home/index.css}">
</head>
<body>
<!-- 页面内容 -->
</body>
</html>

批量修改已有HTML文件的技巧 #

如果项目中已有大量HTML文件需要修改，可以使用IDE的全局文件夹替换功能，通过正则匹配所有文件的<head>标签，批量替换为带片段引入的head标签，不需要手动逐个修改。

内容的提问来源于stack exchange，提问作者JamesB