Programming/Spring Boot

[Spring Boot] thymeleaf-layout-dialect 적용하기

JIHYEON LEE 2021. 12. 28. 21:32

thymeleaf

view template engine

서버상에서 동작하지 않아도 됨 (Natural Template)

순수 HTML 구조를 유지

Spring에서도 공식적으로 thymeleaf 사용을 권장하고 있음

 

 

 

thymeleaf-layout-dialect

thymleaf에서 제공하는 layout 라이브러리

 

 

 

spring boot에 thymeleaf-layout-dialect 적용하기

1. gradle dependency 추가

     - build.gradle

dependencies {
    implementation 'org.thymeleaf.extras:thymeleaf-extras-springsecurity5'
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
    implementation('nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect')
}

 

 

2. dafult layout 잡아주기

     - layout.html

<!DOCTYPE html>
<html lang="ko"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  <title>Surfmie</title>

  <!-- Favicon-->
  <link rel="icon" type="/image/x-icon" href="img/surfmiefavicon.ico" />

  <!-- 공통으로 쓰는 css 파일 -->
  <link href="/css/styles.css" rel="stylesheet" />

  <!-- 공통으로 쓰는 script 파일 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="/js/scripts.js"></script>
</head>

<body>
  <header th:replace="fragments/header::headerFragment"></header>
  <div layout:fragment="content"></div>
  <footer th:replace="fragments/footer::footerFragment"></footer>
</body>
</html>

xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"

thymeleaf를 사용할 수 있게 import 시켜준다

 

th:replace="fragments/header::headerFragment"

th:replace="fragments/footer::footerFragment"

파일경로::fragment 선택자

해당 경로에 있는 파일을 찾아 해당 fragment를 불러온다

 

layout:fragment="content"

해당 부분을 content라는 이름의 fragment라고 선언

 

layout이 적용될 모든 html 파일에 layout:decorate="~{layout/layout}"을 추가함

~{layout/layout}은 해당 layout.html 파일의 경로를 나타냄

참고: 아래에 작성될 denied.html의 4번째 줄

 

 

3. header와 footer 작성하기

     - header.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.w3.org/1999/xhtml">
  <header th:fragment="headerFragment">
  </header>
</html>

header.html의 th:fragment="headerFragment" 안에 있는 내용이 layout.html의 th:replace="fragments/header::headerFragment"에 들어감

 

xmlns:sec="http://www.w3.org/1999/xhtml"

spring security 사용을 위한 xmlns 속성 추가 예시: sec:authorize="isAnonymous()"

 

     - footer.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <footer th:fragment="footerFragment" class="py-5 bg-dark" style="">
  </footer>
</html>

footer.html의 th:fragment="footerFragment" 안에 있는 내용이 layout.html의 th:replace="fragments/footer::footerFragment"에 들어감

 

 

4. 각 페이지마다 content fragment에 들어갈 내용 작성하기

     - denied.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layouts/layout}">
<head>
</head>
<body>
<div class="container px-4 px-lg-5" layout:fragment="content">
    <div class="row gx-4 gx-lg-5 align-items-center my-5">
       <div class="col-lg-12">
            <h1 class="font-weight-light">접근 불가 페이지입니다.</h1>
        </div>
    </div>
</div>
</body>
</html>

denied.html의 layout:fragment="content" 안에 있는 내용이 layout.html의 layout:fragment="content" 에 들어감

 

 

 

 

 

reference

     -  [Thymeleaf] Thymeleaf란

        https://maenco.tistory.com/entry/Thymeleaf-Thymeleaf란

     -  JPA, Hibernate, 그리고 Spring Data JPA의 차이점

        https://suhwan.dev/2019/02/24/jpa-vs-hibernate-vs-spring-data-jpa/

     -  Thymeleaf) 스프링 시큐리티 태그속성

        https://velog.io/@nestour95/Thymeleaf-스프링-시큐리티-태그속성