thymeleaft-layout-dialect 설정 및 적용

2022. 4. 1. 15:18

1) 타임리프(Thymeleaf)

- Java 위에서 동작하는 클라이언트 템플릿 엔진

https://www.thymeleaf.org/

Thymeleaf

Integrations galore Eclipse, IntelliJ IDEA, Spring, Play, even the up-and-coming Model-View-Controller API for Java EE 8. Write Thymeleaf in your favourite tools, using your favourite web-development framework. Check out our Ecosystem to see more integrati

www.thymeleaf.org

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#template-layout

Tutorial: Using Thymeleaf

1 Introducing Thymeleaf 1.1 What is Thymeleaf? Thymeleaf is a modern server-side Java template engine for both web and standalone environments, capable of processing HTML, XML, JavaScript, CSS and even plain text. The main goal of Thymeleaf is to provide a

www.thymeleaf.org

- > 8 Template Layout 보면됨!

1-1) thymeleaf-layout-dialect

- Thymeleaf layout 라이브러리(thymeleaf layout dialect)

- 페이지에서 head, header, footer 등 공통된 코드부분은 레이아웃 처리를 통해 고정으로 설정

1-2) 디렉토리 구조

- fragments dir (head.html, nav.html, header.html, footer.html) : 부품화할 html 파일들

- layout dir (default_layout.html) : 부품화된 파일들을 합쳐놓을 전체적인 틀역할을 할 html 파일

- view dir(content.html) : 각 페이지 view html 파일, 유동적으로 변할 부분

1-3) 기본 문법

- fragments

# fragment: 부품화할 코드선언
<div th:fragment="fragmentname"></div>

- fragment 임을 선언

- 고정적인 head, nav, header, footer 영역

- default layout

- replace, insert, include 중 하나 선택하여 사용

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

# replace : 코드 불러오기
<div th:replace="fragments/filename::fragmentname"></div>

# insert : 코드 불러오기
<div th:insert="fragments/filename::fragmentname"></div>

# include: 코드 불러오기 (no longer recommended since Thymeleaf 3.0)
<div th:include="fragments/filename::fragmentname"></div>

# 유동적으로 삽입할 부분은 다음과 같은 표현을 쓴다 ?? 
<div th:layout:fragment="content"></div>

</html>

th:replace="fragments/head :: headFragment"

- fragment 불러오기

- :: 앞은 파일 경로, :: 뒤는 구분자(임의로 적용한 이름)

- view

<html lang="ko"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	  <!-- 각 view html 파일에 사용할 디폴트레이아웃을 명시 -->
	  layout:decorate="~{layout/default_layout} >

	<!-- 삽입될 각 개별적인 영역을 작성 -->
	<div layout:fragment="content"></div>

</html>

- 각각의 view 나타내는 유동적인 content 영역

2) thymeleaf-layout-dialect 적용

2-1) Dependency 추가

- spring-boot-starter- : thymeleaf 뷰 템플릿 엔진 기본 라이브러리

- thymeleaft-layout-dialect : thymeleaf를 이용한 layout 라이브러리

gradle

build.gradle

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
	implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'
//  implementation group: 'nz.net.ultraq.thymeleaf', name: 'thymeleaf-layout-dialect', version: '2.4.1'
   }

maven

pom.xml

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

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

2-2) application.properties 에 thymeleaf 설정 적용

application.properties

# thymeleaf config -------------------------------------------------------------
# Whether to enable a livereload.com-compatible server.
spring.devtools.livereload.enabled=true

# thymeleaf reference path
# Prefix that gets prepended to view names when building a URL.
# Suffix that gets appended to view names when building a URL.
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

# thymeleaf cache configuration
# Whether to enable template caching.
spring.thymeleaf.cache=false 

# Whether to check that the templates location exists.
spring.thymeleaf.check-template-location=true

2-3) thymeleaft-layout-dialect 적용한 레이아웃 코드

