1. 소개

Thymeleaf 는 HTML, XML, JavaScript, CSS 및 일반 텍스트를 처리하고 생성하기위한 Java 템플릿 엔진입니다. Thymeleaf 및 Spring에 대한 소개는 이 글을 참조하십시오 .

이 글에서 우리는 템플릿에 초점을 맞출 것입니다. – 가장 합리적으로 복잡한 사이트가 어떤 식 으로든 수행해야하는 작업입니다. 간단히 말해, 페이지는 머리글, 바닥 글, 메뉴 등과 같은 일반적인 페이지 구성 요소를 공유해야합니다.

Thymeleaf는 사용자 지정 방언을 사용하여이를 해결 합니다. Thymeleaf 표준 레이아웃 시스템 또는 레이아웃 파일 작업을 위해 데코레이터 패턴을 사용하는 레이아웃 방언 을 사용하여 레이아웃을 구축 할 수 있습니다.

이 기사에서는 Thymeleaf Layout Dialect 의 몇 가지 기능에 대해 설명합니다 . 여기 에서 찾을 수 있습니다 . 보다 구체적으로 레이아웃 생성, 사용자 지정 제목 또는 헤드 요소 병합과 같은 기능에 대해 설명합니다.

2. Maven 의존성

먼저 Thymeleaf를 Spring과 통합하는 데 필요한 구성을 살펴 보겠습니다. thymeleaf 스프링 라이브러리는 우리의 의존성이 필요합니다 :

<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf</artifactId>
    <version>3.0.11.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring5</artifactId>
    <version>3.0.11.RELEASE</version>
</dependency>

스프링 4 프로젝트는, 그 주 thymeleaf - spring4의  라이브러리는 대신 사용해야합니다 thymeleaf-spring5 . 최신 버전의 의존성은 여기 에서 찾을 수 있습니다 .

또한 사용자 지정 레이아웃 방언에 대한 의존성이 필요합니다.

<dependency>
    <groupId>nz.net.ultraq.thymeleaf</groupId>
    <artifactId>thymeleaf-layout-dialect</artifactId>
    <version>2.4.1</version>
</dependency>

최신 버전은 Maven Central Repository 에서 찾을 수 있습니다 .

3. Thymeleaf 레이아웃 방언 구성

이 섹션에서는 Layout Dialect 를 사용하도록 Thymeleaf를 구성하는 방법에 대해 설명합니다 . 한 걸음 뒤로 물러나 웹 앱 프로젝트에서 Thymeleaf 3.0을 구성하는 방법을 보려면이 사용방법(예제) 를 확인하십시오 .

Maven 의존성을 프로젝트의 일부로 추가 한 후에는 기존 Thymeleaf 템플릿 엔진에 Layout Dialect 를 추가해야합니다 . Java 구성으로이를 수행 할 수 있습니다.

SpringTemplateEngine engine = new SpringTemplateEngine();
engine.addDialect(new LayoutDialect());

또는 XML 파일 구성을 사용하여 :

<bean id="templateEngine" class="org.thymeleaf.spring5.SpringTemplateEngine">
    <property name="additionalDialects">
        <set>
            <bean class="nz.net.ultraq.thymeleaf.LayoutDialect"/>
        </set>
    </property>
</bean>

콘텐츠 및 레이아웃 템플릿의 섹션을 장식 할 때 기본 동작은 모든 콘텐츠 요소를 레이아웃 요소 뒤에 배치하는 것입니다.

때때로 우리는 유사한 요소를 함께 그룹화 할 수 있도록 더 스마트 한 요소 병합이 필요합니다 (js 스크립트 함께, 스타일 시트 함께 등).

이를 달성하려면 구성에 정렬 전략을 추가해야합니다.이 경우 그룹화 전략이됩니다.

engine.addDialect(new LayoutDialect(new GroupingStrategy()));

또는 XML :

<bean class="nz.net.ultraq.thymeleaf.LayoutDialect">
    <constructor-arg ref="groupingStrategy"/>
</bean>

기본 전략은 요소를 추가하는 것입니다. 위에서 언급했듯이 모든 것을 분류하고 그룹화합니다.

어느 전략도 우리의 필요에 맞지 않으면 우리 자신의 SortingStrategy를 구현하고 위와 같이 방언에 전달할 수 있습니다.

4. 네임 스페이스 및 속성 프로세서의 기능

일단 구성되면 레이아웃 네임 스페이스와 5 개의 새 속성 프로세서 인 decorate , title-pattern , insert , replace 및 fragment를 사용할 수 있습니다.

