戻る
■テンプレート(Thymeleaf)
Thymeleaf(タイムリーフ)について Thymeleafとは?基本構文・Spring Bootでの使い方を解説 | プログラミングを学ぶならトレノキャンプ(TRAINOCAMP) https://camp.trainocate.co.jp/magazine/about-thymeleaf/ Thymeleaf if文 条件分岐を行うサンプル | ITSakura https://itsakura.com/thymeleaf-if-loop Spring Boot + Thymeleafで詳細画面を作成する - ITを分かりやすく解説 https://medium-company.com/spring-boot-thymeleaf%E3%81%A7%E8%A9%B3%E7%B4%B0%E7%94%BB%E9%9D%A2%E3%82%... ■インラインテキスト 一例だが、以下のようにして変数の内容を出力すると、
<p>現在時刻は<span th:text="${time}"></span>です。</p>
以下のように出力される
<p>現在時刻は<span>19:17:45</span>です。</p>
余計なspanが残されているため、多くの情報を埋め込むと出力HTMLがspanだらけになりそうだが、回避する方法はいくつか用意されている 以下のコードは、いずれもspanを出力しない
<p>現在時刻は<span th:text="${time}" th:remove="tag"></span>です。</p> <p>現在時刻は<th:block th:text="${time}"></th:block>です。</p> <p>現在時刻は[[${time}]]です。</p>
上から順に ・「th:remove="tag"」を指定する ・「th:block」という疑似的なタグを使用する ・「[[〜]]」という形式で指定する という方法になっている [thymeleaf]spanタグ等で囲まないとテキストが表示できない? https://teratail.com/questions/2558 Tutorial: Using Thymeleaf (ja) https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf_ja.html#%E6%93%AC%E4%BC%BC%E7%9A%84%E3%81... Thymeleafとは?基本構文・Spring Bootでの使い方を解説 | プログラミングを学ぶならトレノキャンプ(TRAINOCAMP) https://camp.trainocate.co.jp/magazine/about-thymeleaf/ Thymeleafチートシート - Qiita https://qiita.com/NagaokaKenichi/items/c6d1b76090ef5ef39482 また以下のようにすると、値を直接指定して出力できる
<p>現在時刻は<span th:text="'正午'" th:remove="tag"></span>です。</p> <p>現在時刻は[['正午']]です。</p>
値部分には、以下のようにプログラムを埋め込むことができる
<p>現在時刻は<span th:text="${new java.util.Date().toString()}" th:remove="tag"></span>です。</p> <p>現在時刻は[[${new java.util.Date().toString()}]]です。</p>
■オブジェクトの値参照 Getterメソッドを用意しておけば、オブジェクトのフィールドを直接扱うことができる 【Spring Boot】「Thymeleaf(タイムリーフ)」で画面にまとまった値を渡そう。 | プログラミングマガジン http://www.code-magagine.com/?p=2935 ■共通化 replaceを使うことで、ヘッダやフッタを共通化して読み込ませることができる Thymeleafを使ってheaderとheadとfooterの共通化 - エキサイト TechBlog. https://tech.excite.co.jp/entry/2022/08/08/162241 例えば templates/common/frontend.html として以下を作成すると、
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <header th:fragment="header"> <h1>Demo</h1> </header> <footer th:fragment="footer"> <p><small>This is demo site.</small></p> </footer> </html>
templates/home/index.html として以下のように呼び出すことができる
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Demo</title> </head> <body> <th:block th:replace="~{common/frontend::header}"></th:block> <main> <p>これはトップページです。</p> </main> <th:block th:replace="~{common/frontend::footer}"></th:block> </body> </html>
「{common/frontend::header}」で指定した部分にはheaderタグの部分が、 「{common/frontend::footer}」で指定した部分にはfooterタグの部分が、それぞれ表示される ■レイアウト layoutを使うことで、基本のレイアウトを作ることができる ただしthymeleafの標準機能では対応していないので、追加でthymeleaf-layout-dialectを導入する必要がある
<dependency> <groupId>nz.net.ultraq.thymeleaf</groupId> <artifactId>thymeleaf-layout-dialect</artifactId> </dependency>
共通のレイアウトとして、templates/layout/frontend.html を作成するものとする
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <head> <meta charset="UTF-8"> <title>Demo</title> </head> <body> <header th:fragment="header"> <h1>Demo</h1> </header> <th:block layout:fragment="content"></th:block> <footer th:fragment="footer"> <p><small>This is demo site.</small></p> </footer> </body> </html>
以下のようにして呼び出すと、「layout:fragment="content"」で指定した部分に組み込まれて表示される
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/frontend}"> <body> <th:block layout:fragment="content"> <main> <p>これはトップページです。</p> </main> </th:block> </body> </html>
以下のようにタイトルを定義すると、それが優先して使用される(ただし「 | Demo」をレイアウト側で管理するなど、もっと効率的な方法がありそうな)
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/frontend}"> <head> <title>概要 | Demo</title> </head> <body> <th:block layout:fragment="content"> <main> <p>これは概要です。</p> </main> </th:block> </body> </html>
Spring BootとThymeleafでLayoutを共通化する方法 | ホームページ制作のサカエン Developer's Blog https://www.saka-en.com/java/spring-boot-thymeleaf-layout/ SpringBoot 共通レイアウトを作成(Thymeleaf) | ITSakura https://itsakura.com/springboot-layout 『Spring Framework 超入門』のレイアウト化の作成がうまく出てこないときの対処法 - yucatio@システムエンジニア https://yucatio.hatenablog.com/entry/2022/02/09/225705 ■静的コンテンツ src/main/resources 内に static か public ディレクトリを作成て、静的コンテンツを配置できる Thymeleafで外部のCSSファイルを読み込む方法 - ミルラク https://miruraku.com/java/thymeleaf/css/ SpringBoot 静的コンテンツを返す方法(html, js, css など) - Web系開発メモ https://web-dev.hatenablog.com/entry/spring-boot/intro/response-static-content