[SpringBoot] Thymeleaf layout dialect (thymeleaf 레이아웃 적용하기)

728x90

thymeleaf layout

SpringBoot에 thymeleaf 템플릿 엔진 레이아웃을 적용해보겠습니다.

[SpringBoot] Thymeleaf 설정 및 Thymeleaf HTML Code(th element) 사용법

우선 pom.xml에 dependency를 추가해줍니다.

<dependency>
    <groupId>nz.net.ultraq.thymeleaf</groupId>
    <artifactId>thymeleaf-layout-dialect</artifactId>
    <version>2.4.1</version>
</dependency>

이어서 templateEngine에 layout dialect를 추가해줍니다.

@Bean
@Description("Thymeleaf Template Engine")
public SpringTemplateEngine templateEngine() {
    SpringTemplateEngine templateEngine = new SpringTemplateEngine();
    templateEngine.setTemplateResolver(templateResolver());
    templateEngine.addDialect(new LayoutDialect());	// layout 설정
    return templateEngine;
}

Layout 구조

layout/default.html : layout의 기본 틀이 되는 html
layout/fragment/head.html : css 및 js 링크를 관리하는 head
layout/fragment/header.html : body의 머리
content.html : body의 몸통(실질적인 핵심)
layout/fragment/footer.html : body의 꼬리

layout/default.html

layout의 기본 틀을 먼저 만들겠습니다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    th:with="lang=${#locale.language}" th:lang="${lang}">

    <!-- [head] 영역 시작 -->
    <head>
        <th:block th:insert="layout/head :: headFragment"></th:block>
        
    </head>
    <!-- [head] 영역 끝 -->

    <!-- [body] 영역 시작 -->
    <body>
    
        <!-- [header] 영역 시작 -->
        <header th:replace="layout/header :: headerFragment"></header>
        <!-- [header] 영역 끝 -->
        
        <!-- [content] 영역 시작 -->
        <div layout:fragment="custom-content"></div>
        <!-- [content] 영역 끝 -->
        
        <!-- [footer] 영역 시작 -->
        <footer th:replace="layout/footer :: footerFragment"></footer>
        <!-- [footer] 영역 끝 -->
    
    </body>
    <!-- [body] 영역 끝 -->
</html>

layout/fragment/head.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:fragment="headFragment">
    <!-- 공통 css, js 추가 -->
    <link rel="stylesheet" href="css/commons.css" />
    <script type="text/javascript" src="js/commons.js"></script>
</head>

layout/fragment/header.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<header th:fragment="headerFragment">
	this area is header
</header>

layout/fragment/footer.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<footer th:fragment="footerFragment">
	this area is footer
</footer>

content.html

layout의 공통 영역을 설정 완료했습니다. 이제 layout 틀에 content 내용을 넣어보겠습니다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/default}"> <!-- default layout 사용 -->

<head>
<!-- 페이지의 개별적인 css, js 설정 영역 -->
<!-- thymeleaf layout dialect가 content페이지의 head태그를 layout의 head태그에 자동으로 추가해준다. -->
    <title>content1</title>
    <link rel="stylesheet" href="css/content1.css" />
    <script type="text/javascript" src="js/content1.js"></script>
</head>

<!-- 페이지의 실제 content 내용 -->
<div layout:fragment="custom-content">
	this area is content1
</div>
</html>

controller에서 content.html을 호출하면 아래와 같은 html이 출력됩니다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    th:with="lang=${#locale.language}" th:lang="${lang}">

    <!-- [head] 영역 시작 -->
    <head>
        <!-- 공통 css, js 추가 -->
        <link rel="stylesheet" href="css/commons.css" />
        <script type="text/javascript" src="js/commons.js"></script>

<!-- 페이지의 개별적인 css, js 설정 영역 -->
<!-- thymeleaf layout dialect가 content페이지의 head태그를 layout의 head태그에 자동으로 추가해준다. -->
        <title>content1</title>
        <link rel="stylesheet" href="css/content1.css" />
        <script type="text/javascript" src="js/content1.js"></script>
    </head>
    <!-- [head] 영역 끝 -->

    <!-- [body] 영역 시작 -->
    <body>
    
        <!-- [header] 영역 시작 -->
        <header>
            this area is header
        </header>
        <!-- [header] 영역 끝 -->
        
        <!-- [content] 영역 시작 -->
        <div>
            this area is content1
        </div>
        <!-- [content] 영역 끝 -->
        
        <!-- [footer] 영역 시작 -->
        <footer>
            this area is footer
        </footer>
        <!-- [footer] 영역 끝 -->
    
    </body>
    <!-- [body] 영역 끝 -->
</html>

[Reference]

https://www.thymeleaf.org/doc/articles/layouts.html

www.baeldung.com/thymeleaf-spring-layouts

github.com/ultraq/thymeleaf-layout-dialect

728x90