1811
No
pom.xml 추가
<dependency> <groupId>nz.net.ultraq.thymeleaf</groupId> <artifactId>thymeleaf-layout-dialect</artifactId> <version>3.0.0</version> </dependency>
@Controller
@RequestMapping(value ="/thymeleaf")
public class ThymeleafExController {
@GetMapping("/test1")
public String ex07(Model model){
return "thymeleaf/test1";
}
}
1. head.html
<!DOCTYPE html>
<html lagn="ko" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="head">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet" />
<link th:href="@{/bootstrap/vendor/fontawesome-free/css/all.min.css}" rel="stylesheet" type="text/css" />
<link th:href="@{/bootstrap/css/sb-admin-2.min.css}" rel="stylesheet" />
<th:block layout:fragment="script"></th:block>
<th:block layout:fragment="css"></th:block>
</th:block>
</html>
2. header.html
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <div th:fragment="header"> header 영역 </div> </html>
3. footer.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div class="footer" th:fragment="footer">
footer 영역
</div>
</html>
4.layout1.html
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<!-- 공통 헤드-->
<th:block th:replace="fragments/head::head"></th:block>
</head>
<body>
<th:block th:replace="fragments/header::header"></th:block>
<div layout:fragment="content" >
</div>
<div th:replace="fragments/footer::footer"></div>
</body>
</html>
5.test1.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout=http://www.ultraq.net.nz/thymeleaf/layout
layout:decorate="~{layouts/layout1}">
<div layout:fragment="content">
<th:block th:text="${layout}"></th:block>
본문 영역 입니다.
</div>
</html>
샘플 예
공통 코드
fragments/common.html
<footer th:fragment="footer(footer)">
[[${footer}]]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"
integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2"
crossorigin="anonymous"></script>
</footer>
test.html
<footer th:replace="fragments/common :: footer(11)" />
footer(footer) 로 () 안에 임의변수 값을 넘겨주어 사용 할수 있다.
https://github.com/braverokmc79/spring-boot-jpa-web-release
댓글 ( 4)
댓글 남기기