/resources/templates/layout/default_layout.html : layout의 기본 틀
/resources/templates/fragments/head.html : css 및 js 링크 관리 head
/resources/templates/fragments/header.html : body의 상단
/resources/templates/fragments/nav.html : nav 메뉴바
/resources/templates/view/content.html : body 중간(각 기능 view)
/resources/templates/fragments/footer.html : body의 하단

/resources/templates/layout/default_layout.html

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

    <head th:replace="fragments/head::headFragment">
        <!--    <title th:layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">default</title> -->
    </head>

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

- 레이아웃을 구성하는 전체적인 틀, fragments의 파일들을 하나의 layout으로 묶은 통합 파일

- <th:block th:replace="/layout/fragments/head :: headFragment"></th:block> :

/layout/fragments/head.html의 파일을 headFragment 이름으로 가져오겠다는 옵션

- <th:block layout:fragment="content"></th:block> : 해당 위치에 content라는 레이아웃 코드를 불러옴, 실제 page url에 따라 바뀔 부분

/resources/templates/fragments/head.html

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

    <!-- Head -->
    <th:block th:fragment="headFragment">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            
            .... head 태그 코드 작성
            
            <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet" />
            <link th:href="@{/bootstrap/vendor/fontawesome-free/css/all.min.css}" rel="stylesheet" type="text/css" />
            <link th:href="@{/bootstrap/css/sb-admin-2.min.css}" rel="stylesheet" />

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

- <th:block th:fragment="headFragment"></th:block>

head 부분을 fragment로 선언

headFragment 라는 이름으로 선언하면, default_layout 에서 headFragment을 인식하여 해당 코드를 호출

/resources/templates/fragments/header.html

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

- <header th:fragment="headerFragment"> </header> : headerFragment 선언

/resources/templates/fragments/footer.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"> 
	<!-- footerFragment 선언 -->
    <footer th:fragment="footerFragment">
    	<div>
        	<h2>여기는 Footer</h2>
    	</div>
	</footer>
</html>

- <footer th:fragment="footerFragment"></footer> : footerFragment 임을 선언

/resources/templates/view/content.html: 각 fileName.html

<!DOCTYPE html>
<html
        xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorate="~{layout/default_layout}">
<body>
	<div layout:fragment="content">
   		<h>content</h>
	</div>
</body>
</html>

layout:decorate="~{layout/default_layout}"

- 기본 레이아웃을 layout/default_layout.html 으로 선언

- layout:decorate thymeleaf 3.* ver (이거 사용해)

- layout:decorator thymeleaf 2.* ver

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

- 각 파일 마다, 위 코드 다음부터 작성한 내용들이 default_layout.html 의 content 부분에 위치함

3) 기타

3-1) insert replace include 차이

<body>
  <div th:insert="footer :: copy"></div>

  <div th:replace="footer :: copy"></div>

  <div th:include="footer :: copy"></div>
</body>

result..

<body>

  <div>
    <footer>
      &copy; 2011 The Good Thymes Virtual Grocery
    </footer>
  </div>

  <footer>
    &copy; 2011 The Good Thymes Virtual Grocery
  </footer>

  <div>
    &copy; 2011 The Good Thymes Virtual Grocery
  </div>
  
</body>

3-2) thymeleaf 에러

<th:replace="fragments/head::headFragment">

-> 공백도 인식되기 때문에 꼭 확인하기!!!!!!!

'1 > HTML' 카테고리의 다른 글

[HTML] 이미지와 링크 태그 (0)	2020.04.13
[HTML] 테이블/표 태그 (0)	2020.04.13
[HTML] 목록 태그 (0)	2020.04.12
[HTML] 텍스트 관련 태그 (0)	2020.04.12
[HTML] HTML 문서 기본 구조 및 정리 (0)	2020.04.12

kiki

thymeleaft-layout-dialect 설정 및 적용

'1 > HTML' 카테고리의 다른 글

+ Recent posts

티스토리툴바