코드 그라데이션

Thymeleaf (15) 템플릿 레이아웃 02 본문

Spring/Thymeleaf

Thymeleaf (15) 템플릿 레이아웃 02

완벽한 장면 2023. 11. 24. 20:43

템플릿 레이아웃 02

템플릿 레이아웃 확장

01에서 정리한 개념을 <head> 정도에만 적용하는게 아니라 <html> 전체에 적용할 수도 있다.

 

 

TemplateController 에 추가

@GetMapping("/layoutExtend")
public String layoutExtends() {
    return "template/layoutExtend/layoutExtendMain";
}

 

 

/resources/templates/template/layoutExtend/layoutFile.html

<!DOCTYPE html>
<html th:fragment="layout (title, content)" xmlns:th="http://www.thymeleaf.org">
<head>
    <!--
        이 코드는 Thymeleaf 템플릿 프래그먼트로서 레이아웃을 정의합니다.
        "layout"이라는 이름의 템플릿 프래그먼트를 정의하고 있으며, 두 개의 파라미터 "title"과 "content"를 받습니다.

        title:
        - "title" 파라미터로 전달받은 값으로 웹 페이지의 타이틀을 동적으로 설정합니다.
        - <title th:replace="${title}"> 태그를 사용하여 웹 페이지의 타이틀을 설정합니다.

        content:
        - "content" 파라미터로 전달받은 내용을 현재 페이지의 컨텐츠로 대체합니다.
        - <div th:replace="${content}"> 태그를 사용하여 컨텐츠를 동적으로 설정합니다.
    -->
    <title th:replace="${title}">레이아웃 타이틀</title>
</head>
<body>
<h1>레이아웃 H1</h1>
<!-- "content" 파라미터로 전달받은 내용을 현재 페이지의 컨텐츠로 대체합니다. -->
<div th:replace="${content}">
    <p>레이아웃 컨텐츠</p>
</div>
<footer>
    레이아웃 푸터
</footer>
</body>
</html>

 

 

/resources/templates/template/layoutExtend/layoutExtendMain.html

<!DOCTYPE html>
<html th:replace="~{template/layoutExtend/layoutFile :: layout(~{::title},
~{::section})}"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <!--
        이 코드는 Thymeleaf를 사용하여 레이아웃을 확장하는 예제입니다.
        "template/layoutExtend/layoutFile"이라는 레이아웃 파일에서 
        "layout" 템플릿 프래그먼트를 호출하고 있습니다.

        title:
        - 현재 페이지의 타이틀을 "메인 페이지 타이틀"로 정적으로 설정합니다.

        section:
        - 현재 페이지의 컨텐츠 섹션을 정의합니다.
    -->
    <title>메인 페이지 타이틀</title>
</head>
<body>
<section>
    <!--
        현재 페이지의 컨텐츠를 정의합니다.
    -->
    <p>메인 페이지 컨텐츠</p>
    <div>메인 페이지 포함 내용</div>
</section>
</body>
</html>

 

실행 결과

 

728x90

'Spring > Thymeleaf' 카테고리의 다른 글

통합을 위한 작업 - 프로젝트 구조  (2) 2023.11.27
타임리프 스프링 통합  (1) 2023.11.26
Thymeleaf (14) 템플릿 레이아웃 01  (0) 2023.11.21
Thymeleaf (13) 템플릿 조각  (0) 2023.11.20
Thymeleaf (12) 자바스크립트 인라인  (0) 2023.11.18
'Spring/Thymeleaf' Related Articles more
Comments