728x90
반응형
- headers, footers, menus 등 공통으로 사용할 다른 템플릿 파일의 코드 조각들을 재사용.
- 이를 사용하기 위해서는 th:fragment="NAME" 속성에 이름을 명시하면 템플릿 조각이 된다.
- 호출할 때는 크게 th:insert="~{경로 포함된 파일명 :: 파일명에 정의된 속성명[(파라미터 목록)]}" 으로 호출해서 사용
- 예) th:insert="~{teamplate/fragments/header :: common_header('PARAM1', 'PARAM2')}
/template/base.html
<head th:fragment="common_header(title,links)">
<title th:replace="${title}">The awesome application</title>
<!-- Common styles and scripts -->
<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>
<!--/* Per-page placeholder for additional links */-->
<th:block th:replace="${links}" />
</head>
- 위의 코드 조각을 사용할 템플릿 파일에서는 다음과 같이 하면 된다.
<head th:replace="base :: common_header(~{::title},~{::link})">
<title>Awesome - Main</title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}">
</head>
- 단순표현식
- ~{...} 를 사용하는 것이 원칙이지만 코드 단순화를 위해 생략할 수 있음
<head th:replace="~{frags/base :: common_header(~{::title},~{::link})}"> <head th:replace="frags/base :: common_header(~{::title},~{::link})"> 위 두 코드는 동일하게 해석된다
- th:insert vs th:replace
- th:insert : 호출한 태그 안에 템플릿 조각을 집어 넣는다. div 영역 안에 템플릿 조각이 들어가 있다
- th:replace : 호출한 태그 자체를 템플릿 조각으로 대체한다. div 영역이 템플릿 조각의
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <body> <div th:fragment="copy"> © 2011 The Good Thymes Virtual Grocery </div> </body> </html> ------------------------ 위 코드를 다음과 같이 호출 <body> <div th:insert="footer :: copy"></div> <div th:replace="footer :: copy"></div> </body> ------------------------ 아래와 같은 결과가 나온다 <body> <div> <footer> © 2011 The Good Thymes Virtual Grocery </footer> </div> <footer> © 2011 The Good Thymes Virtual Grocery </footer> </body>
728x90