이전에는 일부 코드 조각을 가지고와서 사용했다면, 이번에는 개념을 더 확장해서 코드 조각을 레이아웃에 넘겨서 사용하는 방법에 대해서 알아봅시다. 아예 나의 코드 조각 일부를 어떤 레이아웃에 넘겨버리는 것입니다. 그래서 전체를 완성시킵니다.
말로는 이해하기 힘듭니다. 코드로 봅시다.
예를 들어서 <head> 에 공통으로 사용하는 css , javascript 같은 정보들이 있는데, 이러한 공통 정보들을 한 곳에 모아두고, 공통으로 사용하지만, 각 페이지마다 필요한 정보를 더 추가해서 사용하고 싶다면 다음과 같이 사용하면 됩니다.
쉽게 말해서 공통으로 head에 관한 레이아웃이 있다면 여기에다가 내 페이지의 정보를 추가하는 것입니다. 단순히 문자 개념이 아니라 태그 자체를 넘기고 싶은 것입니다.
큰 모양(레이아웃)이 있다면 내 코드 일부를 모양에 맞춰서 넣는 것입니다. 템플릿 조각에서는 내 코드에 조각을 가져와서 사용했다면 지금은 내 코드를 레이아웃에 넣고 만들어진 것을 가져오는 것입니다.
템플릿 조각에서 봤던 파라미터를 사용해서 넘기는 것과 비슷합니다.
사실 말로 이해하기 힘듭니다. 코드를 보면 무슨 말인지 이해가 됩니다.
package hello.thymeleaf.basic;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping("/template")
public class TemplateController {
...
@GetMapping("/layout")
public String layout() {
return "template/layout/layoutMain";
}
}
<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>
base.html는 전체 사이트가 공통으로 사용하는 모양이라고 보면 됩니다.