타임 리프 - 기본 기능 (4)

쉬운 목차

템플릿 조각

웹 페이지를 개발할 때 많은 공통 영역이 있습니다. 예를 들어 상단 영역, 하단 영역, 왼쪽 카테고리 등 여러 페이지에서 함께 사용되는 영역이 있습니다. 코드의 이 부분을 복사하여 사용하면 변경 시 모든 페이지를 수정해야 하므로 상당히 비효율적입니다. Time Leap은 이러한 문제를 해결하기 위해 템플릿 조각 및 레이아웃 기능을 지원합니다.

@RequestMapping("/template")
public class TemplateController {
 @GetMapping("/fragment")
 public String template() {
 return "template/fragment/fragmentMain";
 }
}

바닥글.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>

템플릿/프래그먼트/프래그먼트메인

<!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>

( 결과 )

코드와 결과를 비교하여 이해해 봅시다.

템플릿 레이아웃 1

이전에는 일부 코드 스니펫을 가져와서 사용했지만 이번에는 개념을 확장하여 코드 스니펫을 레이아웃에 전달하고 사용하는 방법을 알아보겠습니다.

예를 들어 css, javascript 등에서 흔히 사용하는 정보가 있습니다. .
정보는 한곳에 모아서 공통으로 사용하지만 페이지마다 추가 정보를 추가하여 사용합니다.
원하는 경우 다음과 같이 사용할 수 있습니다.

@GetMapping("/layout")
public String layout() {
 return "template/layout/layoutMain";
}

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="http://beencle.m/@{/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="http://beencle.m/@{/css/bootstrap.min.css}">
 <link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}">
</head>
<body>
메인 컨텐츠
</body>
</html>

( 결과 )

<!DOCTYPE html>
<html>
<head>
<title>메인 타이틀</title>
<!-- 공통 -->
<link rel="stylesheet" type="text/css" media="all" href="http://beencle.css/awesomeapp.css">
<link rel="shortcut icon" href="http://beencle.images/favicon.ico">
<script type="text/javascript" src="/sh/scripts/codebase.js"></script>
<!-- 추가 -->
<link rel="stylesheet" href="http://beencle.css/bootstrap.min.css">
<link rel="stylesheet" href="http://beencle.themes/smoothness/jquery-ui.css">
</head>
<body>
메인 컨텐츠
</body>
</html>

common_header(~{::title},~{::link}) 이것이 키입니다.

::title은 현재 페이지의 제목 태그를 전달합니다.
::link는 현재 페이지의 링크 태그를 전달합니다.

메인 타이틀에서 전달한 부분으로 교체합니다. 공통 부분은 그대로 유지되고 추가 부분에는 전달된 부분이 포함되어 있음을 알 수 있습니다.

템플릿 레이아웃 2

앞에서 설명한 개념은 다음에만 적용할 수 있습니다. 뿐만 아니라 전체 .

@GetMapping("/layoutExtend")
public String layoutExtends() {
 return "template/layoutExtend/layoutExtendMain";
}

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

<!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>

layoutFile.html을 보면 기본 레이아웃이 있고 th:fragment 속성이 다음과 같이 정의되어 있습니다. . 이 레이아웃 파일을 기반으로 하고 필요한 내용을 전달하여 부분적으로 변경하는 것으로 이해할 수 있습니다.

layoutExtendMain.html은 현재 페이지이며 자체는 th:replace 를 사용하여 변경됩니다.

결국, 자신은 layoutFile.html로 필요한 내용을 전달하면서 layoutFile.html로 변경됩니다.