Thymeleaf：カスタムレイアウト方言

投稿日: 2019-10-19 2022-11-06
タグ: Spring MVC, Thymeleaf

1. 序章

Thymeleaf は、HTML、XML、JavaScript、CSS、およびプレーンテキストを処理および作成するためのJavaテンプレートエンジンです。 ThymeleafとSpringの紹介については、この記事をご覧ください。

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

Thymeleafは、カスタムダイアレクトを使用して、Thymeleaf標準レイアウトシステムまたはレイアウトダイアレクトを使用してレイアウトを構築できます。これはデコレータパターンを使用してレイアウトファイルを操作します。

この記事では、 Thymeleafレイアウトダイアレクトのいくつかの機能について説明します。これは、ここにあります。具体的には、レイアウトの作成、カスタムタイトル、ヘッド要素のマージなどの機能について説明します。

2. Mavenの依存関係

まず、ThymeleafをSpringと統合するために必要な構成を見てみましょう。 thymeleaf-spring ライブラリは、依存関係に必要です。

<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>

Spring 4プロジェクトの場合、thymeleaf-spring5の代わりにthymeleaf-spring4ライブラリを使用する必要があることに注意してください。依存関係の最新バージョンはここにあります。

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

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

最新バージョンは、 Maven CentralRepositoryにあります。

3. Thymeleafレイアウト方言構成

このセクションでは、 LayoutDialectを使用するようにThymeleafを構成する方法について説明します。一歩下がって、WebアプリプロジェクトでThymeleaf 3.0を構成する方法を確認したい場合は、このチュートリアルを確認してください。

プロジェクトの一部としてMaven依存関係を追加したら、 LayoutDialectを既存の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. 名前空間と属性プロセッサの機能

構成が完了すると、使用を開始できますレイアウト名前空間、および5つの新しい属性プロセッサ：飾る、 タイトルパターン 、 入れる 、交換、と断片。

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. layout：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. layout：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：title-pattern

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

たとえば、パンくずリストを作成したり、ページタイトルにWebサイトの名前を保持したりできます。このような場合、 layout：title-patternプロセッサが役立ちます。レイアウトファイルで指定する必要があるのは次のとおりです。

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

したがって、前の段落で示したレイアウトとコンテンツファイルの最終結果は次のようになります。

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

4.4. layout：insert / layout：replace

最初のプロセッサlayout：insert は、Thymeleafの元の th：insert に似ていますが、挿入されたテンプレートにHTMLフラグメント全体を渡すことができます。再利用したいHTMLがあるが、その内容が複雑すぎてコンテキスト変数だけで決定または構築できない場合に非常に便利です。

2番目のlayout：replace は最初のものと似ていますが、 th：replace の動作を持ち、実際にはホストタグを定義されたフラグメントのコードに置き換えます。

5. 結論

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

例ではThymeleafバージョン3.0を使用していることに注意してください。プロジェクトを移行する方法を知りたい場合は、この手順に従ってください。

このチュートリアルの完全な実装は、GitHubプロジェクトにあります。

テスト方法は？最初にブラウザーで遊んでから、既存のJUnitテストも確認することをお勧めします。

上記のLayoutDialect を使用してレイアウトを作成することも、独自のソリューションを簡単に作成することもできます。うまくいけば、この記事はあなたにトピックに関するいくつかのより多くの洞察を与え、あなたはあなたのニーズに応じてあなたの好ましいアプローチを見つけるでしょう。

getdocs

13036