템플릿 조각은 조각을 불러와 그대로 썼다.
이거는 이제 아예 태그를 그대로 넣는다고 보면 된다.
@GetMapping("/layout")
public String layout(){
return "template/layout/layoutMain";
}그냥 불러옴
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="template/layout/base :: common_header(~{::title},~{::link})">
<title>메인 타이틀</title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}">
</head>
<body>
메인 컨텐츠
</body>
</html>얘는 head에서
"경로 :: 레이아웃(내가 구현해놓은 레이아웃에서 변경하고 싶은 부분)"
하면
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title,links)">
<title th:replace="${title}">레이아웃 타이틀</title>
<!-- 공통 -->
<link rel="stylesheet" type="text/css" media="all" th:href="@{/css/awesomeapp.css}">
<link rel="shortcut icon" th:href="@{/images/favicon.ico}">
<script type="text/javascript" th:src="@{/sh/scripts/codebase.js}"></script>
<!-- 추가 -->
<th:block th:replace="${links}" />
</head>이 구현해 놓은 header 조각에서 title, link를 저렇게 아래쪽 변수로 써서 추가하는 거임.
<!DOCTYPE html>
<html>
<head>
<title>메인 타이틀</title>
<!-- 공통 -->
<link rel="stylesheet" type="text/css" media="all" href="/css/awesomeapp.css">
<link rel="shortcut icon" href="/images/favicon.ico">
<script type="text/javascript" src="/sh/scripts/codebase.js"></script>
<!-- 추가 -->
<link rel="stylesheet" href="/css/bootstrap.min.css"><link rel="stylesheet" href="/themes/smoothness/jquery-ui.css">
</head>
<body>
메인 컨텐츠
</body>
</html>결과.
헤드 바뀜.
그러니까 구조가
A라는 템플릿에서 B라는 템플릿에 있는 레이아웃을 가져오고 싶으면
A가
<태그명 th:replace="경로 :: fragment명(~{넣을 자식 태그})">
이렇게 하면
저 fragment에서 인자로 받은 자식태그가 하나만 있어야 하는거라면 교체되고, 아니면 추가가 됨.
그냥 템플릿 조각에서 좀 크게 확장된 느낌인 듯
'스프링 > 4. 스프링 MVC-2' 카테고리의 다른 글
| 17. 스프링이 타임리프에 대해 제공하는 기능들. (0) | 2023.08.26 |
|---|---|
| 16. 레이아웃 템플릿 확장 (0) | 2023.08.26 |
| 14. 템플릿 조각 (0) | 2023.08.24 |
| 13. 타임리프 상에서 자바스크립트 사용 (0) | 2023.08.24 |
| 12. 타임리프 블록 (0) | 2023.08.23 |