'decorator'에 해당되는 글 1건

  1. 2020.06.11 [Thymeleaf] layout 적용 하기
Framework2020. 6. 11. 14:24

Thymeleaf 를 이요한 layout 적용 하기

내용이 들어갈 파일

- contents.html

레이아웃 파일

- layout.html

 

1. pom.xml 에 dependency 추가

		<dependency>
			<groupId>nz.net.ultraq.thymeleaf</groupId>
			<artifactId>thymeleaf-layout-dialect</artifactId>
		</dependency>	

 

2. layout.html

<!DOCTYPE html>
<html lang="ko" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
	<meta charset="UTF-8">
	<title>Thymeleaf Layout Test</title>
</head>
<body>
	<div id="header"> 헤더가 들어갈 영역 </div>
    <div id="contents"> 
    	
        <!-- Thymeleaf Content 가 들어갈 영역 -->
        <th:block layout:fragment="content"></th:block>
    
    </div>
</body>
</html>

 

3. contensts.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="ko"
	  xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
  	  layout:decorator="layout">
<head>
	<meta charset="UTF-8">
</head>  	  
  	  
<body>
	<th:block layout:fragment="content">
    
    	본문(콘텐츠) 영역
        
    </th>    
</body>
</html>

 

4. 테스트

contents.html 을 호출 하면 layout.html 이 적용되어 화면에 표시된다.

Posted by 비니미니파파