보라코딩

타임리프 페이지 레이아웃 설정하기 본문

코딩/Spring

타임리프 페이지 레이아웃 설정하기

new 보라 2023. 7. 17. 20:40

Thymeleaf Layout Dialect 이용하면

하나의 레이아웃을 여러 페이지에 똑같이 적용할 수 있다!

 

 

 

pom.xml
<!-- 타임리프 layout Dialect dependency 추가하기 -->
<dependency>
   <groupId>nz.net.ultraq.thymeleaf</groupId>
   <artifactId>thymeleaf-layout-dialect</artifactId>
   <version>3.2.1</version>
</dependency>

 

 

 

 

 

 

 

 

 

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

    <div th:fragment="footer">
        footer 영역입니다.
    </div>

</html>

 

 

 

 

header.html
<!DOCTYPE html>
<html xmlns:th="httml://www.thymeleaf.org">

    <div th:fragment="header">
        header 영역입니다.
    </div>

</html>

 

 

 

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <th:block layout:fragment="script"></th:block>
    <th:block layout:fragment="css"></th:block>
</head>
<body>

    <div th:replace="fragments/header::header"></div>

    <div layout:fragment="content">


    </div>

    <div th:replace="fragments/footer::footer"></div>

</body>
</html>

 

=> 추후에 부트스트랩 넣기 위해 내용 추가!

 

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- CSS only -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link th:href="@{/css/layout1.css}" rel="stylesheet">

    <!-- JS, Popper.js, and jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

    <th:block layout:fragment="script"></th:block>
    <th:block layout:fragment="css"></th:block>
</head>
<body>

    <div th:replace="fragments/header::header"></div>

    <div layout:fragment="content">


    </div>

    <div th:replace="fragments/footer::footer"></div>

</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

thymeleafEx01.html
<!DOCTYPE html>
<html xmlns:th="httml://www.thymeleaf.org"
      xmlns:layout=http://www.ultraq.net.nz/thymeleaf/layout
            layout:decorate="~{layouts/layout1}">

      <div layout:fragment="content">
        본문영역입니다
      </div>

</html>

 

 

 

 

 

이렇게하면

 

 

'코딩 > Spring' 카테고리의 다른 글

JPA를 이용한 데이터베이스 생성 및 접근  (0) 2023.07.23
스프링 시큐리티 설정하기  (0) 2023.07.18
Spring Boot Devtools 적용하기  (0) 2023.07.17
TASTEMATE 시연 시나리오  (0) 2023.06.16
이쁘고 쉬운 alert창 사용하자! SweatAlert  (0) 2023.06.15
'코딩/Spring' Related Articles more