search

quack337 / bbs1

0 stars 0 forks source link

thymeleaf 뷰에서 공통 부분 추출 #6

Open quack337 opened 4 months ago

quack337 commented 4 months ago

thymeleaf 뷰 파일들에 반복 등장하는 공통 부분이 있다.

이런 부분들을 thymeleaf fragments 파일에 추출하여 공유하자.

fragments.html 파일

<!DOCTYPE html>
<html 
  xmlns:th="http://www.thymeleaf.org"
  xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<body>

<div class="main-menu" th:fragment="main-menu">
  <div>
    <h1>소프 게시판</h1>
    <a th:href="@{/}">메인</a>
    <span sec:authorize="!isAuthenticated()" class="right">
      <a th:href="@{/login}">로그인</a>
      <a href="#">회원 가입</a>
    </span>                  
    <span sec:authorize="isAuthenticated()" class="right">
      <a href="#">
        <span th:text="${#authentication.principal.name}"></span>
      </a>
      <a th:href="@{/logout_processing}">로그아웃</a>
    </span>
  </div>
</div>

<div class="footer" th:fragment="footer">
  <div style="float: left; padding-right: 20px;">
    <img th:src="@{/images/skhu.png}" style="width: 200px; "/>
  </div>
  <div>152-716 서울시 구로구 연동로 320 / 지하철 1, 7호선 온수(성공회대입구)역 T.02-2610-4114</div>
  <div style="margin-top: 5px;">Copyright (c) Sung-Kong-Hoe Univisity. All rights reserved.</div>
</div>  

</body>
</html>

위와 같이 th:fragment="main-menu" th:fragment="footer" 부분을 fragments.html 파일에 구현하고, main menu, footer를 출력할 부분에 다음과 같은 한 줄 코드를 넣는다.

<div th:replace="~{fragments::main-menu}"></div>
<div th:replace="~{fragments::footer}"></div>