타임리프 - 템플릿

meluu_·2024년 1월 14일

스프링

목록 보기

17/27

✔️ 템플릿 조각

웹 페이지 개발 시 공통 영역을 효율적으로 변경하기 위해 템플릿을 조각화한다.

<!-- template/fragment/footer.html-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
  
<footer th:fragment="copy">
 푸터 자리 입니다.
</footer>
  
<footer th:fragment="copyParam (param1, param2)">
	<p>파라미터 자리 입니다.</p>
	<p th:text="${param1}"></p>
	<p th:text="${param2}"></p>
</footer>
  
</body>
</html>

th:fragment 가 있는 태그는 다른 곳에 포함되는 코드 조각

<!-- fragmentMain.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<h1>부분 포함</h1>
	<h2>부분 포함 insert</h2>
		<div th:insert="~{template/fragment/footer :: copy}"></div>
        
	<h2>부분 포함 replace</h2>
		<div th:replace="~{template/fragment/footer :: copy}"></div>
        
	<h2>부분 포함 단순 표현식</h2>
		<div th:replace="template/fragment/footer :: copy"></div>
        
	<h1>파라미터 사용</h1>
		<div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"></
div>
</body>
</html>

결과

<body>
<h1>부분 포함</h1>
<h2>부분 포함 insert</h2>
<div><footer>
    푸터 자리 입니다.
</footer></div>

<h2>부분 포함 replace</h2>
<footer>
    푸터 자리 입니다.
</footer>

<h2>부분 포함 단순 표현식</h2>
<footer>
    푸터 자리 입니다.
</footer>

<h1>파라미터 사용</h1>
<footer>
    <p>파라미터 자리 입니다.</p>
    <p>데이터1</p>
    <p>데이터2</p>
</footer></body>

~{템플릿 경로} :: "조각"을 불러와 사용
insert : 현재 태그 내부에 추가
템플릿 조각을 사용하는 코드가 단순하면 ~{}이 부분을 생략가능
Replace : 현재 태그를 대체
파라미터 넘기기 가능

✔️ 템플릿 레이아웃 1

코드 조각을 레이아웃에 넘겨서 사용
<head> 의 공통으로 사용하는 css , javascript 같은 공통 정보들을 모아서 사용 + 각 페이지 마다 필요한 정보를 추가 사용

base

<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title,links)">
 	<title th:replace="${title}">레이아웃 타이틀</title>
 	<!-- 공통 -->
	<link rel="stylesheet" type="text/css" media="all" th:href="@{/css/
awesomeapp.css}">
	<link rel="shortcut icon" th:href="@{/images/favicon.ico}">
 
	<script type="text/javascript" th:src="@{/sh/scripts/codebase.js}"></script>
 
 <!-- 추가 -->
 <th:block th:replace="${links}" />
</head>

layoutMain

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="template/layout/base :: common_header(~{::title},~{::link})">
 <title>메인 타이틀</title>
 <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
 <link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}">
</head>
<body>
메인 컨텐츠
</body>
</html>

결과

<!-- 공통 -->
<link rel="stylesheet" type="text/css" media="all" href="/css/awesomeapp.css">
<link rel="shortcut icon" href="/images/favicon.ico">
<script type="text/javascript" src="/sh/scripts/codebase.js"></script>

<!-- 추가 -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/themes/smoothness/jquery-ui.css">

common_header(~{::title},~{::link})
- ::title : 현재 페이지의 title 태그들을 전달
- ::link : 현재 페이지의 link 태그들을 전달

✔️ 템플릿 레이아웃 2

<html> 전체에 적용

layoutFile

<!DOCTYPE html>
<html th:fragment="layout (title, content)" xmlns:th="http://www.thymeleaf.org">
<head>
	<title th:replace="${title}">레이아웃 타이틀</title>
</head>
<body>
	<h1>레이아웃 H1</h1>
		<div th:replace="${content}">
			<p>레이아웃 컨텐츠</p>
		</div>
	<footer>
		레이아웃 푸터
	</footer>
</body>
</html>

layoutExtendMain

<!DOCTYPE html>
<html th:replace="~{template/layoutExtend/layoutFile :: layout(~{::title},
~{::section})}"
xmlns:th="http://www.thymeleaf.org">
<head>
	<title>메인 페이지 타이틀</title>
</head>
<body>
	<section>
		<p>메인 페이지 컨텐츠</p>
		<div>메인 페이지 포함 내용</div>
	</section>
</body>
</html>

결과

<!DOCTYPE html>
<html>
<head>
	<title>메인 페이지 타이틀</title>
</head>
<body>
	<h1>레이아웃 H1</h1>
	<section>
		<p>메인 페이지 컨텐츠</p>
		<div>메인 페이지 포함 내용</div>
	</section>
	<footer>
		레이아웃 푸터
	</footer>
</body>
</html>