[Thymeleaf] Fragment나누기

Thymeleaf Fragment

JSP의 inlucde기능과 같습니다.

보통 하나의 HTML파일에 header나 footer 등의 중복 코드를 줄이기 위해 사용 됩니다.

실습환경은

Spring Boot + Thymeleaf입니다.

1. 파일 구성

HTML에서 header를 담당할 head.html과 navigation bar를 구성할 top.html, 그리고 홈 화면인 home.html로 구성되어 있습니다.

head.html

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="header">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" th:href="@{https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css}" />
</head>

</html>

모든 html파일의 head부분에 들어갈 것이기 때문에 head태그에서 th:fragment="fragment명"으로 설정합니다.

header에는 부트스트랩 cdn을 넣어주었습니다.

top.html

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

<div th:fragment="top">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">asdfsdf</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>

</html>

상단의 navigation bar를 담당하기 때문에 div태그를 만들어 Fragment를 설정합니다.

home.html

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

<head th:replace="layout/head::header"></head>

<body>
    <div th:replace="layout/top::top"></div>
    <h1>Hello World!</h1>
</body>

</html>

home.html에서는 두 개의 fragment를 넣어주어야 합니다.

th:replace="파일위치 및 파일 명/fragment이름" 으로 fragment를 지정합니다.

실행결과>

실행결과, 부트스트랩 적용이 및 navigation bar가 잘 포함된 것을 확인할 수 있습니다.

저작자표시

'Thymeleaf' 카테고리의 다른 글

[Thymeleaf] 날짜 형식 변경하기 (0)	2021.12.06
[Thymeleaf] 반복문 each와 href에서 변수 값을 넘기는 방법 (1)	2021.11.15
[Thymeleaf] Form 태그 작성 (0)	2021.11.12
[Thymeleaf] location.href 작성법 (0)	2021.11.12

이클립스

[Thymeleaf] Fragment나누기