[Spring5] Thylemeaf Layout Dialect 적용하기

Thymleaf layout dialect 라이브러리를 사용해서 Thymleaf를 <head/>, <footer/>, <script/> 등 모든 페이지에서 공통으로 사용하는 영역에 대해서 별도의 파일로 분리가 가능하다.

그리고 각각의 페이지에서 필요한 script나 style을 정의해 사용할 수도 있다.

이를 위해 사용되는 지시자로 fragment, layout, replace 등이 있다.

 

1) Thymleaf Layout Dialect 라이브러리 추가 (build.gradle.kt)

    /** Thymeleaf */
    implementation("org.springframework.boot:spring-boot-starter-thymeleaf")

    /** Thymeleaf Layout Dialect */
    implementation("nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect")

 

2) ViewResolver에 Dialect 추가

    @Bean
    fun thymeleafTemplateEngine(): ISpringWebFluxTemplateEngine {
        val templateEngine = SpringWebFluxTemplateEngine()
        templateEngine.setTemplateResolver(thymeleafTemplateResolver())
        templateEngine.addDialect(LayoutDialect()) // <-- 추가되는 부분
        return templateEngine
    }

* Thymleaf 설정을 위한 전체 소스코드는 이전 포스트 참고 - jolly-sally.tistory.com/49 

[Spring5] WebFlux + Thymeleaf + Kotlin

 

3) 파일 분리

---

이전 포스트

본문의 이해를 위해 먼저 또는 함께 보면 좋을 포스트이다.

 

1. Spring Webflux에서 Thymeleaf를 Kotlin으로 구현하기 - jolly-sally.tistory.com/49

[Spring5] WebFlux + Thymeleaf + Kotlin

2. Thymeleaf + Vue CDN 함께 사용하기 - jolly-sally.tistory.com/58

[Spring5] Thymeleaf + Vue CDN 혼용하기

---

참고 사이트

ultraq.github.io/thymeleaf-layout-dialect/getting-started/

Getting started

www.hanumoka.net/2020/05/21/springBoot-20200521-springboot-thymeleaf-layout-dialect/

Springboot에 thymeleaf-layout-dialect적용하기

eblo.tistory.com/57

spring boot - Thymeleaf 화면 구성(Layout)