1.引入CSS
<link rel="stylesheet" th:href="@{/css的相对路径.css}">
2.引入JS
<script th:src="@{/js的相对路径.js}"></script>
3.放行资源文件
@Override
public void init(WebSecurity web) throws Exception {
web.ignoring().antMatchers("/plugins/**");
web.ignoring().antMatchers("/css/**");
web.ignoring().antMatchers("/js/**");
web.ignoring().antMatchers("/img/**");
super.init(web);
}
4.表单的Action这样写
<form th:action="@{/login}" method="post">
5.片段
<div th:fragment="片段名称">
代码片断放在/src/main/resources/templates/fragments目录下
写代码片断
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<head th:fragment="common_header(title,links)">
<title th:replace="${title}">The awesome application</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" th:href="@{/plugins/fontawesome-free/css/all.min.css}">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" th:href="@{/css/adminlte.min.css}">
<th:block th:replace="${links}" />
</head>
</body>
</html>
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div data-th-fragment="js">
<script th:src="@{/plugins/jquery/jquery.min.js}"></script>
<script th:src="@{/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/js/adminlte.min.js}"></script>
<script th:src="@{/js/demo.js}"></script>
</div>
</body>
</html>
引用片断
<head th:replace="fragments/head :: common_header(~{::title},~{})">
<title>添加Hello</title>
</head>
<div th:replace="fragments/js :: js">...</div>