- flagment 를 활용하면 html 전체를 레이아웃을 만들어 호출시키고,
수정되는 data 를 처리하는 부분만으로 쉽게 페이지를 구현시킬 수 있게된다. - 헤더, 푸터, 컨텐츠 등 각각을 fragment 로 만들면 application 을 다체롭게 만들 수 있겠지만 유지보수가 어려워진다.
✏️ 확장 레이아웃 적용
📍 flagment 생성
- html 전체를 flagment 로 보내주기 위해 html 태그에 선언되었다.
- 매개변수로 title 태그와 content 태그를 받고있다.
- 호출되는 페이지 마다 title 과 content 부분이 변경됨
- h1, footer 태그는 공통으로 사용된다.
<!DOCTYPE html>
<html th:fragment="layout (title, content)" xmlns:th="http://www.thymeleaf.org">
<head>
<title th:replace="${title}">레이아웃 타이틀</title>
</head>
<body>
<h1>레이아웃 H1</h1>
<div th:replace="${content}">
<p>레이아웃 컨텐츠</p>
</div>
<footer>
레이아웃 푸터
</footer>
</body>
</html>📍 fragment 사용
- html 페이지 전체를 템플릿으로 사용하기 때문에 html 태그에 replace 로 호출시키면 된다.
- fragment 를 호출하는 쪽에서는 title 태그와 content 태그 ( 현재페이지에서는 section 태그) 만 작업하면 된다.
- 나머지 템플릿은 fragment 레이아웃이 태그를 조립해준다.
<!DOCTYPE html>
<html th:replace="~{template/layoutExtend/layoutFile
:: layout(~{::title},~{::section})}"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>메인 페이지 타이틀</title>
</head>
<body>
<section>
<p>메인 페이지 컨텐츠</p>
<div>메인 페이지 포함 내용</div>
</section>
</body>
</html>
잘못된 내용 PR 환영