새소식
반응형
Java/Spring
Spring Boot Thymeleaf Dialect Layout 설정
- -
반응형
Spring Boot 에서 thymeleaf-layout-dialect 라이브러리를 사용하여 Thymeleaf 템플릿 엔진에 레이아웃을 설정한다.
기본적인 Spring Boot Thymeleaf 설정은 아래 URL을 통해 설정해주세요
https://okimaru.tistory.com/255
Spring Boot Thymeleaf 설정
1. Spring Boot Project 생성 2. Spring Boot Thymeleaf dependency 추가 2-1. pom.xml 에 dependency 추가 org.springframework.boot spring-boot-starter-thymeleaf 2-2. Maven Update pom.xml에 thymeleaf..
okimaru.tistory.com
1. 라이브러리 추가
pom.xml에 라이브러리를 추가하여 의존성 설정 및 필요한 라이브러리를 다운로드 받는다.
<dependencies>
....
<!-- https://mvnrepository.com/artifact/nz.net.ultraq.thymeleaf/thymeleaf-layout-dialect -->
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>
...
</dependencies>
<dependencies></dependencies> 태그 사이에 추가해준다.
추가 후 Maven Project Update를 통해 필요한 라이브러리를 다운로드 받는다.
프로젝트 마우스 오른쪽 클릭 > Maven > Update Project...
2. Layout 설정을 위한 HTML 파일 생성
보통 레이아웃을 설정할 때 header 부분, footer 부분, body 부분 등을 설정한다.
header 부분과 footer 부분은 고정으로 보여주며 body 부분만 데이터가 바뀐다.
src/main/resources/templates/ 경로에 아래와 같이 추가한다.
* layout/default.html : 전체 레이아웃을 담당하는 파일
* layout/fragments/** : head, top, left 등 화면의 각 부분을 담당할 조각 페이지들
* contents/** : 화면 각 부분을 제외한 body 부분에서 데이터를 보여줄 페이지들
default.html
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<!-- head css charSet-->
<th:block th:replace="~{layout/fragments/head::headF}"></th:block>
<!-- script js file -->
<th:block th:replace="~{layout/fragments/script::scriptF}"></th:block>
<!-- library js file -->
<th:block th:replace="~{layout/fragments/library::libraryF"></th:block>
<body>
<th:block th:replace="~{layout/fragments/top::topF}"></th:block>
<th:block layout:fragment="content"></th:block>
</body>
</html>
페이지 내 레이아웃을 그려주는 default 파일이다.
th:replace
th:replace="" 구문을 통해 따로 분리한 조각인 head.html 파일을 해당하는곳에 교체한다.
사용방법 : <th:block th:replace="파일경로::파일내에 th:fragment 설정이름">
th:replace는 태그 전체를 교체해주는 역할을 한다.
th:replace 와 동일한 역할을 하는 속성은 th:insert 와 th:include 가 있다.
th:replace, th:insert, th:include
th:replace : 태그 조각들을 교체하는 역할을 한다.
th:insert : replace 와 동일한 역할을 한다.
th:include : 해당속성이 들어간 태그를 제외하고 하위내용만 교체한다.
th:replace 와 th:insert 는 동일한 역할을 하지만 th:include와는 미세한 차이가 있다.
사용 차이
<div th:replace="~{layout/fragments/top :: topFragment}"></div>
<div th:insert="~{layout/fragments/top :: topFragment}"></div>
<div th:include="~{layout/fragments/top :: topFragment}"></div>
// top.html
<div th:fragment="topFragment"><h1>head</h1></div>
총 3개를 같은 파일로 태그 교체를 시도했다.
th:replace 와 th:insert 구문은 같지만 th:include와는 차이가 있다.
th:replace, th:insert 구문은 속성을 추가한 태그까지 전체가 나오지만 th:include 는 속성태그 제외하고 하위내용만
교체된다.
layout:fragment="content"
전체 레이아웃인 default.html 을 사용하는 페이지에서 해당 layout:fragment="content" 부분으로 내용이 교체된다.
쉽게 말해 test.html 페이지를 띄울때 레이아웃인 default.html을 사용한다고 하면 test.html 파일 내용이
default.html의 layout:fragment="content" 로 설정한곳에 교체된다.
head.html
head.html 에는 charset, css 파일, favicon 설정을 하는 파일로 구분했다.
아래와 같이 thymeleaf 를 사용하기 위한 namespace 를 설정하고 th:fragment 속성을 사용하여 전체 레이아웃 파일인
default.html 추가 하기 위한 이름을 설정한다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="headF">
<head>
<title>Head</title>
<meta charset="UTF-8">
<!-- favicon ico 설정 -->
<link rel="icon" type="image/ico" th:href="@{/static/images/favicon.ico}">
</head>
</th:block>
</html>
th:fragment 속성으로 감싸진 부분을 전체 레아이웃 태그에 교체한다.
* 중요한 키워드
> xmlns:th="" - thymeleaf 를 사용하기 위한 namespace 설정
> th:fragment="" - 해당 태그로 감싸진 부분을 전체 레이아웃에 교체한다.
test.html
test.html 파일에 default.html 레이아웃을 사용하기 위해선 layout:decorate="" 속성을 설정해야 한다.
layout:decorate="~{레이아웃 경로}" 로 설정하면 된다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/default}">
<head>
</head>
<th:block layout:fragment="content">
<h1>asdfasdfasdfasdfasdf</h1>
</th:block>
</html>
layout:decorate="~{레이아웃 파일 경로}"
해당 설정을 통해 레이아웃을 설정한다.
layout:fragment="content"
위 속성을 설정한 하위 내용들이 default.html 메인 레이아웃의 content 설정한 곳으로 교체된다.
결과
test.html 파일에 접근하면 아래와 같이 결과가 나온다.
top 설정 내용인 Head는 고정이고
test.html의 layout:fragment="content" 속성을 설정한 하위 내용이 추가된다.
추가설명
thymeleaf 설정할 때 각 화면의 부분들을 담당하는 th:fragment 속성으로 설정한 조각들은 <head> 태그가
th:fragment 속성을 사용한 <th:block> 태그 안에 들어가야 한다.
layout:fragment의 content 부분을 담당하는 화면들은 head 태그가 layout:fragment 속성을 사용한
<th:block> 태그 바깥에 <head> 태그를 사용해야 한다.
반응형
'Java > Spring' 카테고리의 다른 글
| [Spring Boot] Spring Security를 이용한 로그인 설정 (0) | 2022.10.31 |
|---|---|
| lombok 설정 (0) | 2022.10.26 |
| Jackson 라이브러리 ObjectMapper(readValue, writeValueAsString) (1) | 2022.09.21 |
| Lombok @Builder (0) | 2022.09.14 |
| JAR, WAR 차이점 및 특징 (0) | 2022.09.13 |
Contents
소중한 공감 감사합니다