반응형
환경
  • Spring boot 2.7.2
  • open JDK 1.8
  • InteliJ
  • MacOS

 

dependency 추가
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
    implementation group: 'nz.net.ultraq.thymeleaf', name: 'thymeleaf-layout-dialect', version: '2.4.1'

spring-boot-starter-thymeleaf : thymleaf 뷰 템플릿 엔진을 사용하기 위한 기본적인 라이브러리

thymeleaf=layout-dialect : thymeleaf를 이용해서 layout을 만들기 위해 추가적으로 사용되는 라이브러리

 

Bean등록
@Configuration
public class LayoutConfig {
    @Bean
    public LayoutDialect layoutDialect(){
        return new LayoutDialect();
    }
}

 

사용법

1. 고정적인 head, header, footer 영역은 th:replace="fragments/head :: headFragment" 를 사용해서 정의하자.

:: 앞은 경로를, :: 뒤는 구분자를 의미한다.

 

2. html 태그에 xmlns:th="http://www.thymeleaf.ofg" 네임스페이스를 작성해주어야 IDE가 타임리프 문법에 error를 뿌리지 않는다. 또한, layout의 틀을 만들때는 꼭 xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" 네임스페이스를 적어주어야 한다! (layout의 틀임을 알려주는 격)

 

Layout 구조
  • layout/layout.html : layout의 기본 틀이되는 html
  • layout/fragments/head.html : css관리
  • layout/fragments/script.html : script 관리
  • layout/fragments/top.html : body의 머리
  • layout/fragments/footer.html : body의 꼬리
  • layout/fragments/sidebar.html : 사이드메뉴
  • content : body의 몸통

 

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

<!-- 공통 헤드-->
<th:block th:replace="/layout/fragments/head :: headFragment"></th:block>

<body id="page-top">
<div id="wrapper">
    <!-- 사이드바-->
    <th:block th:replace="/layout/fragments/sidebar :: sidebarFragment"></th:block>

    <div id="content-wrapper" class="d-flex flex-column">
        <div id="content">
            <!-- 상단바-->
            <th:block th:replace="/layout/fragments/top :: topbarFragment"></th:block>

            <!-- 본문-->
            <th:block layout:fragment="content"></th:block>
        </div>

        <!-- 공통 하단-->
        <th:block th:replace="/layout/fragments/footer :: footerFragment"></th:block>
    </div>
</div>

<!-- 공통 스크립트-->
<th:block th:replace="/layout/fragments/script :: scriptFragment"></th:block>
</body>
</html>

 

 

footer.html
<!DOCTYPE html>
<html lagn="ko" xmlns:th="http://www.thymeleaf.org">

<!-- Footer -->
<th:block th:fragment="footerFragment">
    <footer class="sticky-footer bg-white">

        .... 하단(footer) 코드 작성

    </footer>
</th:block>

</html>

 

head.html
<!DOCTYPE html>
<html lagn="ko" xmlns:th="http://www.thymeleaf.org">

<!-- Head -->
<th:block th:fragment="headFragment">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        .... head 태그 코드 작성

        <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet" />
        <link th:href="@{/bootstrap/vendor/fontawesome-free/css/all.min.css}" rel="stylesheet" type="text/css" />
        <link th:href="@{/bootstrap/css/sb-admin-2.min.css}" rel="stylesheet" />

    </head>
</th:block>
</html>

 

script.html
<!DOCTYPE html>
<html lagn="ko" xmlns:th="http://www.thymeleaf.org">

<!-- 공통으로 쓰이는 script 파일을넣는다.-->
<th:block th:fragment="scriptFragment">


    <!-- Bootstrap core JavaScript-->
    <script th:src="@{/bootstrap/vendor/jquery/jquery.min.js}"></script>
    <script th:src="@{/bootstrap/vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>

    .... 스크립트 코드 작성

    <!-- Page level custom scripts -->
    <script th:src="@{/bootstrap/js/demo/chart-area-demo.js}"></script>
    <script th:src="@{/bootstrap/js/demo/chart-pie-demo.js}"></script>

</th:block>
</html>

 

sidebar.html
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">

<th:block th:fragment="sidebarFragment">

    <!-- Sidebar -->
    <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">

        .... 사이드바 코드 작성

    </ul>

</th:block>

</html>

 

top.html
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">

<th:block th:fragment="topbarFragment">

    <!-- Topbar -->
    <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

        .... 상단 코드 작성

    </nav>

</th:block>
</html>

 

 

 

 

결과

 

반응형
저작자표시 비영리 변경금지

'BackEnd > Java' 카테고리의 다른 글

[Spring] Spring Security + jwt 사용  (0) 2022.07.23
SpringBoot MySQL & JPA 연동  (0) 2022.03.31
[IntelliJ] Lombok 설치 및 Lombok Annotation 정리  (0) 2022.03.16
JAVA 버전이 변경 안될때 체크사항  (0) 2022.03.16
IntelliJ 설치  (0) 2022.03.15

+ Recent posts

티스토리툴바