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>