thymeleaf引⼊公共css、js
  有时候很多css⽂件是公共的，我们必须要在每个html⽂件中引⼊它们，其实我们可以利⽤Thymeleaf的模板布局，把这些css⽂件抽出来，同时如果有某个html⽂件专属的css⽂件，还可在引⼊模板的基础上单独引⼊该css⽂件。
⾸先，建⽴⼀个公共⽂件layout.html
1<!DOCTYPE html>
2<html xmlns:th="">
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},~{})">thyme
<title>测试公共css引⼊</title>
</head>
这种情况其实就是将传⼊的第⼆个变量置为空
但是这两种情况title都是必须的

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。