Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

개발자되기 프로젝트

[Thymeleaf] Template layout 1 본문

인프런/[인프런] 스프링 MVC 2

[Thymeleaf] Template layout 1

Seung__ 2021. 9. 19. 15:35
  • fragment는 코드 조각을 가지고 와서 사용했다. 
  • 이번에는 코드 조각을 layout에 넘겨서 사용해보자.
  • 예를 들어서 <head>에 공통으로 사용하는 css, javascript같은 정보가 있는데,
  • 이런 공통 정보를 한 곳에 모아두고 공통으로 사용한다고 해보자.
  • 하지만 각 페이지마다 필요한 정보를 더 추가해서 사용하는 상황을 가정해보자.
  • base에다가 layoutmain 정보를 심어서 <head>를 base로 대체하는 상황.

 

1. controller

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

 

 

2. layoutMain.html

  • common_header(~{::title},~{::link}) 이 부분이 핵심
  • ::title 은 현재 페이지의 title 태그들을 전달한다.
  • ::link 는 현재 페이지의 link 태그들을 전달한다.
<!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>

 

 

3. base.html

  • layoutMain에서 title 태그와  link태그가 넘어온다.
  • 레이아웃 타이틀로 넘어온 title 태그로 replace.
  • link의 경우 th:block으로 지정했다. 넘어온 link tag를 가지고 th:block을 대체한다.
<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>

 

4. 결과

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

 

 

5. GitHub : 210919 layout 1

 

GitHub - bsh6463/Thymeleaf

Contribute to bsh6463/Thymeleaf development by creating an account on GitHub.

github.com

 

'인프런 > [인프런] 스프링 MVC 2' 카테고리의 다른 글

[Thymeleaf+Spring] 타임리프, 스프링 통합  (0) 2021.09.20
[Thymeleaf] Template Layout 2  (0) 2021.09.19
[Thymeleaf] 템플릿 조각  (0) 2021.09.19
[Thymeleaf] JavaScript inline  (0) 2021.09.19
[Thymeleaf] block, <ht:block>  (0) 2021.09.19
'인프런/[인프런] 스프링 MVC 2' Related Articles more
Comments