헤더, 푸터를 공통으로 사용하고 내부 content만 변경하도록 한다.
default_layout.html 구성
<!DOCTYPE html>
<html lang="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
<meta charset="UTF-8" />
<!-- head fragment 공통 사용 js, css 파일 선언부 -->
<th:block th:replace="layout/head :: headFragment" />
</head>
<body>
<div class="container-doc">
<!-- header fragment 고정부 실제 파일 위치와 해당 파일에 선언된 fragment 값 -->
<th:block th:replace="layout/login/login_header :: headerFragment" />
<!-- content fragment 변경되는 페이지 -->
<th:block layout:fragment="content" />
<!-- footer fragment 고정부 실제 파일 위치와 해당 파일에 선언된 fragment 값 -->
<th:block th:replace="layout/login/login_footer :: footerFragment" />
</div>
</body>
</html>
headFragment 구현
<html lagn="ko"
xmlns:th="http://www.thymeleaf.org">
<!-- headFragment 선언 (공용 js, css) -->
<div th:fragment="headFragment">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.23/datatables.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.23/datatables.min.js"></script>
</div>
</html>
headerFragment 구현
<html lagn="ko"
xmlns:th="http://www.thymeleaf.org">
<!-- headerFragment 선언 -->
<header class="doc-header" th:fragment="headerFragment">
... 실제 사용되는 HTML 코드 입력
</header>
</html>
footerFragment 구현
<html lagn="ko"
xmlns:th="http://www.thymeleaf.org">
<footer class="doc-footer" style="padding-left: 201px;" th:fragment="footerFragment">
... footer HTML 코드 입력
</footer>
</html>
content 구현
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="layout/default_layout"> <!-- 기본 레이아웃 파일 지정 -->
<th:block layout:fragment="content">
<script type="text/javascript">
... 스크립트 작성
</script>
... HTML 콘텐츠 내용 입력
</th:block>
</html>'FrontEnd > Thymeleaf' 카테고리의 다른 글
| 외부 JS 파일에 값 전달 방법 (0) | 2021.03.09 |
|---|---|
| 커스텀 함수 사용(with Spring) (0) | 2021.03.09 |
| Spring Thymleaf 세션 정보 조회 방법 (0) | 2020.11.19 |