Project · Etc/Project

[ Thymeleaf ] 프로젝트에서 '타임리프 템플릿' 레이아웃 사용 방법

jimin-log 2023. 4. 26. 17:30

 

Thymeleaf 

사용자 화면단을 타임리프를 사용할 경우 레이아웃을 분리하여 작업할 수 있다. 

header, footer를 분리하여 공통된 영역은 한 곳에서 관리 할 수 있도록 설정 가능하다.

추후에 내용이 나 추가 사항이있을 경우, 유지보수에 편리하는 장점이 있다. 

 

1. 설정 파일 세팅

📑 build.gradle

dependencies {
    ...
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
    // 타임리프 레이아웃
    implementation group: 'nz.net.ultraq.thymeleaf', name: 'thymeleaf-layout-dialect'

}

 

📑 application.properties

##타임리프 템플릿
spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.check-template-location=true
spring.thymeleaf.suffix=.html

 

 

2. 공통으로 필요한 레이아웃 분리

layout 폴더에 공통 영역 및 기본 레이아웃 html 파일을 만들어준다.

 

1) 타임 템플릿 사용을 하려면 html 태그 속성을 추가하여 명시 해주어야한다. 

xmlns:th="http://www.thymeleaf.org"

 

2) fragment 를 사용하여 포멧으로 사용할 것임과 명칭을 적어준다.

 <th:block th:fragment="명칭">

 

 

📑 headerTop.html

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="headerTopFragment">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.6.4.js" integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" crossorigin="anonymous"></script>

    <title>Document</title>
  </head>
</th:block>
</html>

 

📑 header.html

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="headerFragment">
  <header>
    header content
  </header>
</th:block>
</html>

 

📑 footer.html


<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block  th:fragment="footerFragment">
  <footer>
    footer
  </footer>
</th:block>
</html>

 

 

 

2. 기본 레이아웃 화면 설정

1)  html 태그 속성에 layout 추가 명시 해주어야한다. 

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

 

 

2)  변경될 컨텐츠들이 들어갈 블럭을 설정해준다.

<th:block layout:fragment="content"></th:block>

 

📑 layoutBasic.html

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<th:block th:replace="layout/headerTop::headerTopFragment"></th:block>
<body>
  <th:block th:replace="layout/header::headerFragment"></th:block>
  <th:block layout:fragment="content">
    content place!
  </th:block>
  <th:block th:replace="layout/footer::footerFragment"></th:block>
</body>
</html>

 

 

3. 레이아웃을 사용하는 컨텐츠 

1)  html 태그 속성에 layout 추가 명시 해주어야한다. 

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

layout:decorate="~{사용하는 레이아웃 화면 경로}"

 

2) 컨텐츠에 들어갈 내용들을 넣어준다.

<th:block layout:fragment="content"> ~~~~ </th:block>


📑 register.html

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/layoutBasic}">

<th:block layout:fragment="content">
  본문 content
</th:block>

</html>