bulid.gradle에 추가
implementation group: 'com.github.zhanhb', name: 'thymeleaf-layout-dialect', version: '2.4.1'layout>fragments(나눌 레이아웃)
나는 head, 공통 스크립트와 navbar만 가져와서 쓸 거기 때문에, 연습용으로 일단 다 만들어 놓고 navbar 타임리프 레이아웃을 페이지에 가져와서 붙이는 식으로 해 보았다.
navbar.html
<!DOCTYPE html>
<html lang="en" itemscope itemtype="http://schema.org/WebPage">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="navbarFragment">
<!-- 로그인 모달 -->
<div id="myModal" class="modal fade">th:fragment="navbarFragment"
fragment명을 지정해야한다.
th:block에 지정한만큼 가져가서 쓸 수 있다.
layout.html
<!DOCTYPE html>
<html lagn="en"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<html lang="en" itemscope itemtype="http://schema.org/WebPage">
<!-- 공통 헤더-->
<th:block th:replace="/layout/fragments/head :: headFragment"></th:block>
<body class="index-page bg-gray-200">
<div id="wrapper">
<th:block th:replace="/layout/fragments/navbar :: navbarFragment"></th:block>
<div id="content-wrapper" class="d-flex flex-column">
<div id="content">
<!-- 본문-->
<th:block layout:fragment="content"></th:block>
</div>
<!-- 공통 하단-->
<th:block th:replace="/layout/fragments/footer :: footerFragment"></th:block>
</div>
</div>
<!-- 공통 스크립트-->
<th:block th:replace="/layout/fragments/script :: scriptFragment"></th:block>
</body>
</html>
</html>가져다 붙일때는 여기서 떼어가면 된다.
예시> login.html
<!DOCTYPE html>
<html lagn="en"
xmlns:th="http://www.thymeleaf.org">
<html lang="en" itemscope itemtype="http://schema.org/WebPage">
<!-- 공통 헤더-->
<th:block th:replace="/layout/fragments/head :: headFragment"></th:block>
<body class="sign-in-basic">
<div id="wrapper">
<th:block th:replace="/layout/fragments/navbar :: navbarFragment"></th:block>이렇게 써도 되나 싶지만 일단 적용해서 프론트를 꾸며보기로!
1일 1커밋 1일 1벨로그!