Thymeleaf ページレイアウト

Thymeleaf の文法と表現に慣れると、後の開発がより便利になります。次に、Thymeleaf が完全な Web システムページレイアウトをどのように実装するかをよく見てください。

1. コードスニペットの導入

テンプレートには、フッター、ヘッダー、メニューなど、他のテンプレートページのコンテンツを含めたいことがよくあります。これを行うために、Thymeleaf はth:fragmentプロパティを提供します。以下は、標準の著作権フッターをページに追加してコードスニペットを導入する方法を示しています。

ステップ 01著作権フッターコードスニペットを定義します。

著作権テンプレートページ footer.html をテンプレートディレクトリに作成します。サンプルコードは次のとおりです。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>
    <div th:fragment="copyright">
        &copy; 2020 The Thymeleaf footer
    </div>
</body>
</html>

上の例では、著作権ページ footer.html を作成し、th:fragment 属性を使用して copyright というコードフラグメントを定義しました。

ステップ 02 では、コードスニペットテンプレートを紹介します。

通常のテンプレートページlayout.htmlを作成します。または th:replace 属性を使用してth:insert、以前に定義した著作権著作権ページをインポートします。サンプルコードは次のとおりです。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>
<h1>Thymeleaf模板引擎</h1>
<h3>页面布局</h3>
<div th:insert="~{footer :: copyright}"></div>
</body>
</html>

上の例では、footer.html で以前に定義された著作権コードフラグメントが、layout.html の th:insert を通じてインポートされます。“～{footer :: copyright}”これは、現在のテンプレートページに導入されている footer.html テンプレートの著作権フラグメントです。

ステップ03では検証を開始します。

プロジェクトを開始した後、図に示すように、ブラウザーにアドレス http://localhost:8080/layout を入力して、ホームページが footer.html コードフラグメントを正常にインポートできるかどうかを確認します。

ここに画像の説明を挿入
layout.html ページには、th:insert 属性を通じてホームページのフッターページの著作権情報が正常に含まれています。

2. フラグメント式文法仕様

Thymeleaf フラグメント式は非常に実用的で、テンプレートページの再利用を実現できるため、同じコンテンツに対して複数のページを変更する必要がなくなります。

2.1 タグセレクター

フラグメント式の構文は非常に単純で、その中心となるのは、XPath 式や CSS セレクターと同様に、基礎となる AttoParser 解析ライブラリによって定義されるマークアップセレクターです。フラグメント式には次の 3 つの異なる形式があります。

1) ～{templatename::selector}：templatename と selector の 2 つのパラメータが含まれます。templatename はページテンプレートの名前、selector はテンプレートで定義されたコードフラグメントです。たとえば、上の例では、“～{footer :: copyright}”footer.html テンプレート内の著作権フラグメントが現在のテンプレートページに導入されます。

2) ～{templatename}：templatename という名前の完全なテンプレートを取り込みます。

3)～{::selector}または、～{this::selector}：Thymeleaf は、同じテンプレートからのフラグメントの挿入をサポートしています。現在のテンプレートでフラグメントが見つからない場合は、セレクターが対応するテンプレートと一致するまで、最初に処理されたテンプレートに移動します。

さらに、タグセレクターのテンプレート名とセレクターには、次のような条件判断や三項演算などの他の式構文を含めることもできます。

<div th:insert="footer :: (${user.isAdmin}? #{footer.admin} : #{footer.normaluser})"></div>

バックグラウンドユーザーが管理者であるかどうかを判断することにより、対応するコードフラグメントが導入され、管理者と一般ユーザーのページ区別が実現されます。

2.2 参照共通テンプレート

マークアップセレクターは非常に強力で、 th:fragment 属性を使用しないフラグメントや、Thymeleaf をまったく知らない別のアプリケーションのマークアップコードを含めることができます。

    <div id="copy-section">
        &copy; 2023 The Thymeleaf footer
    </div>

CSS セレクターと同様に、id 属性を介して単に参照するだけで、上記のフラグメントを使用できます。

<div th:insert="~{footer :: #copy-section}"></div>

2.3 th:insert、th:replace、th:include の違い

th:insert、th:replace、th:include の機能は基本的に似ていますが、3 つの違いは次のとおりです。

th:insert は最も単純で、指定されたフラグメントをホストタグの本体として挿入するだけです。
th:replace は実際にそのホストタグを指定されたフラグメントに置き換えます。
th:include は th:insert に似ていますが、フラグメントは挿入せず、フラグメントのコンテンツのみを挿入します。

3. パラメータ化可能なフラグメント

