Thymeleafでパンくずリストを実装

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}"> &gt; </span>
      </li>
    </ul>
  </nav>

  <h1>サンプルページ</h1>
  <p>ここにページの内容が入ります。</p>
</body>
</html>

このコードで、コントローラーから渡されたbreadcrumbsリストを用いてパンくずリストを表示します。
各パンくずの間に区切り文字(>)を挿入し、最後の項目には区切り文字を表示しないようにしています。