Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
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 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

개발자되기 프로젝트

[Thymeleaf] Template Layout 2 본문

인프런/[인프런] 스프링 MVC 2

[Thymeleaf] Template Layout 2

Seung__ 2021. 9. 19. 16:16

template layout 개념을 <head> 를 넘어 <html>전체에 적용 가능

 

1. layoutFile

  • 전체 레이아웃
  • 각 페이지는 해당 레이아웃에서 타이틀,  content만 변경됨.
<!DOCTYPE html>
<html th:fragment="layout (title, content)" xmlns:th="http://
www.thymeleaf.org">
<head>
    <title th:replace="${title}">레이아웃 타이틀</title>
</head>
<body>
<h1>레이아웃 H1</h1>
<div th:replace="${content}">
    <p>레이아웃 컨텐츠</p>
</div>
<footer>
    레이아웃 푸터
</footer>
</body>
</html>

 

2.  layoutExtendMain

  • html 자체를 th:replace함. 뭐로? 위의 layoutFile로.
  • 이 때 title, section 태그를 넘겨줌.
<!DOCTYPE html>
<html th:replace="~{template/layoutExtend/layoutFile :: layout(~{::title},
~{::section})}"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>메인 페이지 타이틀</title>
</head>
<body>
<section>
    <p>메인 페이지 컨텐츠</p>
    <div>메인 페이지 포함 내용</div>
</section>
</body>
</html>

 

3. 결과

<!DOCTYPE html>
<html>
<head>
    <title>메인 페이지 타이틀</title>
</head>
<body>
<h1>레이아웃 H1</h1>
<section>
    <p>메인 페이지 컨텐츠</p>
    <div>메인 페이지 포함 내용</div>
</section>
<footer>
    레이아웃 푸터
</footer>
</body>
</html>

 

4. GitHub : 210919 layout 2

 

GitHub - bsh6463/Thymeleaf

Contribute to bsh6463/Thymeleaf development by creating an account on GitHub.

github.com

 

'인프런 > [인프런] 스프링 MVC 2' 카테고리의 다른 글

[Thymeleaf+Spring] 입력 form 처리  (0) 2021.09.20
[Thymeleaf+Spring] 타임리프, 스프링 통합  (0) 2021.09.20
[Thymeleaf] Template layout 1  (0) 2021.09.19
[Thymeleaf] 템플릿 조각  (0) 2021.09.19
[Thymeleaf] JavaScript inline  (0) 2021.09.19
'인프런/[인프런] 스프링 MVC 2' Related Articles more
Comments