Thymeleaf Fragment -1에서 fragment를 나누어 사용해보았다면 이 공통 Fragment에 변수를 보내서 사용할 수도 있다.
예를 들어 공통으로 사용되는 상단 메뉴를 fragment로 만들어서 전체 페이지에서 사용중이다.
어떤 메뉴를 선택했는지 확인하려면 선택한 메뉴에 색상으로 구분이 되어야 하는데 공통으로 사용된 fragment에서는
전부 같은 코드를 사용하기 때문에 페이지 마다 선택한 메뉴를 알수가 없다.
이런 경우 메뉴를 선택할 때 메뉴 fragment에 변수를 넘겨 어느 메뉴를 클릭한건지 알려주면 fragment에서는 그 메뉴만 활성화상태를 표시할수 있을 것이다.
Fragment 변수
먼저 fragment-header에 변수를 보내서 사용해보자.
fragment 선언 부분에 받을 변수명을 추가하고 해당 변수를 head의 title에 적용해보자.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="fragment-header(title)">
<title th:text="${title}">Thymeleaf Fragment</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
</html>fragment명 뒤에 (변수)를 작성하면 해당 fragment를 호출할때 title이란 변수를 받는다는 의미이고
해당 title을 적용할 title태그에 타임리프 문법인 th:text=${title}로 받아온 변수를 사용할 수 있다.
각 페이지에서 변수를 보낼때에도 fragment명 뒤에 변수='' 를 작성하면 변수를 보낼수 있다.
<!-- index.html > header fragment -->
<head>
<div th:replace="/fragments/header.html :: fragment-header(title='1번 페이지')"></div>
</head>
<!-- index2.html > header fragment -->
<head>
<div th:replace="/fragments/header.html :: fragment-header(title='2번 페이지')"></div>
</head>
각 페이지를 호출하면 title이 다르게 보이는것을 확인 할 수 있다.
위 fragment-header와 같이 fragment-nav도 변수를 보내서 어느 메뉴를 선택했는지 구분해보도록 하자.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:fragment="fragment-nav(currnet)">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">상단메뉴</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item" th:classappend="${currnet == '1'} ? active">
<a class="nav-link" href="#" th:href="@{/index}">메인 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item" th:classappend="${currnet == '2'} ? active">
<a class="nav-link" href="#" th:href="@{/index2}">설정</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</html>fragment명 뒤에 받을 변수명을 선언 하고 선택한 메뉴를 받아 해당 메뉴을 활성화 시킬수 있다.
타임리프 문법을 사용하여 th:classappend="${current == '1'} ? active" 로 넘어온 변수가 1이면
메뉴 '메인'에 active class를 추가하여 활성화, 변수가 2라면 메뉴 '설정'에 active class를 추가할 수 있다.
<!-- index.html > nav fragment -->
<div th:replace="/fragments/nav.html :: fragment-nav(currnet='1')"></div>
<!-- index2.html > nav fragment -->
<div th:replace="/fragments/nav.html :: fragment-nav(currnet='2')"></div>
git source : https://github.com/sgoho01/Thymeleaf-Fragments/tree/fragment-param
'IT > Template Engine' 카테고리의 다른 글
| Thymeleaf Fragment - 1 (Fragment 나누기) (0) | 2020.05.25 |
|---|---|
| 타임리프 레이아웃 (thymeleaf layout dialect) (9) | 2019.11.20 |
댓글