thymeleaf如何引入静态资源文件,外部css文件中引入静态文件,内联css中引入静态资源-526互联

引入css和js

开发网页有时候页面上需要引入一些css和js,而开发的页面又很多，需要重复的引入这些文件,
在thymeleaf中可以专门定义一个文件来引入这些文件，然后在其他的页面中统一引入就可以

比如现在我需要引入的 css文件有如下:

<link href="./assets/css/font.css" rel="stylesheet">
<link type="text/css" href="./assets/css/theme.css" rel="stylesheet">
<link rel="stylesheet" href="/assets/vendor/swiper/css/swiper-bundle.min.css" />
<link rel="stylesheet" href="/assets/css/my.css">

需要引入的js文件如下:

<script src="./assets/vendor/jquery/jquery.min.js"></script>
<script src="./assets/vendor/popper/popper.min.js"></script>
<script src="./assets/js/bootstrap/bootstrap.min.js"></script>
<script src="./assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
<script src="./assets/vendor/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="./assets/vendor/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
<script src="./assets/vendor/input-mask/input-mask.min.js"></script>
<script src="./assets/vendor/nouislider/js/nouislider.min.js"></script>
<script src="./assets/vendor/textarea-autosize/textarea-autosize.min.js"></script>
<script src="./assets/js/theme.js"></script>
<script src="/assets/vendor/swiper/js/swiper-bundle.min.js"></script>
<script src="/assets/js/my.js"></script>

那么可以新建两个文件,一个叫 head.html,专门引入所有的css,一个叫 foot.html,专门引入所有的js
headercss.html的内容如下:

<!DOCTYPE html>
<th:block th:fragment="head">
  <link rel="stylesheet" th:href="@{/assets/css/font.css}">
  <link type="text/css" th:href="@{/assets/css/theme.css}" rel="stylesheet">
  <link rel="stylesheet" th:href="@{/assets/vendor/swiper/css/swiper-bundle.min.css}" />
  <link rel="stylesheet" th:href="@{/assets/css/my.css}">
</th:block>
</html>

然后在需要使用的地方引入,比如index.html引入，如何引入呢,在index.html的head标签内,如下引入

<th:block th:replace="~{modules/head}"/>

我的head.html是建在根目录modules文件夹内,这样就可以引入所有的css了，非常方便,js也是一样,foot.html的内容为

<!DOCTYPE html>
<th:block th:fragment="foot">
 
  <script th:src="@{/assets/vendor/jquery/jquery.min.js}"></script>
  <script th:src="@{/assets/vendor/popper/popper.min.js}"></script>
  <script th:src="@{/assets/js/bootstrap/bootstrap.min.js}"></script>
  
  <script th:src="@{/assets/vendor/fontawesome/js/fontawesome-all.min.js}" defer></script>
  
  <script th:src="@{/assets/vendor/bootstrap-select/js/bootstrap-select.min.js}"></script>
  <script th:src="@{/assets/vendor/bootstrap-tagsinput/bootstrap-tagsinput.min.js}"></script>
  <script th:src="@{/assets/vendor/input-mask/input-mask.min.js}"></script>
  <script th:src="@{/assets/vendor/nouislider/js/nouislider.min.js}"></script>
  <script th:src="@{/assets/vendor/textarea-autosize/textarea-autosize.min.js}"></script>
  <script th:src="@{/assets/vendor/swiper/js/swiper-bundle.min.js}"></script>
  
  <script th:src="@{/assets/js/theme.js}"></script>

  <script th:src="@{/assets/js/my.js}"></script>
</th:block>
</html>

然后在需要引入的地方，如下引入

<th:block th:replace="~{modules/foot}" />

foot.html同样是建立在项目根目录下的modules文件夹下,非常的方便

在外部css文件中引入静态资源

在使用thymeleaf的过程中,有时候需要在css文件内或者在内联样式中引入静态资源,如何引入呢
一般的需求是在某段文字前面加一个图标，使用到 ::before 伪类,这时候需要使用
background-image:url( )标签来引入一个图片,可以如下引入

background-image: url('../images/location.png');

就使用相对路径来引入,不需要使用到thymeleaf的标签

在内联样式中引入静态资源

如果需要在内联样式中引入呢,最常用的是
style="background-image:(图片地址)";
可以如下引入:

th:style="'background-image: url('+@{/assets/images/21.png}+');'"

标签变为 th:style,双引号内需要包裹单引号,url里面使用加号操作符来进行引入

在style标签中引入静态文件

有时候样式是写在style标签中,这时候该如何引入呢

<style th:inline="text">
    body{
        background: url{[[@{/assets/imgges/Background.jpg}]]}
                    no-repeat center center fixed;
    }
</style>

可以这样引入,不过真的挺麻烦的