카테고리 없음

[spring boot] Thymeleaf, layout

냐옴 2021. 8. 11. 16:51

시나리오

  • layout 파일 2개
    • layout1.html
    • layout2.html
  • content 파일 4개
    • content1.html ( layout1 사용 )
    • content2.html ( layout1 사용 )
    • content3.html ( layout2 사용 )
    • content4.html ( layout2 사용 )

layout 파일 정의

  • layout1.html
<!DOCTYPE html>
<html th:fragment="layout(title, content)" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:replace="${title}"></title>
</head>
<body>

<header>
    layout1 header
</header>

<div th:replace="${content}">
    layout1 content
</div>

<footer>
    layout1 footer
</footer>

</body>
</html>
  • layout2.html
<!DOCTYPE html>
<html th:fragment="layout(title, content)" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:replace="${title}"></title>
</head>
<body>

<header>
    layout2 header
</header>

<div th:replace="${content}">
    layout2 content
</div>

<footer>
    layout2 footer
</footer>

</body>
</html>

content 파일 정의

  • content1.html
<!DOCTYPE html>
<html lang="en" th:replace="~{template/layout/layout1 :: layout(~{::title}, ~{::section})}">
<head>
    <meta charset="UTF-8">
    <title>content1 title</title>
</head>
<body>

<section>
    content1 section
</section>

</body>
</html>
  • content2.html
<!DOCTYPE html>
<html lang="en" th:replace="~{template/layout/layout1 :: layout(~{::title}, ~{::section})}">
<head>
    <meta charset="UTF-8">
    <title>content2 title</title>
</head>
<body>

<section>
    content2 section
</section>

</body>
</html>
  • content3.html
<!DOCTYPE html>
<html lang="en" th:replace="~{template/layout/layout2 :: layout(~{::title}, ~{::section})}">
<head>
    <meta charset="UTF-8">
    <title>content3 title</title>
</head>
<body>

<section>
    content3 section
</section>

</body>
</html>
  • content4.html
<!DOCTYPE html>
<html lang="en" th:replace="~{template/layout/layout2 :: layout(~{::title}, ~{::section})}">
<head>
    <meta charset="UTF-8">
    <title>content4 title</title>
</head>
<body>

<section>
    content4 section
</section>

</body>
</html>

실행결과

  • content1
layout1 header
content1 section
layout1 footer
  • content2
layout1 header
content2 section
layout1 footer
  • content3
layout2 header
content3 section
layout2 footer
  • content4
layout2 header
content4 section
layout2 footer
저작자표시 비영리 동일조건 (새창열림)