킹다의 개발블로그

thymeleaf 적용해보기 본문

02. 프레임워크/thymeleaf

thymeleaf 적용해보기

킹다킹 2021. 8. 30. 17:12
반응형

Spring boot 와 JSP 보다는 권장 템플릿 엔진인 타임리프를 적용해보기

1. application.yml 설정

spring:
thymeleaf:
 enabled: true
 cache: false #개발시 새로고침하면 적용.
 prefix: classpath:templates/
 suffix: .html
 check-template-location: true
  • thymeleaf - enabled : 타임리프 사용 활성화
  • thymeleaf - cache : 서버를 재시작할 필요없이 새로 고침만으로 반영되게 할 수 있음 (캐시를 남기지 않음)

개발할 때는 false로 두고 운영 시에는 true로 설정

  • thymeleaf - prefix : html 폴더 classpath 경로 지정
  • thymeleaf - suffix : .html 파일 설정
  • thymeleaf - check-template-location : templates 디렉토리에 파일이 있는지 없는지 체크 후, 없으면 에러를 발생시킴

2. dependency 추가 (gradle 기준)

dependencies {
  implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
    implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'
}
  1. 타임리프 적용을 위한 것
  2. 타임리프의 layout을 사용하기 위한 것

3. 레이아웃 적용

디렉토리 : templates/home/

  1. index.html
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layouts/layout}">
<!-- index.html 고유 CSS 추가 -->
<th:block layout:fragment="css"> </th:block>

<!-- index.html 고유 스크립트 추가 -->
<th:block layout:fragment="script"> </th:block>
<div id="main" layout:fragment="content">
    <div>
        <a sec:authorize="isAnonymous()" th:href="@{/chart}">dhtmlx</a>
        <a sec:authorize="isAnonymous()" th:href="@{/test1}">amChart</a>
        <a sec:authorize="isAnonymous()" th:href="@{/test2}">테스트2</a>
    </div>
</div>
</html>

templates/fragments/

  1. footer.html
<!DOCTYPE html>
<html lang="ko">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
    <footer th:fragment="footerFragment">
        <div id="footer">
            <p1>footer</p1>
        </div>
    </footer>
</html>

templates/fragments/

  1. header.html
<!DOCTYPE html>
<html lang="ko">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<header th:fragment="headerFragment">
    <div id="header">
        <p1>header</p1>
    </div>
</header>
</html>

templates/layouts/

  1. 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="~{common/common :: commonHead}"></th:block>

<!-- [header] 영역 시작 -->
<header th:replace="~{fragments/header :: headerFragment}"></header>
<!-- [header] 영역 끝 -->
<body>
<!-- [content] 영역 시작 -->
<div layout:fragment="content"></div>
<!-- [content] 영역 끝 -->
</body>
<!-- [footer] 영역 시작 -->
<th block th:if="${'footer' == 'no'}">
<footer th:replace="~{fragments/footer :: footerFragment}"></footer>
</th>
<!-- [footer] 영역 끝 -->
</html>

templates/common/

  1. common.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="commonHead">
    <!-- 공통적인 CSS -->
    <link th:href="@{/css/suite.css}" rel="stylesheet" type="text/css"/>
    <!-- 개별적인 CSS -->
    <th:block layout:fragment="css"></th:block>
    <link th:href="@{/css/content.css}" rel="stylesheet" type="text/css"/>

    <!-- 공통으로 쓰이는 js파일을넣는다.-->
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script th:src="@{/js/suite.js}" rel="script" type="text/javascript"></script>

</th:block>
</html>
반응형
Comments