Thymeleafでパンくずリストを実装
Thymeleafでパンくずリストを実装するには、以下の手順で行います。
1. コントローラーでパンくずリストのデータを用意する。
2. Thymeleafテンプレートでパンくずリストを表示する。
1. コントローラー
まず、コントローラーでパンくずリストのデータを用意します。
import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import java.util.Arrays; import java.util.List; @Controller public class BreadcrumbController { @GetMapping("/sample") public String showSamplePage(Model model) { List<String> breadcrumbs = Arrays.asList("ホーム", "カテゴリ", "サンプルページ"); model.addAttribute("breadcrumbs", breadcrumbs); return "sample"; } }
2. Thymeleafテンプレート
次に、Thymeleafテンプレートでパンくずリストを表示します。
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>サンプルページ</title> </head> <body> <nav> <ul> <li th:each="breadcrumb, stat : ${breadcrumbs}"> <span th:text="${breadcrumb}"></span> <span th:if="${!stat.last}"> > </span> </li> </ul> </nav> <h1>サンプルページ</h1> <p>ここにページの内容が入ります。</p> </body> </html>
このコードで、コントローラーから渡されたbreadcrumbsリストを用いてパンくずリストを表示します。
各パンくずの間に区切り文字(>)を挿入し、最後の項目には区切り文字を表示しないようにしています。