SpringBoot + Thymeleaf Layout 설정

728x90

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

728x90

저작자표시

'Programming > Thymeleaf' 카테고리의 다른 글

[Trouble shooting] Static classes or parameters is forbidden in thymeleaf 3.0.12 (0)	2022.07.13

웹 개발자의 발자취

SpringBoot + Thymeleaf Layout 설정