Thymeleaf layout dialect
Thymeleaf 내의 코드 재사용을 위해 레이아웃과 재사용이 가능한 템플릿을 구축할 수 힜는 오픈소스 라이브러리
build.gradle 의존성 추가
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:3.0.0'
폴더 구조
templates는 Thymeleaf가 지정한 최상위 폴더이다.
templates > fragments는 모든 페이지에 공통적으로 출력되는 header, footer, config 등을 구성한다.
templates > layouts는 fragments의 파일들을 해당 페이지에서 엮어주는 용도로 사용된다.
layout.html
<!DOCTYPE html>
<html lang="ko" xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<th:block th:replace="~{fragments/header}"></th:block>
</head>
<body>
<th:block th:replace="~{fragments/top}"></th:block>
<th:block layout:fragment="content"></th:block>
<th:block th:replace="~{fragments/footer}"></th:block>
</body>
</html>
header.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap core JS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</html>
top.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!-- 상단 -->
</html>
footer.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!-- Footer-->
<footer>
<!-- 하단 -->
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</html>
content.html
<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" layout:decorate="~{layouts/layout}">
<head>
<title th:text="${htmlTitle}"></title>
</head>
<body>
<div layout:fragment="content">
<!-- 본문 -->
</div>
</body>
</html>'🖥️ Back > Spring' 카테고리의 다른 글
| Batch (0) | 2024.04.18 |
|---|---|
| @Cacheable (0) | 2024.04.09 |
| MongoDB (0) | 2024.04.04 |
| Thymeleaf에서 html 이미지 상대경로 작성 주의 (0) | 2024.03.22 |
| Spring initializer (0) | 2024.03.18 |
