보통 웹사이트를 만들려면 header, footer, menu 등 공통적인 페이지 구성 요소들이 있다. 이런 영역들을 각각의 페이지마다 같은 소스코드를 넣는다면 변경이 일어날 때마다 이를 포함하고 있는 모든 페이지를 수정해야 한다. Thymeleaf의 페이지 레이아웃 기능을 사용한다면 공통 요소 관리를 쉽게 할 수 있다.
Thymeleaf Layout Dialect dependency 추가하기
Thymeleaf Layout dialect를 이용하면 하나의 레이아웃을 여러 페이지에 똑같이 적용할 수 있다. 공통적으로 적용되는 레이아웃을 미리 만들어놓고 현재 작성 중인 페이지만 레이아웃에 끼워넣으면 된다.
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
<version>2.5.1</version>
</dependency>pom.xml에 Thymeleaf Layout Dialect 의존성을 추가해 준다.
thymeleaf-layout-dialect 라이브러리 설치가 완료됐다면 templates 아래 fragments 폴더를 생성 후 footer.html, header.html 파일을 생성한다. 마찬가지로 templates 폴더 아래에 layouts 폴더를 만드고 layout1.html 파일을 생성한다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div th:fragment="footer">
footer 영역 입니다.
</div>
</html><!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div th:fragment="header">
header 영역 입니다.
</div>
</html><!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymelaf/layout">
<head>
<meta charset="UTF-8">
<title>Title</title>
<th:block layout:fragment="script"></th:block>
<th:block layout:fragment="css"></th:block>
</head>
<body>
<div th:replace="fragments/header::header"></div>
<div layout:fragment="content"></div>
<div th:replace="fragments/footer::footer"></div>
</body>
</html>- layout 기능을 사용하기 위해서 html 태그에 layout 네임스페이스를 추가한다.
- th:replace 속성은 해당 속성이 선언된 html 태그를 다른 html 파일로 치환하는 것으로 이해하면 좋다. fragments 폴더 아래의 header.html 파일의 “th:fragment=header” 영역을 가지고 온다.
- layout에서 변경되는 영역을 fragment로 설정한다. 앞으로 쇼핑몰을 만들면서 만들 페이지는 이 영역으로 들어간다.
- header 영역과 마찬가지로 fragments 폴더 아래의 footer.html 파일의 “th:fragment=footer” 영역을 가지고 온다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymelaf/layout"
layout:decorate="~{layouts/layout1">
<div layout:fragment="content">본문 영역 입니다.</div>
</html>- layouts 폴더 아래에 있는 layout1.html을 적용하기 위해서 네임스페이스를 추가한다.
- layout1.html 파일의 영역에 들어가는 영역이다.
@GetMapping(value = "/ex07")
public String thymeleafExample07() {
return "thymeleafEx/thymeleafEx07";
I DEVELOP THEREFORE, I AM 😄