스프링부트에서 Thymeleaf 레이아웃을 간단히 구현한 예시 코드입니다
A basic example of Thymeleaf layout implementation with Spring Boot
Thymeleaf is a modern server-side Java template engine for both web and standalone environments.
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
Thymeleaf Layout Dialect는 필요X
No need for Thymeleaf Layout Dialect
🗂️ src/main/resources
📁 static
└ css
└ style.css
📁 templates
└ common
├ file-name.html
├ footer.html
├ header.html
└ layout.html
└ pages
└ sub.html
└ index.html
코드의 일부를 살펴보겠습니다 Here’s a glimpse of the code 👇
참고: th:insert, th:replace, th:include의 차이
<body>
<header th:replace="~{common/header :: header}"></header>
<main th:replace="${content}"></main>
<footer th:replace="~{common/footer :: footer}"></footer>
</body>
header 태그가 아니어도 th:fragment="header"인 요소를 쓸 수 있습니다
아래 코드 그대로인 경우 header 태그가, 주석을 푸는 경우 div class="header-wrapper"가 렌더링 됩니다
It doesn't need to be a header tag as long as the element is defined with th:fragment="header"
When you uncomment the commented lines, a div class="header-wrapper" will be rendered instead of the header tag
<!--<div th:fragment="header" class="header-wrapper"> -->
<header>
<h1>헤더입니다</h1>
<ul>
<li><a href="/">홈</a></li>
<li><a href="/sub">서브</a></li>
</ul>
</header>
<!--</div>-->
마지막으로 가장 중요한 메인 컨텐츠 영역입니다
Lastly, the most important part ㅡthe content
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="~{common/layout :: layout(~{::title}, ~{::content})}">
<head>
<title>Thymeleaf layout 예제 - 인덱스</title>
</head>
<body>
<th:block th:fragment="content">
<div class="container">
<h2>인덱스페이지 영역입니다</h2>
<th:block th:replace="~{common/filename :: fragment-name}"></th:block>
</div>
</th:block>
</body>
</html>
레이아웃이 잘 적용된 모습입니다
Copyright (c) 2024 selinakk
If you have any questions, encounter a bug, or anything else, feel free to reach out.