본문 바로가기
카테고리 없음

Thymleaf 페이지 레이아웃 기능 (fragments)

by 문자메일 2022. 6. 11.

1. Build gradle dependency에 의존성 추가 필요

implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'

 

2. Thymeleaf 페이지 레이아웃 기능 사용

여러 페이지에서 공통으로 활용할 템플릿을 (layout.html) 만들어서

header, footer 같은 중복되어 사용되는 파일들은 재사용 할 수 있고,

HTML 페이지별 새로운 부분들만 작성할 수 있음.

layout1.html

<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<body>
    <div th:replace="fragments/header::header"></div>
    <div layout:fragment="content" class="content"></div>
    <div th:replace="fragments/footer::footer"></div>
</body>

th:replace : 해당 속성이 손언된 html 태그를 다른 html 파일로 치환, fragments/header.html 파일의 th:fragment=header 영역을 가져옴.

layout:fragment : layout에서 변경되는 영역을 fragment로 설정함. 

 

 

header.html

<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<div th:fragment="header">

 

 

list.html

<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layouts/layout1}">
<div layout:fragment="content">

댓글