#불려갈 파편(layoutFile.html)
<!DOCTYPE html>
//파편명 layoutName, 매개변수 = paramTitle, paramContent
<html th:fragment="layoutName (paramTitle,paramContent)" xmlns:th="http://www.thymeleaf.org">
<head>
//여기에 paramTitle의 인자가 들어감
<title th:replace="${paramTitle}">어짜피 교체될 레이아웃 타이틀</title>
</head>
<body>
<h1> 기본 레이아웃으로써 안사라질 레이아웃의 H1</h1>
//여기에 paramContent의 인자가 들어감
<div th:replace="${paramContent}">
<p>어짜피 교체될 레이아웃의 컨텐츠</p>
</div>
<footer>
기본 레이아웃으로써 안사라질 푸터
</footer>
</body>
</html>
#파편을 부르는(=상속받는) 파일(layoutExtendMain.html)
<!DOCTYPE html>
// 앞에는 파일경로를 포함한 파일명 :: 뒤에는 파편명과 인자
//~{::}구조에서 ::앞이 비었으면 현재파일을 의미, 인자가 태그명이면 동일 태그 전체가 인자로 들어감
<html th:replace="~{frame/layoutExtend/layoutFile :: layoutName(~{::title},~{::section})}"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>인자로 넘어갈 타이틀1</title>
<title>인자로 넘어갈 타이틀2</title>
</head>
<body>
<section>
<p>인자로 넘어갈 섹션의, 컨텐츠</p>
</section>
<section>
<p>인자로 넘어갈 섹션의, 컨텐츠2</p>
</section>
</body>
</html>
#컨트롤러에서 layoutExtendMain.html을 호출하여 렌더링한 결과
기본레이아웃은 남겨둔채 바꾸고싶은 부분만 인자로 삼아서 교체가 가능하다.
'thymeleaf' 카테고리의 다른 글
| 타임리프 삼항 연산자 (0) | 2022.06.30 |
|---|---|
| 타임리프 파편 (0) | 2022.06.27 |
| 타임리프와 자바스크립트 (0) | 2022.06.27 |
| 타임리프 div 여러개 묶어서 반복 (0) | 2022.06.27 |
| 타임리프 div 여러개 묶어서 반복 (0) | 2022.06.27 |
