728x90
반응형
Thymeleaf layout
머리글, 바닥글, 메뉴 등의 공통 페이지 구성요소를 공유하여, 페이지의 컨텐츠에 집중할 수 있습니다.
| 개발 환경 Spring Boot : 2.5.2 Java 11 Thymeleaf Gradle |
1. Dependency 추가
Gradle의 경우
dependencies {
implementation group: 'com.github.zhanhb', name: 'thymeleaf-layout-dialect', version: '2.4.1'
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'org.springframework.boot:spring-boot-starter-web'
}
Maven의 경우
<dependency>
<groupId>com.github.zhanhb</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
<version>2.4.1</version>
</dependency>
필독!!
Java 11 이상 사용시에는 groovy 관련 된 것을 제거한
implementation group: 'com.github.zhanhb', name: 'thymeleaf-layout-dialect', version: '2.4.1'
을 사용한다. (3.0.0은 X)
JDK 1.8 이하를 사용하는 경우
implementation group: 'nz.net.ultraq.thymeleaf', name: 'thymeleaf-layout-dialect', version: '2.4.1'
을 사용한다.
2. 레이아웃 구성
상단(Header), 하단(Footer)은 모든 페이지에서 공통으로 사용하며, 본문(Contents)은 각 페이지 마다 변경한다.
3. 파일 생성
다음과 같이 templates 패키지 내에 fragments 패키지와 html 파일을 생성한다.
config, header, footer는 레이아웃에서 공통으로 사용할 구성요소이며
layout은 위 프레그먼트들을 어떻게 조합할지 나타낸 레이아웃이다.
4. config.html
공통으로 사용할 css, js 선언
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="configFragment">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"/>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<link rel="stylesheet" th:href="@{/css/boardstyle.css}"/>
</head>
</th:block>
</html>
5. header.html
페이지 상단
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<header th:fragment="headerFragment">
<div>
<h2>Header</h2>
</div>
</header>
</html>
5. footer.html
페이지 하단
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<footer th:fragment="footerFragment">
<div>
<h2>Footer</h2>
</div>
</footer>
</html>
6. layout.html
fragments들의 조합
<html lang="en" 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">
<title>Title</title>
<th:block th:replace="board2/fragments/config :: configFragment"> </th:block>
</head>
<body>
<!-- top -->
<header th:replace="board2/fragments/header :: headerFragment"></header>
<!-- content -->
<div layout:fragment="content"></div>
<!-- footer -->
<footer th:replace="board2/fragments/footer :: footerFragment"></footer>
</body>
</html>
7. new.html
페이지마다 변경되는 콘텐츠
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{board2/fragments/layout}">
<div layout:fragment="content">
<div id="box">
hello world !!
</div>
</div>
</html>
8. Controller.java
Controller를 통해 페이지 보여주기
@Controller
public class Board2Controller {
@GetMapping("/")
public String index() {
return "board2/new";
}
}
참고사이트:
https://dev-jwblog.tistory.com/34
https://www.hanumoka.net/2020/05/21/springBoot-20200521-springboot-thymeleaf-layout-dialect/
728x90
반응형
'Web 개발 > 게시판 만들기' 카테고리의 다른 글
| [Spring Security] 로그인 기능 구현 (1) Spring Security Authentication (0) | 2022.08.25 |
|---|---|
| [Thymeleaf/Bootstrap5] 게시판 댓글 조회 및 수정 화면 구현 - 실패 (0) | 2022.08.24 |
| [Spring Boot/JPA] 게시판을 통해 MVC, CRUD 연습하기 5 - 삭제 (0) | 2021.06.28 |
| [Spring Boot/JPA] 게시판을 통해 MVC, CRUD 연습하기 4 - 수정 (0) | 2021.06.28 |
| [Spring Boot/JPA] 게시판을 통해 MVC, CRUD 연습하기 3 - 상세보기 (0) | 2021.02.16 |
