728x90
이 라이브러리는 무엇인가
Thymeleaf Layout Dialect는 템플릿 레이아웃을 만드는 데 도움을 준다고 합니다. 현재 버전에서는 content 영역의 html영역이 레이아웃의 <head에 자동적으로 추가됩니다. 이 라이브러리를 통해서 전통적인 상속방식으로 레이아웃을 만들 수 있다고 하네요.
공식문서의 예제를 가져왔습니다.
- 레이아웃 HTML
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title>Layout page</title>
<script src="common-script.js"></script>
</head>
<body>
<header>
<h1>My website</h1>
</header>
<section layout:fragment="content">
<p>Page content goes here</p>
</section>
</body>
</html>- 컨텐츠 HTML
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout.html}">
<head>
<title>Content page</title>
<script src="content-script.js"></script>
</head>
<body>
<section layout:fragment="content">
<p>This is a paragraph from the content page</p>
</section>
</body>
</html>- 레이아웃 + 컨텐츠 반영 결과 HTML
<!DOCTYPE html>
<html>
<head>
<title>Content page</title>
<script src="common-script.js"></script>
<script src="content-script.js"></script>
</head>
<body>
<header>
<h1>My website</h1>
</header>
<section>
<p>This is a paragraph from the content page</p>
</section>
</body>
</html>위 예제에서 볼 수 있듯이 레이아웃을 적용한 결과 HTML에서 <head> 영역은 레이아웃과 컨텐츠의 <head>가 합쳐졌습니다. 정확히 말하면 레이아웃의 <head>에 컨텐츠의 내용이 추가된 것입니다. <head>의 하위 항목 중에서 겹치는 부분인 <title>가 컨텐츠의 <title>로 치환되었습니다.