Thymeleaf - 템플릿 상속, 공통 템플릿
0
Thymeleaf에서 공통 템플릿을 사용하는 방법에 대해 알아보자
build.gradle
build.gradle에는 반드시 아래의 코드가 있어야 한다.
//타임리프
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
//공통 템플릿
implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'build.gradle에 위 코드를 추가하고 꼭 빌드를 해주자.
템플릿 상속
예시 코드
- Controller
@Controller
public class HomeController {
@GetMapping("/page1")
public String page1() {
return "page1";
}
@GetMapping("/page2")
public String page2() {
return "page2";
}
}Controller에 page1, page2를 매핑해 주었다.
이제 page1과 page2에 공통으로 들어갈 템플릿을 만들어 적용할 것이다.
- layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>layout</title>
</head>
<body>
<h1>공통으로 들어가는 부분</h1>
<!-- 기본 템플릿 안에 삽입될 내용 Start -->
<th:block layout:fragment="content"></th:block>
<!-- 기본 템플릿 안에 삽입될 내용 End -->
</body>
</html>- page1
<html layout:decorate="~{layout}">
<div layout:fragment="content">
<h1>page1</h1>
</div>
</html>- page2
<html layout:decorate="~{layout}">
<div layout:fragment="content">
<h1>page2</h1>
</div>
</html>설명
코드를 간단히 설명하자면 page1과 page2의
<html layout:decorate="~{layout}">
부분에 공통 템플릿인 layout.html이 들어가고,
layout.html의 <th:block layout:fragment="content"></th:block>부분에 page1과 page2의 div엘리먼트가 삽입되어 하나의 페이지를 완성시키는 것이다.
결과
공통 템플릿
위의 예제 페이지에 추가로 공통 엘리먼트를 넣어보려고 한다.
th:replace를 사용하면, 특정 부분을 페이지에 더 추가할 수 있다.
예시 코드
새로 붙여넣고 싶은 add.html 을 만들자.
- add.html
<div th:fragment="addFragment">
<h1>추가한 부분 : addFragment</h1>
</div>그리고 아래와 같이 <div th:replace="html이름 :: fragment이름"></div>를 page1에 추가해주면 된다.
- page1
<html layout:decorate="~{layout}">
<div layout:fragment="content">
<h1>page1</h1>
<div th:replace="add :: addFragment"></div>
</div>
</html>- 결과
BackEnd Developer