Thymeleaf Layout Dialect dependency 추가하기
pom.xml
<!-- 타임리프 의존성 추가하기 -->
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>메이븐업데이트 실행후, 라이브러리가 제대로 들어갔는지 확인한다.
templates 아래에 fragments 폴더생성 후,
header.html, footer.html 을 생성해준다.
header.html
<!DOCTYPE html>
<html xmls:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<div th:fragment="header">
header 영역입니다.
</div>
</html>footer.html
<!DOCTYPE html>
<html xmls:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<div th:fragment="footer">
footer 영역입니다.
</div>
</html>layout1.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<th:block layout:fragment="script"></th>
<th:block layout:fragment="css"></th>
</head>
<body>
<div th:replace="fragments/header::header"></div>
<div layout:fragment="content"></div>
<div th:replace="fragments/footer::footer"></div>
</body>
</html>thymeleafEx07.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layouts/layout1}">
<div layout:fragment="content">
본문영역 </div>
</html>ThymeleafExController.java
@GetMapping(value="/ex07")
public String thymeleafExample07() {
return "thymeleaf/thymeleaf07";
}
이제 피크먼트 레이아웃 설정은 다 되었다..!
스타일은 부트스트랩으로 할건데, 이건 블로그에 적진 않을거.. !ㅠㅠ
기록하기