search

thymeleaf_layout

hashtag
템플릿 레이아웃 1

템플릿에서 일부 코드 조각을 가지고 와서 사용했다면 코드 조각을 레이아웃에 넘겨서 사용하는 방법도 있다. 예를 들면 <head>에 공통으로 사용하는 css, javascript같은 공통 정보들을 한 곳에 모아두고 공통으로 사용하지만 각 페이지마다 필요한 정보를 더 추가해서 사용할 수 있다.

  • 컨트롤러

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

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

  • 렌더링 된 HTML

  • common_header(~{::title},~{::link})

    • 현재 페이지의 title 태그와 link 태그들을 전달한다.

hashtag
템플릿 레이아웃 2

<head>뿐만 아니라 HTML 전체에 적용할 수 있다.

  • 컨트롤러

  • layoutFile.html

  • layoutExtendMain.html

  • 렌더링 된 HTML

PreviouslayoutNextlink

Last updated