thymeleaf template layout은 thymeleaf를 이용하여 공통 page를 fragment, layout형식으로 조립할 수 있는 template engine입니다.
thymeleaf template layout을 사용하는 간단한 예제 프로젝트를 진행해보도록 하겠습니다.
1. Maven dependency 및 프로젝트 구조
1) pom.xml
...
<version>2.2.2.RELEASE</version>
<!-- Spring Boot Version -->
...
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>
</dependencies>
...
2) 프로젝트 구조
2. header.html (공통 fragment)
<html lagn="ko"
xmlns:th="http://www.thymeleaf.org">
<!--headerFragment 선언-->
<div th:fragment="headerFragment">
<h1>HEADER</h1>
</div>
</html>3. footer.html (공통 fragment)
<html lagn="ko"
xmlns:th="http://www.thymeleaf.org">
<!--footerFragment 선언-->
<div th:fragment="footerFragment">
<h1>FOOTER</h1>
</div>
</html>4. config.html (공통 fragment)
<html lagn="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<!--configFragment 선언-->
<th:block th:fragment="configFragment">
<!-- 이 영역에 공통으로 사용할 css, js library를 선언한다. -->
<link rel="stylesheet" th:href="@{/css/common/common.css}" >
<script th:src="@{/js/common/common.js}"></script>
<!-- Content Page의 CSS fragment 삽입 -->
<th:block layout:fragment="css"></th:block>
<!-- Content Page의 script fragment 삽입 -->
<th:block layout:fragment="script"></th:block>
</th:block>
</html>- config fragment에 공통으로 사용할 css, js를 선언하고 Content Page의 css, js를 선언합니다.
- @{/js/common/common.js} 는 src/main/resources/static이 생략되어있습니다.
5. default_layout.html (Layout)
<!DOCTYPE html>
<html lagn="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8" />
<title>Bamdule</title>
<!-- config fragment 사용 -->
<th:block th:replace="fragment/config :: configFragment" ></th:block>
</head>
<body>
<!-- header fragment 사용 -->
<th:block th:replace="fragment/header :: headerFragment"></th:block>
<!--
content fragment 사용
현재 layout을 사용하는 content fragment의 내용을 삽입한다.
-->
<th:block layout:fragment="content"></th:block>
<!-- footer fragment 사용 -->
<th:block th:replace="fragment/footer :: footerFragment"> </th:block>
</body>
</html>- Layout은 fragment들이 조합된 html입니다.
- th:replace="frament경로 :: fragment이름" 속성은 해당 영역을 fragment로 치환하겠다는 의미입니다.
- layout:fragment="content"는 해당 layout을 사용하는 content의 내용을 불러오겠다는 의미입니다.
6. home.html (Content Page - fragment )
<!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"
layout:decorate="~{layouts/my-layout}">
<!-- index.html 고유 CSS 추가 -->
<th:block layout:fragment="css">
<link rel="stylesheet" th:href="@{/css/page/home.css}" >
</th:block>
<!-- index.html 고유 스크립트 추가 -->
<th:block layout:fragment="script">
<script th:src="@{/js/page/home.js}"></script>
</th:block>
<div layout:fragment="content">
<h1>content</h1>
</div>
</html>- 여기서 유심히 볼 코드는 layout:decorate="~{layouts/my-layout}" 입니다.
- layout:decorate="layout path" 속성을 입력해 layout을 사용할 수 있습니다.
- layout:fragment="content" 속성을 통해 content fragment를 선언합니다.
'IT > Spring' 카테고리의 다른 글
| [Spring Boot] Swagger 연동 및 설정 방법 (4) | 2020.01.13 |
|---|---|
| [Spring Boot] @Valid 어노테이션으로 Parameter 검증하기 (0) | 2020.01.10 |
| [Spring Boot] SpringBootServletInitalizer를 상속하는 이유 (0) | 2020.01.07 |
| [Spring Boot] @SpringBootApplication 이란? (0) | 2020.01.07 |
| [Spring Boot] Spring Boot 사용 및 Thymeleaf 연동 방법 (0) | 2020.01.06 |