Thymeleaf layout(header, footer, content으로 나누기)
by 볼빵빵오춘기
Layout
- header, footer 는 공통적으로 페이지마다 들어가게 된다.
- 공통 부분을 고정적으로 설정하고 내용 부분만 추가로 작업하면 되므로 layout을 나누도록 하자.
- layout으로 나눔으로써 header,footer가 반복적으로 들어가는 부분을 중복으로 들어가지 않게 하고 유지보수에도 용이하게 된다.
layout 설정
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<th:block th:replace="fragments/header :: headerFragment">
</th:block>
<body>
<th:block layout:fragment="content">
</th:block>
</body>
<th:block th:replace="fragments/footer :: footerFragment">
</th:block>
</html>
header.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="headerFragment">
<head>
<title>Dreaming Animal</title>
</head>
<header>
header
</header>
</th:block>
</html>
footer.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="footerFragment">
<footer>
<div class="mt-5">
<div class="text-center">
<p>
<small class="text-muted">Copyright © DREAMING ANIMAL Corporation. All Rights Reserved.</small>
</p>
</div>
</div>
</footer>
</th:block>
</html>
index.html(content 내용적는 방법)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/default_layout}">
<th:block layout:fragment="content">
<div class="container">
<div class="row justify-content-center">
</div>
</div>
</div>
</th:block>
</html>'👩🏻💻 About 프로그래밍 > Thymeleaf' 카테고리의 다른 글
| Thymeleaf 기본문법 a, 반복문, js(th:href,each,inline) (0) | 2023.05.27 |
|---|---|
| Thymeleaf 기본 문법 글자출력,조건(th:text,if) (0) | 2023.05.27 |
| Thymeleaf 사용방법 (0) | 2023.05.27 |
| 타임리프(Thymeleaf)란? (0) | 2023.05.27 |
| 템플릿 엔진(Template Engine)이란? (0) | 2023.05.13 |
블로그의 정보
Hello 춘기's world
볼빵빵오춘기