Thymeleafを使ったコードのリサイクル

Posted at 2024-10-13

この機能の便利さ

<div class="nav" th:fragment="navbar">
    <a class = "logo">Shop</a>
    <a>List</a>
    <a>modify</a>
</div>

ウェブサイトを作る時、上段に上のTMLコードで機能を追加するとする．
サイト内のどこのページに移動しても適応しようとしたら、いつもコピペすることになるので結構ややこしい問題に会う時が来る
こういう時にThymeleafの 「replace」 を使ったら簡単に解決できる

nav.html

<div class="nav" th:fragment="navbar">
    <a class = "logo">Shop</a>
    <a>List</a>
    <a>modify</a>
</div>

「th」 はThymeleafの属性で
サーバからデータを動的に読み込むことを可能にさせる
fragmentはコードの一部をリサイクルしますという宣言で
リサイクルする時にnavbarを入力する．

list.html

//<head>

<body>

    <div th:replace="~{nav.html::navbar}" ></div>
    ~~~~~
    ~~~~~

それで適応させたい本文で上のようにコードを追加する．
「replace」→ nav.htmlの navbar（"~{nav.html::navbar}") リサイクルするという意味になる

fragmentに入る名前は付けたい名前を付けていい．

写真はSPRINGを学びながら私が作っている球団のホームページに今まで説明した通りページの上段に追加したことである
次に実装させる機能は実際タッチしたら他のページに行く方法、それをThymeleafとSPRINGでどう実装させるかに関して投稿しようとおもっている．

ありがとうございます．