目次
概要
全ての画面で使用するヘッダーを作成します。
そして、Index画面に埋め込むところまでを行います。
共通ヘッダーの作成
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head th:fragment="head(title)"> <meta charset="UTF-8"> <title th:replace="${title}">title</title> <script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}"></script> <script th:src="@{/js/dialog.js}" defer="defer"></script> </head> <body> <header th:fragment="header"> <a th:href="@{/}">ホーム</a> <a th:href="@{/book/list}">検索</a> <a th:href="@{/book/add}">新規登録</a> <hr> </header> </body> </html> |
・<head th:fragment="head(title)">
headタグをheadというフラグメント名で埋め込む指定です。
titleは呼び出し元から受け取る引数になります。
・<title th:replace="${title}">title</title>
th:fragment=”head(title)” で受け取った引数(title)で、${title}を置換します。
・scriptタグではjQueryを使えるようにしています。
・<header th:fragment="header">
headerタグをheaderというフラグメント名で埋め込めるようにします。
Index画面への埋め込み
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head th:replace="header::head(~{::title})"> <title>書籍管理システム</title> </head> <body> <header th:replace="header::header"></header> <div> <h1> ようこそ！<br> 書籍管理システムへ！！ </h1> </div> </body> </html> |
・<head th:replace="header::head(~{::title})">
header.htmlのth:fragment=header(title)を、index.htmlのheaderタグと置換(replace)します。
その際、index.html内のtitleタグを引数に与える（~{::title}）ことで、「書籍管理システム」が設定されます。
・<header th:replace="header::header"></header>
これで、header.htmlのheaderタグがindex.htmlのheaderタグとして置換されます。
作成イメージ
title：index.htmlのtitleタグの内容が、header.htmlの引数に渡されて設定できています。
header：index.htmlに、header.htmlのheaderが埋め込まれています。
まとめ
・画面内をth:fragmentで部分的に定義することができる。
・埋め込み側では、部分的に定義した画面の一部をth:replaceで置換できる。
最後までお読み頂き、ありがとうございました！
ご意見・ご要望がありましたら、遠慮なくコメント下さい！
もし内容が良かったらランキング評価を頂けると励みになります（＾＾）
⇒ランキング評価する
