환경
- Spring boot 2.7.2
- open JDK 1.8
- InteliJ
- MacOS
dependency 추가
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation group: 'nz.net.ultraq.thymeleaf', name: 'thymeleaf-layout-dialect', version: '2.4.1'
spring-boot-starter-thymeleaf : thymleaf 뷰 템플릿 엔진을 사용하기 위한 기본적인 라이브러리
thymeleaf=layout-dialect : thymeleaf를 이용해서 layout을 만들기 위해 추가적으로 사용되는 라이브러리
Bean등록
@Configuration
public class LayoutConfig {
@Bean
public LayoutDialect layoutDialect(){
return new LayoutDialect();
}
}
사용법
1. 고정적인 head, header, footer 영역은 th:replace="fragments/head :: headFragment" 를 사용해서 정의하자.
:: 앞은 경로를, :: 뒤는 구분자를 의미한다.
2. html 태그에 xmlns:th="http://www.thymeleaf.ofg" 네임스페이스를 작성해주어야 IDE가 타임리프 문법에 error를 뿌리지 않는다. 또한, layout의 틀을 만들때는 꼭 xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" 네임스페이스를 적어주어야 한다! (layout의 틀임을 알려주는 격)
Layout 구조
- layout/layout.html : layout의 기본 틀이되는 html
- layout/fragments/head.html : css관리
- layout/fragments/script.html : script 관리
- layout/fragments/top.html : body의 머리
- layout/fragments/footer.html : body의 꼬리
- layout/fragments/sidebar.html : 사이드메뉴
- content : body의 몸통
Layout.html
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<!-- 공통 헤드-->
<th:block th:replace="/layout/fragments/head :: headFragment"></th:block>
<body id="page-top">
<div id="wrapper">
<!-- 사이드바-->
<th:block th:replace="/layout/fragments/sidebar :: sidebarFragment"></th:block>
<div id="content-wrapper" class="d-flex flex-column">
<div id="content">
<!-- 상단바-->
<th:block th:replace="/layout/fragments/top :: topbarFragment"></th:block>
<!-- 본문-->
<th:block layout:fragment="content"></th:block>
</div>
<!-- 공통 하단-->
<th:block th:replace="/layout/fragments/footer :: footerFragment"></th:block>
</div>
</div>
<!-- 공통 스크립트-->
<th:block th:replace="/layout/fragments/script :: scriptFragment"></th:block>
</body>
</html>
footer.html
<!DOCTYPE html>
<html lagn="ko" xmlns:th="http://www.thymeleaf.org">
<!-- Footer -->
<th:block th:fragment="footerFragment">
<footer class="sticky-footer bg-white">
.... 하단(footer) 코드 작성
</footer>
</th:block>
</html>
head.html
<!DOCTYPE html>
<html lagn="ko" xmlns:th="http://www.thymeleaf.org">
<!-- Head -->
<th:block th:fragment="headFragment">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
.... head 태그 코드 작성
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet" />
<link th:href="@{/bootstrap/vendor/fontawesome-free/css/all.min.css}" rel="stylesheet" type="text/css" />
<link th:href="@{/bootstrap/css/sb-admin-2.min.css}" rel="stylesheet" />
</head>
</th:block>
</html>
script.html
<!DOCTYPE html>
<html lagn="ko" xmlns:th="http://www.thymeleaf.org">
<!-- 공통으로 쓰이는 script 파일을넣는다.-->
<th:block th:fragment="scriptFragment">
<!-- Bootstrap core JavaScript-->
<script th:src="@{/bootstrap/vendor/jquery/jquery.min.js}"></script>
<script th:src="@{/bootstrap/vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>
.... 스크립트 코드 작성
<!-- Page level custom scripts -->
<script th:src="@{/bootstrap/js/demo/chart-area-demo.js}"></script>
<script th:src="@{/bootstrap/js/demo/chart-pie-demo.js}"></script>
</th:block>
</html>
sidebar.html
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="sidebarFragment">
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
.... 사이드바 코드 작성
</ul>
</th:block>
</html>
top.html
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
<th:block th:fragment="topbarFragment">
<!-- Topbar -->
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
.... 상단 코드 작성
</nav>
</th:block>
</html>
결과
