thymeleaf如何引入静态资源文件,外部css文件中引入静态文件,内联css中引入静态资源
引入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>
可以这样引入,不过真的挺麻烦的
在halo中的js代码片段想要引入静态资源，需要如下
一个资源的路径为 /assets/images/logo.png
那么引入方式为
[(${#theme.assets("/images/logo.png")})]
去掉/assets前缀了
