springboot项目中使用thymeleaf如何用html引用一些静态资源

目前正在做一个Springboot+thymeleaf的demo，从公网上下载了一套商品类的模板，但是这个模板是纯静态html写的，有很多资源文件都是硬生生的写在每个页面中，这让我看了很不爽，于是多方研究查找，下面为大家献上引入html公共资源的方式。

首先给大家看一下原先的页面如何引用的资源

请注意springboot的资源文件目录与路径，templates主要是我们的页面Html，static主要是我们的各种静态资源（css，js，img，fonts等）。首先要明确我们如何在html页面引用资源文件：

1、引用资源文件

如果你的资源文件所处位置为如下图所示

那么引用的方式直接如下所示： th:href="@{/css/slick-theme.css}"

<link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}"/>

    <link rel="stylesheet" type="text/css" th:href="@{/css/slick.css}"/>

    <link rel="stylesheet" type="text/css" th:href="@{/css/slick-theme.css}"/>

    <link rel="stylesheet" type="text/css" th:href="@{/css/nouislider.min.css}"/>

    <link rel="stylesheet" type="text/css" th:href="@{/css/font-awesome.min.css}"/>

    <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}"/>

这样我们解决了第一步，定位资源的问题。

2、创建公共资源html

首先我建立了一个公共资源html

其次我将全部我所需要的资源都放入html中

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="common_resource">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700" rel="stylesheet">

    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}"/>

    <link rel="stylesheet" type="text/css" th:href="@{/css/slick.css}"/>

    <link rel="stylesheet" type="text/css" th:href="@{/css/slick-theme.css}"/>

    <link rel="stylesheet" type="text/css" th:href="@{/css/nouislider.min.css}"/>

    <link rel="stylesheet" type="text/css" th:href="@{/css/font-awesome.min.css}"/>

    <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}"/>

    <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>
</div>
</body>
</html>

请注意上述代码中的：<div th:fragment="common_resource"> XXXX </div>

这是关键，这样做的目的就是为如下代码创建了一个标签，如果希望引入这段代码就直接调用标签即可。

下面我们来看看如何调用标签：

3、引用公共资源html

引用的方法很简单，使用 th:replace="common/common_resource :: common_resource 参数即可。

common/common_resource 表示common包下的common_resource.html
common_resource 表示我们刚才定义的资源文件标签

<head>
    <div th:replace="common/common_resource :: common_resource"></div>
    <title>商品列表</title>
</head>

正常情况配置完成基本就OK了大家玩的开心。如果有问题八成是路径的问题，检查检查有没有少个斜杠啥的哈哈