Spring Boot Thymeleaf layout

🌿 Thymeleaf layout 설정

1. build.gradle에 dependency 추가

implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

2. 공통 양식 페이지 제작

securityAuto

header.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <th:block th:fragment="headerFragment">
     <h1>header</h1>
  </th:block>
</html>

footer.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <th:block th:fragment="footerFragment">
     <h1>footer</h1>
  </th:block>
</html>

default_layout.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>title</title>
  </head>
  <body>
    <th:block th:replace="fragments/header :: headerFragment"></th:block>
    <th:block layout:fragment="content"></th:block>
    <th:block th:replace="fragments/footer :: footerFragment"></th:block>
  </body>
</html>

templates/content/home.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/default_layout}">

<th:block layout:fragment="content">
  본문
</th:block>
</html>

3. Controller 연동

HomeController

package com.team.mztelecom.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {
	
	@GetMapping(value = "/")
	public String home() {
		return "content/home";
	}

이렇게 하면 공통 레이아웃 설정 완료 !!

Leave a comment