Tech Collection

[Thymeleaf] Gradle에 적용하기 본문

Build/Note

[Thymeleaf] Gradle에 적용하기

eee_269 2021. 2. 18. 15:39
728x90
반응형
IntelliJ, JDK 11, Thymeleaf 3.*, spring boot 2.4.1, MariaDB

2021/02/18 - [Project/Spring Boot] - [Thymeleaf] 기본 문법

 

[Thymeleaf] 기본 문법

1. 해당 페이지에 thymeleaf 적용 2. 링크 / 경로 지정 내용 이렇게만 알아도 반은 한다.................... 아마도..............

jinny-1st.tistory.com

1. Thymeleaf 를 gradle dependency에 추가

> build.gradle

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
	implementation('nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect')
}

- implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' : thymeleaf 적용

- implementation('nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect') : thymeleaf의 layout을 사용하기 위함

 

2. thymeleaf 사용 설정

> src\main\resources\templates\application.properties

spring.thymeleaf.cache=false
spring.thymeleaf.check-template-location=true
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

3. layout에 쓸 fragment 생성

> src\main\resources\templates\fragment\config.html

공통적으로 쓰일 css, js 삽입 페이지

<html xmlns:th="http://www.thymeleaf.org">
    <th:block th:fragment="configFragment">
        <meta name="description" content="Directing Template">
        <meta name="keywords" content="Directing, unica, creative, html">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <!-- 공통 css -->
        <link rel="stylesheet"
              href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

        <link rel="stylesheet" href="css파일 경로" type="text/css">
        
        <!-- Js Plugins -->
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

        <script src="js파일 경로"></script>
        
        <!-- default_layout을 사용하는 페이지에서 단독으로 넣을 css 공간 -->
        <th:block layout:fragment="css" ></th:block>

        <!-- default_layout을 사용하는 페이지에서 단독으로 넣을 script 공간 -->
        <th:block layout:fragment="script" ></th:block>

    </th:block>
</html>

- layout:fragment 를 통해 지정해주면 나중에 페이지에서

    <div layout:fragment="fragment 이름">개별적으로 넣을 내용</div> 과 같은 형식으로 삽입가능

- css와 js를 thymeleaf를 사용해서 넣으려고 하니 페이지 로딩 시 인식이 되지 않더라... 왜그런진 아직 모름..

- bootstrap 3.* 버전 이상으로 쓰면 jquery 버전은 1.9 ~ 2.9 사이의 것을 써야 한다고 에러 뜸

 

> src\main\resources\templates\fragment\header.html

공통적으로 들어갈 header

<html xmlns:th="http://www.thymeleaf.org">
    <header class="header" th:fragment="commonHeader">
        ~ header에 들어갈 내용들 ~
    </header>
</html>

 

> src\main\resources\templates\fragment\footer.html

공통적으로 들어갈 footer

<html xmlns:th="http://www.thymeleaf.org">
    <footer th:fragment="commonFooter">
        ~ footer에 들어갈 내용 ~
    </footer>
</html>

 

4. 기본 layout 페이지 지정

> src\main\resources\templates\layout\default_layout.html

layout만 지정하면 header, footer 바로 적용할 수 있도록 도와주는 페이지

<html lang="ko"
    xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net/nz/thymeleaf/layout">
    
    <meta charset="UTF-8">
    <title>페이지 이름</title>
    
    <!-- config fragment 사용-->
    <th:block th:replace="fragment/config :: configFragment" ></th:block>
    
    <!-- header fragment 사용-->
    <th:block th:replace="fragment/header :: commonHeader" ></th:block>
    
    <!-- 현재 layout을 사용하는 content fragment의 내용을 삽입-->
    <th:block layout:fragment="content" ></th:block>
    
    <!-- footer fragment 사용-->
    <footer th:replace="fragment/footer :: commonFooter"></footer>
</html>

- <th:block th:replace="fragment/config :: configFragment" ></th:block>

    : fragment폴더의 config.html 파일에 있는 태그 중 configFragment 라는 이름의 fragment tag를 사용하겠다

 

 

5. main 화면으로 쓸 index.html에 layout 적용하기

> src\main\resources\templates\index.html

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

    <div layout:fragment="content">
        ~ index에 들어갈 내용 ~
    </div>
</html>

- layout:decorate="~{layout/default_layout}"

    : thymeleaf 2.* 버전에서는 layout:decorator를 썼지만 3.* 버전부터는 layout:decorate를 사용한다.

- <div layout:fragment="content">

    : default_layout에서 지정해준 fragment를 활용하여 index에 적용 시킬 내용을 삽입한다.

 

728x90
반응형

'Build > Note' 카테고리의 다른 글

테스트 코드 작성하는 이유  (0) 2021.03.20
[Thymeleaf] 기본 문법  (0) 2021.02.18
[Spring Structure] @Controller? @RestController?  (0) 2021.01.19
[Api 활용] Open Api 의 자료를 json으로 가져오기  (2) 2021.01.18
[Setting] MariaDB와 SpringBoot를 연동하자!  (0) 2021.01.11
'Build/Note' Related Articles more