設置
ThymeleafスターターパックをSpring Boot pomに追加する必要があります。
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
ただし、Spring Boot 2以降では、これだけでは不十分です。 Pomの方言はSpring Bootの一部ではないため、自分で追加する必要があります。
<dependency> <groupId>nz.net.ultraq.thymeleaf</groupId> <artifactId>thymeleaf-layout-dialect</artifactId> <version>2.3.0</version> </dependency>
コード例でもBootstrapを使用しているため、Webファイルも追加する必要があります。
<dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>4.0.0</version> </dependency>
最後のステップとして、注釈付きの@ConfigurationクラスにLayoutDialect Beanを作成する必要があります。
@Bean public LayoutDialect layoutDialect() { return new LayoutDialect(); }
さらに進みましょう。
レイアウト方言の例
この例では、レイアウトダイアレクトを使用してページのレイアウトを定義し、コードをより再利用できるようにする方法を示します。レイアウトとしてlayout.htmlを使用するindex.htmlページを使用します。 Layout.htmlという名前は任意であり、何でもかまいません。 さらにいくつかのファイルがそこに追加されますが、これらはデモ用です。
この図は、リソースフォルダーの構造を示しています。 Spring Bootは、resources / templatesディレクトリ内のすべてのThymeleafテンプレートを自動的に検索します。
Layout.html
<!DOCTYPE html> <html> <head> <title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">Igorski.co</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.min.css}" rel="stylesheet" media="screen" /> </head> <body> <div th:replace="fragments/header :: header"> This header content is going to be replaced.</div> <div class="container"> <div class="row"> <div class="col-2" layout:fragment="sidebar"> <h1>This is the layout's sidebar</h1> <p>This content will be replaced if the page using the layout also defines a layout:fragment="sidebar" segment.</p> </div> <div class="col" layout:fragment="content"> <h1>This is the Layout's main section</h1> <p>This content will be replaced if the page using the layout also defines a layout:fragment="content" segment. </p> </div> </div> </div> <footer th:insert="fragments/footer :: footer" class="footer"> This content will remain, but other content will be inserted after it. </footer> </body> </html>
Layout.htmlは、Layout Dialectが提供する5つのプロセッサーのうち2つを使用します。 最初のレイアウトは、ヘッダーテンプレートプロセッサです 。 ヘッダーテンプレートプロセッサは、ユーザーが結果のページに最適なタイトルを決定するのに役立ちます。 この例では、最終タイトルをページタイトルとレイアウトヘッダーの組み合わせとして定義しています。 このために、2つの特別なトークンが使用されます。これらは、レイアウトダイアレクト、 $ LAYOUT_TITLEおよび$ CONTENT_TITLEで提示されます。
layout.htmlで最も重要なのは、レイアウトによって定義された2つのプレースホルダー（またはフラグメント） です 。 フラグメントプロセッサです 。 このプロセッサにより、レイアウトでコンテンツプレースホルダーを定義できます。 これらのプレースホルダーのコンテンツは、後でレイアウトを使用するページのコンテンツに置き換えられます。 この例では、2つの異なるフラグメントを定義しています。1つはサイドバー用で、もう1つはメインコンテンツ用です。 ただし、フラグメントの名前が異なる場合は、必要なだけフラグメントを作成できます。
Index.html
<!DOCTYPE html> <html xmlns:layout="http://www.w3.org/1999/xhtml" layout:decorate="~{layouts/layout}"> <head> <title>Home Page</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link th:href="@{/css/core.css}" rel="stylesheet" media="screen" /> </head> <body> <div class="container"> <div class="row"> <div class="col-2" layout:fragment="sidebar"> <h1>Sidebar</h1> <a href="#">Login</a> </div> <div class="col" layout:fragment="content"> <h1>Welcome to the Index page</h1> <br>This content is replacing the content of the layout:fragment="content"<br> placeholder in layout.html</p> </div> </div> </div> </body> </html>
index.htmlは、layout：decorateプロセッサのレイアウトとしてlayout.htmlを使用することを宣言します。 これを行った後、index.htmlがlayout.htmlテンプレートを使用することを宣言します。 ここで最も重要なことは、フラグメントプロセッサの使用です 。 同じ名前のレイアウトのフラグメントのコンテンツの代わりに使用されるコンテンツを示します。 言及する価値のある別のことは、 見出しです。 処理後に取得されるindex.htmlページでは、ヘッダーは2つのヘッダーの組み合わせになります。1つはindex.htmlから、もう1つはレイアウトからです。 それらは結合されます。
layout.htmlとindex.htmlは、処理せずにブラウザーで表示できます。 しかし、処理後、index.htmlは非常に異なることがわかります。 index.htmlのコンテンツは、レイアウトのスタイルを設定し、レイアウトの定義に基づいてレイアウト内にコンテンツを配置するために使用されます。
この例には、ヘッダーとフッターの2つの要素があります。 ただし、Thymeleaf Standard Layout th：replaceおよびth：insertプロセッサを使用します。 Layout Dialectに示されている5つのプロセッサのうち最後の2つと非常によく似ています。layout：insertとlayout：replaceです。 彼らは多かれ少なかれ同じことをします。 前に説明したプロセッサとは異なり、これらの2つは階層的ではなく包括的なアプローチを使用します。 これは、Thymeleafフォームのより一般的なものです。
写真は最終ページビューを示しています。 index.htmlマークアップでは言及されていませんが、ヘッダーとフッターの両方があります。