코드 조각을 레이아웃에 넘겨서 사용하는 방법에 대해서 공부해 보았다.
<base.html>
<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.html>
<!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>들이 포함되었다.
위에서 다룬 개념을 <head>정도에만 적용하는게 아니라 <html>전체에 적용 가능하다.
<layoutExtendMain.html>
<!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>
<layoutFile.html>
<!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.html이 현재 페이지인데, <html>자체를 th:replace를 이용해서 변경하는 것을 확인 할 수 있다.
결국 laoutFile.html에 필요한 내용을 전달하면서 <html>자체를 layoutFile.html로 변경한다.
'BackEnd > Thymeleaf' 카테고리의 다른 글
| 체크 박스 - 단일(1) (0) | 2024.07.22 |
|---|---|
| 타임리프-입력 폼 처리 (0) | 2024.07.22 |
| 타임리프 - 템플릿 조각 (0) | 2024.07.21 |
| 타임리프 - 블록 (0) | 2024.07.19 |
| 타임리프 - 조건문 (0) | 2024.07.19 |