728x90

레이아웃용 파일을 만들어 놓고 각 페이지에서 원하는 레이아웃 파일을 상속받아서 필요한 부분만 교체해서 사용한다.

 

- 환경

IDE : STS

JDK : 1.8

Spring Boot : 2.7

Gradle

 

 

1. gradle Layout dialect 추가

dependencies {
	implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:3.0.0'
}

 

2. 파일 경로 확인

3. layout 파일 추가

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<!-- 헤드  -->
<div th:replace="fragment/head :: head"></div>

<body id="page-top">

    <!-- Page Wrapper -->
    <div id="wrapper">
		<!-- 사이드 바  -->
        <div th:replace="fragment/sidebar :: sidebar"></div>
        <!-- Content Wrapper -->
        <div id="content-wrapper" class="d-flex flex-column">

            <!-- Main Content -->
            <div id="content">
                <div th:replace="fragment/topbar :: topbar"></div>
                <!-- Begin Page Content -->
                <!-- <div th:replace="fragment/pageContent :: pagecontent"></div> -->
                <!-- 본문  -->
                <th:block layout:fragment="content"></th:block>
            </div>
            <!-- End of Main Content -->

            <!-- Footer -->
            <div th:replace="fragment/footer :: footer"></div>
            <!-- End of Footer -->
        </div>
        <!-- End of Content Wrapper -->
    </div>
    <!-- End of Page Wrapper -->

    <!-- Scroll to Top Button-->
    <a class="scroll-to-top rounded" href="#page-top">
        <i class="fas fa-angle-up"></i>
    </a>

    <div th:replace="fragment/script :: script"></div>

</body>

</html>
  • 이전 글의 index.html 파일이 layout.html 수정 되었습니다.
  • [xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" ] 추가
  • <th:block layout:fragment="content"></th:block> 추가  이 부분만 내용이 변경될 부분이다.  

4. index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="fragment/layout">

<th:block layout:fragment="content">
    <!-- Begin Page Content -->
    <div class="container-fluid">
        <h1>레이아웃 수정하는 페이지</h1>
    </div>
</th:block>

</html>

5. 완료 화면 

inex.html 페이지

 

- 참고

URL : https://dev-jwblog.tistory.com/34

728x90

'개발 > thymeleaf' 카테고리의 다른 글

[HTML] script 위치  (0) 2022.08.02
spring boot thymeleaf 에 Datatables 적용하기  (0) 2022.08.01
thymeleaf (bootstrap sb-admin)공통영역 처리  (0) 2022.07.28
[springboot thymeleaf] bootstrap sb-admin2 적용  (0) 2022.07.27

티스토리툴바