thymeleaf로 레이아웃 관리(fragment)

springboot

thymeleaf로 레이아웃 관리(fragment)

전주천둥새 2023. 5. 15. 16:13

1. thymeleaf - fragment

- fragments를 이용해서 레이아웃을 분리하고 확장 라이브러리를 이용하여 하나의 템플릿을 기준으로 끼워넣는 방식의 페이지 처리가 가능 >>> 모든 페이지마다 th:insert가 사용될 필요가 없음

>>> 반드시 dependency 태그 안쪽에 위치해야한다. 버전을 생략할 시 자동으로 최신버전으로 다운로드해준다.

- 프로젝트 내에 fragment폴더를 생성하여 각 부분의 html 파일 작성

- 분리된 fragments 파일을 하나로 합칠 layout 폴더 및 파일 생성

- head부분 작성

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
	<head th:fragment="headFragment">
		<meta charset="UTF-8">
		<title>ksmart43</title>
		
		<!-- thymeleaf 링크 표현 구문 @{} -->
		<link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
		
		<!-- 사용자 정의 css -->
		<th:block layout:fragment="customCss"></th:block>

		<!-- 사용자 정의 js -->
		<th:block layout:fragment="customJs"></th:block>
	</head>
</html>

>>> 확장라이브러리를 사용하기 때문에 html 부분에

xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout " 태그를 추가로 사용한다

- header 부분 작성

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<div id="header" th:fragment="headerFragment">
		head.html<br>
		상단메뉴<br>
		<a href="#">01회원가입</a>
		<a href="#">02회원목록</a>
		<a href="#">03상품등록</a>
		<a href="#">04상품목록</a>
	</div>
	
</html>

- leftmenu 부분 작성

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<div id="leftcolumn" th:fragment="leftmenuFragment">
		left.html <br><br>
		왼쪽메뉴
	</div>
</html>

- footer 부분 작성

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<div id="footer" th:fragment="footerFragment">
		footer.html<br>
		하단메뉴<br>
		063-717-1008-ksmart.or.kr 한국스마트정보교육원
		
	</div>
	
</html>

- contents 부분 작성

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	  layout:decorate="~{layout/default}">
	
	<!-- 사용자 정의 css -->
	<th:block layout:fragment="customCss">
	
	</th:block>

	<!-- 사용자 정의 js -->
	<th:block layout:fragment="customJs">
		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	</th:block>
	
	<!-- 사용자 정의 contents -->
	<th:block layout:fragment="customContents">
		<!-- $ : 모델의 값을 바인딩하는 구문 -->
		<!-- ${key} : 태그의 속성에서 값을 바인딩하는 구문 -->
		<h1 th:text="${title}"></h1>
		<!-- [[${key}]] : 인라인 스타일 -->
		[[${title}]]
		[[${member}]]
	</th:block>
</body>
</html>

- 통합 default 부분 작성

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:replace="fragments/head :: headFragment"></head>
<body>
	<div id="wrapper">
		<div th:replace="fragments/header :: headerFragment"></div>
		<div th:replace="fragments/leftmenu :: leftmenuFragment"></div>
		<div id="rightcolumn">
			<!-- 사용자 정의 contents -->
			<th:block layout:fragment="customContents"></th:block>
		</div>
		<div th:replace="fragments/footer :: footerFragment"></div>
		
	</div>
</body>
</html>

- 확인