티스토리 뷰

WEB/기타

[Thymeleaf] 4. Thymeleaf 템플릿 만들기

silverline79 2024. 1. 19. 22:03

4. Thymeleaf 템플릿 만들기

[ https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#template-layout ]

 

◆ 템플릿 파일 위치 ( 확장자 : HTML )

[ 경로 ] src/main/resources/templates

※ src/main/resources( 기본 설정 ) ,

/templates ( application.yml 선언 prefix: classpath:/templates/ )

 

◆ 타임리프 파일 선언

레이아웃이 되는 파일 선언
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
레이아웃 안에 들어가는 조각(fragment) 선언
<html xmlns:th="http://www.thymeleaf.org">
만들어진 레이아웃을 사용하는 파일 선언
<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="layout/default_layout">

 

◆ 레이아웃 생성 순서

1. head, header, footer 영역 include 파일 만들기 (참조 : 레이아웃 생성 예시1)

2. 레이아웃 틀 만들기(레이아웃 틀에 1번을 include) (참조 : 레이아웃 생성 예시2)

3. 2번의 만들어진 레이아웃 틀을 컨텐츠 페이지에 적용시키기

※ 1,2 번의 생성 순서는 변경되어도 상관 없음.

 

◆ 레이아웃 만들기 예시

레이아웃 생성 예시1. <footer.html> 하단에서 공통으로 사용할 코드를 작성한 레이아웃
★ th:fragment 옵션으로 아래 코드의 Fragment의 이름을 선언해주고 공통 레이아웃에서 해당 Fragment명을 호출하여 해당 코드를 불러와 사용
★ layout.html에서 th:replace="fragments/footer :: footerFragment"가 footer.html의 파일 경로, Fragment명을 호출하여 레이아웃을 구성
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="footerFragment">
<footer class="sticky-footer bg-white">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>Copyright &copy; song gunho 2019</span>
</div>
</div>
</footer>
</th:block>
</html>
레이아웃 생성 예시2. <layout.html> 레이아웃의 전체적인 틀을 작성한 코드
상단에 xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"으로 해당 파일이 레이아웃임을 선언
th:replace 각 레이아웃의 코드를 불러오는 소스 작성
layout:fragment 페이지 컨텐츠 바뀔 부분
★ th:replace="fragments/head :: headFragment" : include 부분
★ layout:fragment="content" : 페이지의 컨텐츠 출력부(내용이 바뀌는 유동적인 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">
<!--/* 공통 헤더 */-->
<th:block th:replace="fragments/head :: headFragment"></th:block>
<body id="page-top">
<div id="wrapper">
<!--/* 사이드바 *-->
<th:block th:replace="fragments/sidebar :: sidebarFragment"></th:block>
<div id="content-wrapper" class="d-flex flex-column">
<div id="content">
<!--/* 상단바 */-->
<th:block th:replace="fragments/topbar :: topbarFragment"></th:block>
<!--/* 본문 */-->
<th:block layout:fragment="content"></th:block>
</div>
<!--/* 공통 하단 */-->
<th:block th:replace="fragments/footer :: footerFragment"></th:block>
</div>
</div>
<!--/* 공통 스크립트 */-->
<th:block th:replace="fragments/script :: scriptFragment"></th:block>
</body>
</html>

◇ th:insert와 th:replace(과 th:include)의 차이점 ※ th:include, 3.0부터 권장하지 않음

th:replace th:insert
th:replace는 태그 전체를 교체 th:insert는 해당 태그 내부에 fragment를 삽입
// index.html
<head th:replace="fragments.html :: head"></head>		 // index.html
<div th:insert="fragments.html :: content">


</div>
head 태그 자체가 fragments.html의 head로 바뀜 div 태그 내부에 fragments.html의 content가 삽입
// fragments.html
<head th:fragment="head">
<meta charset="UTF-8">
<title>StudyOlle </title>
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css"/>
<style>
.container {
max-width: 100%;
}
</style>
</head>
★ th:replace / th:insert 구분 없이 사용하려면 th:block 로 선언
→ head나 div에 선언시에는 해당 태그가 포함됨
ex) <th:block th:insert="fragments.html :: content"></th:block>

 

◆ 만든 레이아웃 사용 예시

<!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="layout/layout">
<th:block layout:fragment="content">
<!-- 페이지에 들어갈 컨텐츠 부분은 여기에 작성 -->
<div class="container">...</div>
</th:block>
</html>
★ layout:decorate : 사용할 레이아웃 경로 및 명칭 선언
★ ​고정적인 head, header, footer 영역은 [ layout.html ] 에서 작성한 레이아웃 출력됨.
★ layout:fragment="content" : 페이지의 컨텐츠 출력부
웹 문서 제목 출력하기(title)
레이아웃 문서 <title>
<th:block layout:fragment="f-title">문서제목</th:block>
</title>
레이아웃 문서 사용하는 문서 <th:block layout:fragment="f-title">문서제목</th:block>
★ 레이아웃 문서에 선언하고 해당 레이아웃을 사용하는 문서에는 선언하지 않을 경우
레이아웃에 선언된 타이틀이 기본으로 출력됨

'WEB > 기타' 카테고리의 다른 글

[JPA] 1. JPA (Java Persistence API) 란?  (0) 2024.01.20
DBMS, JDBC, ORM, Hibernate  (0) 2024.01.20
[Thymeleaf] 3. Thymeleaf 기본문법  (0) 2024.01.19
[Thymeleaf] 2. Thymeleaf 사용 설정  (0) 2024.01.19
[Thymeleaf] 1. Thymeleaf 란?  (0) 2024.01.19
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
글 보관함