build.gradle
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation('nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect')
}
/src/main/resources/application.properties
spring.thymeleaf.prefix=classpath:templates/
spring.thymeleaf.check-template-location=true
spring.thymeleaf.suffix=.html
spring.thymeleaf.cache=false
layout.html
템플릿을 호출할 곳에서 layout:decorate="~{레이아웃화일}" 선언할 예정
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" >
<head>
<meta charset="UTF-8"><title><th:block layout:fragment="title"></th:block></title>
</head>
<!-- content css --><th:block layout:fragment="css"></th:block>
<!-- content script -->
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<th:block layout:fragment="script"></th:block>
<body>
<div id="wrap">
<header>
<th:block th:replace="admin/inc/header :: headerFragment"></th:block>
</header>
<div id="container" class="main">
<div id="leftmenu"><th:block th:replace="admin/inc/leftMenu :: leftFragment"></th:block> </div>
<div id="content"><th:block layout:fragment="content"></th:block> </div>
</div>
<footer>
<th:block th:replace="admin/inc/footer :: footerFragment"></th:block>
</footer>
</div>
</body>
</html>layout:fragment 으로 설정하면 템플릿을 호출하는 곳에서 <div layout:fragment="fragment 이름">내용</div> 과 같은 형식으로 삽입
index.html
<!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:decorate="~{admin/layout}">
<th:block layout:fragment="title">메인페이지</th:block>
<!-- 고유 CSS 추가 -->
<th:block layout:fragment="css">
</th:block>
<!-- 고유 스크립트 추가 -->
<th:block layout:fragment="script">
<script>
$(document).ready(function(){
}); // end ready()
</script>
</th:block>
<!-- Content -->
<th:block layout:fragment="content">
<h4>content 영역</h4>
</th:block>
</html>
레이어 선언 : xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
템플릿 화일 링크 선언 : layout:decorate="~{admin/layout}"
타이틀명 등록 : th:block layout:fragment="title"
css 영역 : th:block layout:fragment="css"
스크립트 영역 : th:block layout:fragment="script"
content 영역 : th:block layout:fragment="content"
header.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="headerFragment">
<h2>Header</h2>
</th:block>
</html>
footer.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="footerFragment">
<h2>Footer</h2>
</th:block>
</html>
'Thymeleaf' 카테고리의 다른 글
| [Thymeleaf] 타임리프 strings.replace 개행 처리 (0) | 2022.03.31 |
|---|