SpringBoot + Thymeleaf Layout 설정
- 타임리프 Thyemelaf?
Thymeleaf는 서버 사이드 템플릿 엔진(Server Side Template Engine)의 한 종류로, 쉽게 컨트롤러가 전달하는 데이터를 이용하여 동적으로 화면을 구성할 수 있게 해주는 역할을 하며, Spring은 공식적으로 Thymeleaf 사용을 권장하고 있습니다.
- 타임리프 레이아웃 Thymeleaf Layout
일반적으로 웹 사이트는 머리글, 바닥글, 메뉴 등의 공통 페이지 구성 요소를 공유합니다. 이러한 페이지 구성 요소는 동일하거나 다른 레이아웃에서 사용할 수 있습니다. 프로젝트에서 레이아웃을 구성하는 두 가지 주요 스타일은 포함 스타일과 계층 스타일입니다. 두 스타일 모두 Thymeleaf와 함께 가장 큰 가치인 자연스러운 템플릿을 잃지 않고 쉽게 활용할 수 있습니다.
- build.gradle
plugins { id 'org.springframework.boot' version '2.7.1' id 'io.spring.dependency-management' version '1.0.11.RELEASE' id 'java' id 'war' } group = 'com.thymeleaf' version = '0.0.1-SNAPSHOT' sourceCompatibility = '17' repositories { mavenCentral() } dependencies { implementation 'org.springframework.boot:spring-boot-starter-web' implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect' providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat' testImplementation 'org.springframework.boot:spring-boot-starter-test' } tasks.named('test') { useJUnitPlatform() }
- application.properties
# thymeleaf spring.thymeleaf.cache=false spring.thymeleaf.prefix=classpath:/templates/ spring.thymeleaf.suffix=.html
spring.thymeleaf.cache : 캐시를 설정할 것인지.. false로 설정하여 수정 시 즉각 반영되도록 함 (기본값 : true)
- HomeController
package com.example.thymeleaf.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; @Controller public class HomeController { @GetMapping("/") public String home() { return "home"; } }
- layout.html
<!DOCTYPE html> <html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </head> <body> <th:block th:replace="fragments/header :: header" /> <th:block layout:fragment="content" /> <th:block th:replace="fragments/footer :: footer" /> </body> </html>
- header.html
<!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="utf-8" /> </head> <body> <th:block th:fragment="header"> <h1>Header Section</h1> </th:block> </body> </html>
- footer.html
<!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="utf-8" /> </head> <body> <th:block th:fragment="footer"> <h1>Footer Section</h1> </th:block> </body> </html>
- home.html
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{fragments/layout}"> <head> <meta charset="utf-8" /> <title>Thymeleaf Layout</title> </head> <body> <div layout:fragment="content"> <h1>Main Contents</h1> </div> </body> </html>
- 동작 모습
- 페이지 소스보기
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta charset="utf-8" /> <title>Thymeleaf Layout</title> </head> <body> <h1>Header Section</h1> <div> <h1>Main Contents</h1> </div> <h1>Footer Section</h1> </body> </html>
위와 같이 header, contents, footer를 조합하여 html을 그려준다.
참고 : https://www.thymeleaf.org/doc/articles/layouts.html
Thymeleaf Page Layouts - Thymeleaf
Summary In this article, we described many ways of achieving the same: layouts. You can build layouts using Thymeleaf Standard Layout System that is based on include-style approach. You also have powerful Layout Dialect, that uses decorator pattern for wor
www.thymeleaf.org
'Programming > Thymeleaf' 카테고리의 다른 글
| [Trouble shooting] Static classes or parameters is forbidden in thymeleaf 3.0.12 (0) | 2022.07.13 |
|---|
댓글