Jin's Dev Story

[Thymeleaf] 페이지 레이아웃 본문

Web & Android/Thymeleaf

[Thymeleaf] 페이지 레이아웃

woojin._. 2023. 10. 17. 15:43 
// 의존성 추가
implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:3.2.0'
  • header, footer, menu 등 공통적인 페이지 구성 요소들을 페이지 레이아웃 기능을 통해서 1개로 관리

예제

  • header.html

    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div th:fragment="header">
  헤더 영역입니다.
</div>
</body>
</html>
    <!DOCTYPE html>
<html xmlns:th=http://www.thymeleaf.org>
<div th:fragment="header">
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03"
            aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="/">Shop</a>

    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
            <li class="nav-item">
                <a class="nav-link" href="/admin/item/new">상품 등록</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/admin/items">상품 관리</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/cart">장바구니</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/orders">구매이력</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/members/login">로그인</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/members/logout">로그아웃</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0" th:action="@{/}" method="get">
            <input name="searchQuery" class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>
</div>
</html>

  • footer.html

    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:fragment="footer">
<h1>Footer 페이지</h1>
</div>
</html>
    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div class="footer" th:fragment="footer">
      <footer class="page-footer font-small cyan darken-3">
          <div class="footer-copyright text-center py-3">
              2023 Spring Shopping Mall Project
          </div>
      </footer>
</div>
</html>

  • layout1.html

    <!DOCTYPE html>
<html lang="en"
    xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
  <meta charset="UTF-8">
  <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" class="content">  <!-- class="content" 붙여주면 내용들을 가운데 정렬 해줌 -->
  </div>
  <div th:replace="~{fragments/footer :: footer}"></div>
</body>
</html>
    <!DOCTYPE html>
<html lang="en"
    xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 부트스트랩 적용 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  <!-- css 적용 -->
  <link th:href="@{/css/layout1.css}" rel="stylesheet">
  <!-- jquery 적용 -->
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<!--    <script src="https://code.jquery.com/jquery-3.6.1.slim.min.js" integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA=" crossorigin="anonymous"></script>-->
  <!-- 스크립트를 넣을 수 있는 block 생성 스크립트를 사용할 때 이 블럭 사이에 넣으면 됨 -->
  <th:block layout:fragment="script"></th:block>
  <!-- css를 넣을 수 있는 block 생성 -->
  <th:block layout:fragment="css"></th:block>
</head>
<body>
  <div th:replace="~{fragments/header::header}"></div>  <!-- 이 부분의 헤더를 fragments의 header로 대체한다는 뜻 -->
  <!-- 변경될 영역. 앞으로 작업을 하면 이 부분만 변경된다. -->
  <div layout:fragment="content" class="content">
  </div>
  <div th:replace="~{fragments/footer::footer}"></div>  <!-- 이 부분의 헤더를 fragments의 header로 대체한다는 뜻 -->
</body>
</html>

  • temp.html

    <!DOCTYPE html>
<html lang="en"
    xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    layout:decorate="~{layouts/layout1}">
<div layout:fragment="content">
  <h1>LayoutTest 중 입니다.</h1>
</div>
</html>
저작자표시 비영리 변경금지

'Web & Android > Thymeleaf' 카테고리의 다른 글

[Thymeleaf] 날짜 변환  (0) 2023.10.17
[Thymeleaf] 기본 문법  (1) 2023.10.17
[Thymeleaf] Thymeleaf  (0) 2023.10.17
'Web & Android/Thymeleaf' Related Articles more