2022-12-13
1. fragment
insert와 replace를 사용하기 전에 이 두 키워드를 통해 불러올 fragment를 먼저 설정해 주어야 한다.
head.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head th:fragment="headFragment">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
</head>
<body>
</body>
</html>
위의 html 파일에서 중요한 부분은 <head th:fragment="headFragment">... </head> 이 부분이다. 해당 영역이 thymeleaf의 fragment가 되어 다른 thymeleaf 파일에서 import 할수 있는 태그가 된다.
nav.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
</head>
<body>
<nav th:fragment="navFragment">
<h1>Test</h1>
</nav>
</body>
네비게이션 역할을 할 태그 <nav th:fragment="navFragment"> 도 하나의 fragment로 지정해 주었다.
2. insert / replace
fragment로 지정한 thymeleaf의 fragment는 두 가지 방법으로 import 할 수 있다. 첫 번째는 insert 다 insert는 th:insert="html/nav.html :: navFragment"라고 지정된 div 태그 안에 fragment 정보가 들어가게 된다.
replace의 경우 th:replace="html/head.html :: headFragment"가 작성된 태그를 대처하게 되는데 예제 코드에서는 div 코드를 headFragment가 지정된 head 태그로 대체되게 된다.
insert와 replace의 작성방법은 아래 내용을 참고하면 된다.
th:insert="[fragment가 지정된 thymeleaf 파일의 경로 ] :: [fragment의 이름]"
th:replace="[fragment가 지정된 thymeleaf 파일의 경로 ] :: [fragment의 이름]"
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<body>
<div id="header-load" th:replace="html/head.html :: headFragment"></div>
<div id="nav-load" th:insert="html/nav.html :: navFragment"></div>
<!----------------------------------------------------------------------------------------- -->
<div class="container marketing">
<h1>home</h1>
</div>
<!----------------------------------------------------------------------------------------- -->
</body>
</html>메인 이미지 출처 : Photo by Anita Austvika on Unsplash