Thymeleaf：カスタムレイアウト方言
1. 前書き
Thymeleafは、HTML、XML、JavaScript、CSS、およびプレーンテキストを処理および作成するためのJavaテンプレートエンジンです。 ThymeleafとSpringの紹介については、this write-upをご覧ください。
この記事では、テンプレートに焦点を当てます。これは、最も合理的に複雑なサイトが何らかの方法で行う必要があることです。 簡単に言えば、ページはヘッダー、フッター、メニューなどの一般的なページコンポーネントを共有する必要があります。
Thymeleafは、カスタムダイアレクト（Thymeleaf Standard Layout SystemまたはLayout Dialectを使用してレイアウトを構築できます）を使用して、レイアウトファイルの操作にデコレータパターンを使用することに対処します。
この記事では、hereにあるThymeleaf Layout Dialectのいくつかの機能について説明します。 具体的には、レイアウトの作成、カスタムタイトル、ヘッド要素のマージなどの機能について説明します。
2. Mavenの依存関係
まず、ThymeleafをSpringと統合するために必要な構成を見てみましょう。 依存関係にはthymeleaf-springライブラリが必要です。
org.thymeleaf
thymeleaf
3.0.9.RELEASE
org.thymeleaf
thymeleaf-spring4
3.0.9.RELEASE
Spring 4プロジェクトの場合、thymeleaf-spring5の代わりにthymeleaf-spring4ライブラリを使用する必要があることに注意してください。 依存関係の最新バージョンはhereで見つかる可能性があります。
カスタムレイアウト方言の依存関係も必要です。
nz.net.ultraq.thymeleaf
thymeleaf-layout-dialect
2.3.0
最新バージョンはMaven Central Repositoryにあります。
3. Thymeleafレイアウト方言構成
このセクションでは、Layout Dialectを使用するようにThymeleafを構成する方法について説明します。 一歩下がって、WebアプリプロジェクトでThymeleaf 3.0を構成する方法を確認したい場合は、このtutorialを確認してください。
プロジェクトの一部としてMaven依存関係を追加したら、既存のThymeleafテンプレートエンジンにLayout Dialectを追加する必要があります。 Java構成でこれを行うことができます。
SpringTemplateEngine engine = new SpringTemplateEngine();
engine.addDialect(new LayoutDialect());または、XMLファイル構成を使用して：
コンテンツおよびレイアウトテンプレートのセクションを装飾するときのデフォルトの動作は、レイアウト要素の後にすべてのコンテンツ要素を配置することです。
要素のよりスマートなマージが必要な場合があり、同様の要素を一緒にグループ化することができます（jsスクリプトを一緒に、スタイルシートを一緒になど）。
それを実現するには、構成にソート戦略を追加する必要があります。この場合、グループ化戦略になります。
engine.addDialect(new LayoutDialect(new GroupingStrategy()));またはXMLで：
デフォルトの戦略は、要素を追加することです。 上記で、すべてをソートしてグループ化します。
どちらの戦略もニーズに合わない場合は、独自のSortingStrategyを実装して、上記のように方言に渡すことができます。
4. 名前空間と属性プロセッサの機能
構成が完了すると、layout名前空間と、5つの新しい属性プロセッサ（decorate、title-pattern、insert、replace、およびfragment.）の使用を開始できます。
HTMLファイルに使用するレイアウトテンプレートを作成するために、template.htmlという名前の次のファイルを作成しました。
...
ご覧のとおり、名前空間を標準のxmlns:th=”http://www.thymeleaf.org”からxmlns:layout=”http://www.ultraq.net.nz/thymeleaf/layout”に変更しました。
これで、HTMLファイルで属性プロセッサの使用を開始できます。
4.1. layout:fragment
レイアウトにカスタムセクションを作成するか、同じ名前を共有するセクションに置き換えることができる再利用可能なテンプレートを作成するために、template.html本体内でfragment属性を使用します。
New dialect example
Your page content goes here
カスタムHTMLで置き換えられる2つのセクション（コンテンツとフッター）があることに注意してください。
フラグメントが見つからない場合に使用されるデフォルトのHTMLを作成することも重要です。
4.2. layout:decorate
次のステップは、レイアウトで装飾されるHTMLファイルを作成することです。
Layout Dialect Example
This is a custom content that you can provide
3行目に示されているように、layout:decorateを使用して、デコレータソースを指定します。 コンテンツファイルのフラグメントに一致するレイアウトファイルのすべてのフラグメントは、カスタム実装に置き換えられます。
4.3. layout:title-pattern
Layout dialectがレイアウトのタイトルをコンテンツテンプレートにあるもので自動的に上書きすることを考えると、レイアウトにあるタイトルの一部を保持することができます。
たとえば、パンくずリストを作成したり、ページタイトルにWebサイトの名前を保持したりできます。 このような場合、layout:title-patternプロセッサにヘルプが付属しています。 レイアウトファイルで指定する必要があるのは次のとおりです。
example したがって、前の段落で示したレイアウトとコンテンツファイルの最終結果は次のようになります。
example - Layout Dialect Example 4.4. layout:insert/layout:replace
最初のプロセッサlayout:insertは、Thymeleafの元のth:insertに似ていますが、挿入されたテンプレートにHTMLフラグメント全体を渡すことができます。 再利用したいHTMLがあるが、その内容が複雑すぎてコンテキスト変数だけでは決定または構築できない場合に非常に便利です。
2番目のlayout:replaceは最初のものと似ていますが、th:replaceの動作があり、実際にはホストタグを定義されたフラグメントのコードに置き換えます。
5. 結論
この記事では、Thymeleafでレイアウトを実装するいくつかの方法について説明しました。
例ではThymeleafバージョン3.0を使用していることに注意してください。プロジェクトを移行する方法を学びたい場合は、このprocedureに従ってください。
このチュートリアルの完全な実装は、the GitHub projectにあります。
How to test?最初にブラウザーで遊んでから、既存のJUnitテストも確認することをお勧めします。
上記のLayout Dialectを使用してレイアウトを作成することも、独自のソリューションを簡単に作成することもできます。 願わくば、この記事がこのトピックに関するより多くの洞察を与えてくれて、あなたのニーズに応じてあなたが好むアプローチを見つけることを願っています。