목표
타임리프(Thymeleaf)의 layout을 설정합니다.
1. Thymeleaf Dependencies 추가
build.gradle안에 dependencies에 아래의 코드를 추가하고 Rebuild를 합니다.
implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'
External Libraries에서 아래의 라이브러리가 추가되었는지 확인합니다.
2. templates 설정
아래와 같이 templates에 폴더와 파일을 만들어 줍니다.
1) common
common폴더에 scripts.html과 styles.html는 공통적으로 사용하는 css, js를 선언하는 파일입니다. 예시로는 부트스트랩 css, js가 있습니다.
scripts.html
공통 scriptstyles.html
공통 style2) template
template폴더에는 config.html, header.html, footer,html과 같이 모든 화면에 들어가는 html파일입니다.
config.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<th:block th:fragment="configFragment">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<!-- 공통 css -->
<th:block th:replace="common/styles"></th:block>
<!-- 컨텐츠 페이지의 css -->
<th:block layout:fragment="css"></th:block>
<!-- 공통 js -->
<th:block th:replace="common/scripts"></th:block>
<!-- 컨텐츠 페이지의 js -->
<th:block layout:fragment="script"></th:block>
</head>
</th:block>
</html>footer.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div th:fragment="footerFragment" class="container">
<footer>
<div>
푸터영역
</div>
</footer>
</div>
</html>header.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<nav th:fragment="headerFragment">
<div>
헤더영역
</div>
</nav>3) layout
default_layout
<!DOCTYPE html>
<html lang="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<!-- config -->
<th:block th:replace="fragment/config :: configFragment"></th:block>
<!-- header -->
<body>
<th:block th:replace="fragment/header :: headerFragment"></th:block>
<div class="container">
<div>
<!-- content -->
<th:block layout:fragment="content"></th:block>
</div>
</div>
<!-- footer -->
<th:block th:replace="fragment/footer :: footerFragment"></th:block>
</body>
</html>4) content
content.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="layout/default_layout">
<!-- 현재 화면에서만 사용하는 css -->
<!--<th:block layout:fragment="css">-->
<!-- <link rel="stylesheet" type="text/css" href="main.css"/>-->
<!--</th:block>-->
<!-- 현재 화면에서만 사용하는 js -->
<!--<th:block layout:fragment="script">-->
<!-- <script src="main.js"></script>-->
<!--</th:block>-->
<div>
<th:block layout:fragment="content">
contents 영역
</th:block>
</div>
</html>각 화면마다 전에 생성한 layout파일을 layout:decorate를 사용하여 참조해서 content영역을 바꿔서 끼워줍니다.
5) main
main
<!DOCTYPE html>
<html lang="ko">
<!-- config -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", inital-scale="1">
<title>emotion application</title>
<!-- 공통 css -->
<script>
</script>
<!-- 컨텐츠 페이지의 css -->
<!-- 공통 js -->
<script>
</script>
<!-- 컨텐츠 페이지의 js -->
</head>
<!-- header -->
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<nav>
<div>
헤더 영역
</div>
</nav>
<div class="container">
<div>
<!-- content -->
<div class="content">
메인 테스트 입니다.
</div>
</div>
</div>
<!-- footer -->
<div class="container">
<footer>
<div>
푸터 영역
</div>
</footer>
</div>
</body>
</html>3. MainController.java
MainController.java를 만들어주고 아래의 코드를 작성합니다.
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
@RequiredArgsConstructor
public class MainController {
@GetMapping("/main")
public String main() {
return "main/main";
}
}4. 테스트
개인이 공부한걸 작성하는 블로그입니다..