1前書き


Thymeleaf

は、HTML、XML、JavaScript、CSS、およびプレーンテキストを処理および作成するためのJavaテンプレートエンジンです。 ThymeleafとSpringの紹介については、リンクを見てください:/thymeleaf-in-spring-mvc[この記事を書く]

今回の記事では、テンプレート作成に焦点を当てます。最も合理的に複雑なサイトでは、何らかの方法で行う必要があります。簡単に言うと、ページはヘッダー、フッター、メニューなどの共通ページコンポーネントを共有する必要があります。

Thymeleafはカスタムの方言でそれに対処します – あなたは

Thymeleaf標準レイアウトシステム

または

Layout Dialect

を使ってレイアウトを構築することができます – それはレイアウトファイルを扱うためにデコレータパターンを使います。

この記事では、

Thymeleaf Layout Dialect

の便利な機能について説明します。https://github.com/ultraq/thymeleaf-layout-dialect[こちら]具体的には、レイアウトの作成、カスタムタイトル、ヘッドエレメントのマージなどの機能について説明します。


2 Mavenの依存関係

まず、ThymeleafとSpringを統合するために必要な設定を見てみましょう。私たちの依存関係では

thymeleaf-spring

ライブラリが必要です。

<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf</artifactId>
    <version>3.0.9.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring4</artifactId>
    <version>3.0.9.RELEASE</version>
</dependency>

Spring 4プロジェクトでは、

thymeleaf-spring5

の代わりに

thymeleaf-spring4

ライブラリを使用する必要があります。依存関係の最新版はhttps://search.maven.org/classic/#search%7C1%7Cg%3A%22org.thymeleaf%22%20AND%20a%3A%22thymeleaf-spring5%22[で見つけることができます。ここに]。

カスタムレイアウトの方言にも依存関係が必要です。

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

最新版はhttps://search.maven.org/classic/#search%7Cgav%7C1%7Cg%3A%22com.github.zhanhb%22%20AND%20a%3A%22thymeleaf-layout-dialectにあります。 %22[Mavenセントラルリポジトリ]。


3サイ葉のレイアウト方言の設定

このセクションでは、Thymeleafが

Layout Dialect

を使用するように設定する方法について説明します。一歩前に戻り、WebアプリケーションプロジェクトでThymeleaf 3.0を設定する方法を確認したい場合は、/spring-thymeleaf-3[tutorial]のリンクを確認してください。

プロジェクトの一部としてMavenの依存関係を追加したら、

Layout Dialect

を既存のThymeleafテンプレートエンジンに追加する必要があります。これを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名前空間と属性プロセッサの機能

設定が完了したら、

layout

ネームスペース、および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.

レイアウト:fragment


同じ名前を共有するセクションに置き換えることができるレイアウトまたは再利用可能なテンプレートにカスタムセクションを作成するために、

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に置き換えられるセクションが2つあります。コンテンツとフッターです。

フラグメントが見つからない場合に使用されるデフォルトのHTMLを記述することも重要です。


4.2.

レイアウト:decorate


次のステップは、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>

3行目に示すように、

layout:decorate

を使用してデコレータのソースを指定します。コンテンツファイル内のフラグメントと一致するレイアウトファイルからのすべてのフラグメントは、そのカスタム実装によって置き換えられます。


4.3.

レイアウト:タイトルパターン



Layout dialect

は、レイアウトのタイトルをコンテンツテンプレートのタイトルと自動的に上書きするため、レイアウトのタイトルの一部を保持することもできます。

たとえば、ブレッドクラムを作成したり、ページタイトルにWebサイトの名前を保持したりできます。そのような場合には、

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があるが、その内容が複雑すぎて、コンテキスト変数だけで決定したり構成したりすることができない場合は、非常に便利です。

2番目のもの、

layout:replace

は最初のものと似ていますが、

th:replace

の振る舞いを持ちます。これは実際には定義されたフラグメントのコードでホストタグを置き換えます。


5結論

この記事では、Thymeleafでレイアウトを実装するいくつかの方法について説明しました。

例ではThymeleafバージョン3.0を使用していることに注意してください。プロジェクトの移行方法を知りたい場合は、https://ultraq.github.io/thymeleaf-layout-dialect/MigrationGuide.html[手順]に従ってください。

このチュートリアルの完全な実装はhttps://github.com/eugenp/tutorials/tree/master/spring-thymeleaf[the GitHub project]にあります。

  • テスト方法?** 最初にブラウザでプレイしてから、既存のJUnitテストも確認することをお勧めします。

覚えておいて、あなたは上記の

Layout Dialect

を使ってレイアウトを作ることができるか、あるいはあなた自身の解決策を簡単に作ることができる。うまくいけば、この記事であなたはそのトピックについてさらに多くの洞察を与え、あなたはあなたのニーズに応じてあなたの好ましいアプローチを見つけるでしょう。