우리는 우리의 HTML 파일을 사용하려는 레이아웃 템플릿을 생성하기 위해, 우리는 다음과 같은 파일 이름을 생성 template.html를 :

<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
...
</html>

보시다시피 네임 스페이스를 표준 xmlns : th =”http://www.thymeleaf.org” 에서 xmlns : layout =”http://www.ultraq.net.nz/thymeleaf/layout”으로 변경했습니다 .

이제 HTML 파일에서 속성 프로세서 작업을 시작할 수 있습니다.

4.1. 레이아웃 : 조각

레이아웃에서 사용자 정의 섹션을 만들거나 동일한 이름을 공유하는 섹션으로 대체 할 수있는 재사용 가능한 템플릿을 만들기 위해 template.html 본문에 fragment 속성 을 사용 합니다 .

<body>
    <header>
        <h1>New dialect example</h1>
    </header>
    <section layout:fragment="custom-content">
        <p>Your page content goes here</p>
    </section>
    <footer>
        <p>My custom footer</p>
        <p layout:fragment="custom-footer">Your custom footer here</p>
    </footer>
</body>

사용자 정의 HTML로 대체 될 두 개의 섹션 (콘텐츠 및 바닥 글)이 있습니다.

조각을 찾을 수없는 경우 사용할 기본 HTML을 작성하는 것도 중요합니다.

4.2. 레이아웃 : 장식

다음 단계는 레이아웃으로 장식 될 HTML 파일을 만드는 것입니다.

<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  layout:decorate="~{template.html}">
<head>
<title>Layout Dialect Example</title>
</head>
<body>
    <section layout:fragment="custom-content">
        <p>This is a custom content that you can provide</p>
    </section>
    <footer>
        <p layout:fragment="custom-footer">This is some footer content
          that you can change</p>
    </footer>
</body>
</html>

세 번째 줄에서 볼 수 있듯이 layout : decorate 를 사용하고 데코레이터 소스를 지정합니다. 콘텐츠 파일의 조각과 일치하는 레이아웃 파일의 모든 조각은 사용자 지정 구현으로 대체됩니다.

4.3. 레이아웃 : 제목 패턴

점을 감안 레이아웃 방언이 자동으로 콘텐츠를 템플릿에 발견되는 하나 레이아웃의 제목을 무시, 당신은 제목의 일부 레이아웃에서 발견 보존 할 수 있습니다.

예를 들어, 이동 경로를 만들거나 페이지 제목에 웹 사이트 이름을 유지할 수 있습니다. 이러한 경우에는 layout : title-pattern 프로세서가 도움이됩니다. 레이아웃 파일에 지정해야하는 것은 다음과 같습니다.

<title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">Baeldung</title>

따라서 이전 단락에 제시된 레이아웃 및 콘텐츠 파일의 최종 결과는 다음과 같습니다.

<title>Baeldung - Layout Dialect Example</title>

4.4. 배치 : 삽입 / 배치 : 바꾸기

첫 번째 프로세서 인 layout : insert 는 Thymeleaf의 원래 th : ​​insert 와 유사 하지만 전체 HTML 조각을 삽입 된 템플릿에 전달할 수 있습니다. 재사용하고 싶지만 내용이 너무 복잡해서 컨텍스트 변수만으로 결정하거나 구성 할 수없는 HTML이있는 경우 매우 유용합니다.

두 번째 인 layout : replace 는 첫 번째 것과 유사하지만 th : ​​replace 의 동작으로 실제로 호스트 태그를 정의 된 조각의 코드로 대체합니다.

5. 결론

이 기사에서는 Thymeleaf에서 레이아웃을 구현하는 몇 가지 방법을 설명했습니다.

예제는 Thymeleaf 버전 3.0을 사용합니다. 프로젝트를 마이그레이션하는 방법을 배우려면이 절차 를 따르십시오 .

이 예제의 전체 구현은 GitHub 프로젝트 에서 찾을 수 있습니다 .

테스트하는 방법? 우리의 제안은 먼저 브라우저로 플레이 한 다음 기존 JUnit 테스트도 확인하는 것입니다.

위에서 언급 한 Layout Dialect를 사용하여 레이아웃을 만들거나 자신 만의 솔루션을 쉽게 만들 수 있습니다. 이 기사가 주제에 대한 더 많은 통찰력을 제공하고 필요에 따라 선호하는 접근 방식을 찾을 수 있기를 바랍니다.