Thymeleaf は、th:fragment で定義されたフラグメント内でパラメータのセットを指定することをサポートしています。これにより、テンプレートフラグメントが反復可能な関数のようになります。テンプレートの表示は、テンプレート共有の効果を実現するために、さまざまなパラメーターによって制御されます。

以下で th:fragment で定義されたフラグメントは、パラメータのセットを指定します。

    <div th:fragment="frag(onevar, twovar)">
        <p th:text="${onevar} + '-' + ${twovar}">...</p>
    </div>

定義されたフラグメントには 2 つのパラメータが含まれており、パラメータの型を定義する必要はありません。

th:insert または th:replace を使用してこのフラグメントを呼び出す場合は、2 つのパラメーターを渡す必要があります。

    <div th:replace="::frag (${value1},${value2})">...</div>
    <div th:replace="::frag (onevar=${value1},twovar=${value2})">...</div>

フラグメントのパラメータの受け渡しは関数呼び出しと似ており、ページの表示は渡されたパラメータを通じて制御されます。

実戦：ページ全体のレイアウトを実現

一般的な事務処理システムのページは、基本的に全体のレイアウトが固定されています。一般的に使用されるフレームモードでは、ページを先頭、左側のメニューバー、末尾、中央の表示領域などのページに分割します。Thymeleaf のコードスニペット機能を使用して、アプリケーションシステムページの全体的なレイアウトを実現できます。

次の例は、Thymeleaf がページ全体のレイアウトを実装する方法を示しています。

ステップ 01 templates/layout ディレクトリの下に、footer.html、header.html、left.html などの新しい地域テンプレートページを作成します。

footer.htmlの内容は以下の通りです。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>footer</title>
</head>
<body>
    <footer th:fragment="footer">
        <div style="position: fixed; bottom: 0px; background-color: green; width:100%">
            <h1 style="text-align:center">我是底部</h1>
        </div>
    </footer>
</body>
</html>

left.html の内容は次のとおりです。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>left</title>
</head>
<body>
<left th:fragment="left">
    <div style="background-color: red; width:200px;height: 80vh">
        <h1 style="margin: 0;">我是左侧</h1>
    </div>
</left>
</body>
</html>

header.htmlの内容は以下の通りです。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>header</title>
</head>
<body>
<header th:fragment="header">
    <div style="background-color: blue; height: 100px">
        <h1 style="margin: 0;text-align: center;">我是头部</h1>
    </div>
</header>
</body>
</html>

ステップ 02次の内容を含む新しい Index.html ページをテンプレートディレクトリに作成します。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Layout</title>
</head>
<body style="margin: 0px;">
    <div th:replace="layout/header :: header"></div>
    <div th:replace="layout/left :: left"></div>
    <div th:replace="layout/footer :: footer"></div>
</body>
</html>

上記の例では、index.html ページで th:replace 構文を使用して、Web サイトの先頭、末尾、および左側をページに導入します。

ステップ 03バックエンドにアクセスエントリを追加します。

    @RequestMapping("/index")
    public String index() {
    
    
        return "index";
    }

ステップ 04検証を実行します。

最初の 3 つの手順が完了したら、起動後にアドレス http://localhost:8080/layout/index にアクセスすると、図に示すようなページ表示効果を確認できます。

ここに画像の説明を挿入

Index.html ページでは、ページの先頭、末尾、左側をうまく導入して、ページ全体のレイアウトを実現しています。実際のプロジェクトでは、index.html をテンプレートとして使用しているため、どのページでもこのレイアウトを使用する場合は、中央のコンテンツのみを置き換える必要があります。

[Spring Boot] Thymeleaf テンプレートエンジン - Thymeleaf ページレイアウト

Thymeleaf ページレイアウト

1. コードスニペットの導入

2. フラグメント式文法仕様

2.1 タグセレクター

2.2 参照共通テンプレート

2.3 th:insert、th:replace、th:include の違い

3. パラメータ化可能なフラグメント

実戦：ページ全体のレイアウトを実現

おすすめ

[Spring Boot] Thymeleaf テンプレート エンジン - Thymeleaf ページ レイアウト

Thymeleaf ページ レイアウト

1. コード スニペットの導入

2. フラグメント式文法仕様

2.1 タグセレクター

2.2 参照共通テンプレート

2.3 th:insert、th:replace、th:include の違い

3. パラメータ化可能なフラグメント

実戦：ページ全体のレイアウトを実現

おすすめ

[Spring Boot] Thymeleaf テンプレートエンジン - Thymeleaf ページレイアウト

Thymeleaf ページレイアウト

1. コードスニペットの導入