스프링/4. 스프링 MVC-2

15. 템플릿 레이아웃

sdafdq 2023. 8. 25. 20:56

템플릿 조각은 조각을 불러와 그대로 썼다. 

이거는 이제 아예 태그를 그대로 넣는다고 보면 된다.

 

@GetMapping("/layout")
public String  layout(){
    return "template/layout/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>

얘는 head에서 

"경로 :: 레이아웃(내가 구현해놓은 레이아웃에서 변경하고 싶은 부분)"

하면

 

 

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

이 구현해 놓은 header 조각에서 title, link를 저렇게 아래쪽 변수로 써서 추가하는 거임.

 

 

 

<!DOCTYPE html>
<html>
<head>
  <title>메인 타이틀</title>
  <!-- 공통 -->
  <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">
  </head>
<body>
메인 컨텐츠
</body>
</html>

결과.

헤드 바뀜.

 

그러니까 구조가

A라는 템플릿에서 B라는 템플릿에 있는 레이아웃을 가져오고 싶으면

A가 

<태그명 th:replace="경로 :: fragment명(~{넣을 자식 태그})">

이렇게 하면 

 

저 fragment에서 인자로 받은 자식태그가 하나만 있어야 하는거라면 교체되고, 아니면 추가가 됨.

 

그냥 템플릿 조각에서 좀 크게 확장된 느낌인 듯