Thymeleaf 레이아웃을 적용 하는 방식이 두 가지가 있다.
두 가지 방식을 모두 정리해보고자 한다.
1안
1.1. Thymeleaf Layout Dialect dependency 추가
<!--Thymeleaf Layout Dialect -->
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
<version>3.2.0</version> <!--2.5.1버전은 호환안되어서 3.2.0으로 버전업-->
</dependency>1.2. footer 만들기
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"> <!--thymeleaf 문법을 사용하기 위해 추가 -->
<div th:fragment="footer"> <!--다른 페이지에 포함시킬 영역을 th:fragment로 선언
footer 영역을 fragment로 만듦-->
footer 영역 입니다.
</div>
</html>1.3. header 만들기
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"> <!--thymeleaf 문법을 사용하기 위해 추가 -->
<div th:fragment="header"> <!--다른 페이지에 포함시킬 영역을 th:fragment로 선언
header 영역을 fragment로 만듦-->
header 영역 입니다.
</div>
</html>1.4. 레이아웃 만들기
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <!--layout 기능을 사용하기 위해서 layout 네임 스페이스 추가-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<th:block layout:fragment="script"></th:block>
<th:block layout:fragment="css"></th:block>
</head>
<body>
<div th:replace="fragments/header::header"></div> <!--해당 속성이 선언된 html 태그를 다른 html파일로 치환
즉, fragment 폴더 아래 header.html 파일의 th:fragment=header
영역 가져온다-->
<div th:layout:fragment="content"> <!--layout에서 변경되는 영역을 fragment로 설정-->
</div>
<div th:replace="fragments/footer::footer"></div> <!--위 header 영역과 설명 동일-->
</body>
</html>1.5. 본문 영역 만들기
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layouts/layout1}"> <!--layout 폴더 아래에 있는 layout1.html 적용하기 위한 네임스페이스 추가-->
<div layout:fragment="content"> <!--layout1.html 아래 <div layout:fragment="content">영역에 들어가는 부분-->
본문 영역 입니다.
</div>
</html>1.6. Controller Method 추가
@GetMapping(value = "/ex07")
public String thymeleafExample07(){
return "thymeleafEx/thymeleafEx07"; //templages 폴더를 기준으로 뷰의 위치,이름 반환
}2안
2.1. Thymeleaf Layout Dialect dependency 추가
dependencies {
implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect' // Thymeleaf Layout
}2.2. Application 설정 추가
2.2.1. 경우1) properties 파일
spring.thymeleaf.enabled=true
spring.thymeleaf.cache=false
spring.thymeleaf.check-template-location=true
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html2.2.2. 경우2) yaml/yml 파일
thymeleaf:
cache: false
check-template-location: true
prefix: classpath:/templates/
suffix: .html
enabled: true2.3. footer 만들기
<!DOCTYPE html>
<!-- Thymeleaf 선언 / FooterFragment 임을 선언-->
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
th:fragment="FooterFragment">
<div style="border: solid 1px blue">
<h1>Footer 영역입니다.</h1>
</div>
</html>2.4. header 만들기
<!DOCTYPE html>
<!-- Thymeleaf 선언 / headerFragment 임을 선언-->
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
th:fragment="HeaderFragment">
<div style="border: solid 1px yellow">
<h1>Header 영역입니다.</h1>
</div>
</html>2.5. 공통 Head 만들기
<!DOCTYPE html>
<!--Thymeleaf, ConfigFragment 선언-->
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
th:fragment="ConfigFragment">
<head>
<!--Common Head-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport"
content="width=device-width, maximum-scale=1.0, minimum-scale=1, user-scalable=yes,initial-scale=1.0"/>
<title></title>
<!--Common JS-->
<script th:inline="javascript" type="text/javascript" th:src="@{/lib/jquery-3.6.1.min.js}"></script>
<script th:inline="javascript" type="text/javascript" th:src="@{/lib/jquery-ui.min.js}"></script>
<!--Common CSS -->
<link th:inline="css" th:href="@{/lib/jquery-ui.min.css}" rel="stylesheet"/>
</head>
</html>2.6. 레이아웃 만들기
<!DOCTYPE html>
<!--라이브러리 참조 : Thymeleaf & Thymeleaf Layout -->
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<!--공통 JS / CSS 영역을 관리하는 환경 영역-->
<head th:replace="common/fragments/config :: ConfigFragment">
<title layout:title-pattern="$LAYOUT_TITLE : $CONTENT_TITLE">공통 타이틀</title>
</head>
<body>
<!--Header 영역을 참조합니다.-->
<header th:replace="common/fragments/header :: HeaderFragment"></header>
<!--Content 내용 영역을 참조합니다-->
<th:block layout:fragment="Content"></th:block>
<!--Footer 영역을 참조합니다.-->
<footer th:replace="common/fragments/footer :: FooterFragment"></footer>
</body>
</html>2.7. 본문 영역 만들기
<!DOCTYPE html>
<!-- Default Layout Import-->
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{common/layouts/defaultLayout}"
layout:fragment="Content"
>
<head>
<title>테스트 페이지 </title>
<!-- inline CSS 영역-->
<style th:inline="css" type="text/css">
body {
margin: 30px;
border: 1px solid red;
}
</style>
<!-- inline JS 영역-->
<script th:inline="javascript" type="text/javascript">
$(document).ready(() => {
alert("페이지가 시작됩니다.")
});
</script>
</head>
<body>
<div>
<h1>Content 영역입니다.</h1>
</div>
</body>
</html>2.8. Controller 메소드 추가
package com.adjh.multiflexapi.controller;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Slf4j
@Controller
public class MainController {
@GetMapping("/")
public String selectImageList(Model model) {
model.addAttribute("title", "");
return "pages/test/testPage";
}
}
응애 나 애기 개발자