経緯

個人開発しているサイトで、サイドバーの定義がほぼ同じなのに、全htmlで毎回ベタ書きしている。
流石にメンテナンスが面倒くさいので、一ファイルにまとめることができないか調べた。

環境

いくつかあるらしいが、手間を賭けたくなかったので、HTMLの構造を変えなくて済む th:replaceを利用することに決定

    <!-- サイトバーメニュー -->
    <nav class="sidebar col-md-3" id="sidemenu">
      <div class="brand p-4">
・・・・
      </div>
    </nav>

全ファイルに似たような構文がある状態

    <nav class="sidebar col-md-3" id="sidemenu">
      <div th:replace="linkMenu"/>
    </nav>

divタグに置き換えてある。
th:replaceに定義しているのは、参照するファイル。
linkMenu.htmlが同じ階層にあり、内部に書いてあったものをそのまま書いてある。
↓実際に書いてある中身↓

      <div class="brand p-4">
・・・・
      </div>

意外と簡単だった。

他にも、th:include, th:insert, th:fragmentがあるみたいだが、構造が微妙に変わってしまうので、辞めた。
また、th:fragmentは推奨されていないらしい。

fragmentは、おそらくだが、HTMLのframeタグをベースにしていて、HTML5で廃止されたから非推奨になっているのではないかと思われる。※予想なので注意

firefoxを使っているのだが、Stylusというアドオンでいろんなサイトを見てたけど、fragment使われると、Stylusによるcssの制御がやりづらいことが多かった。
個人的には、frameの廃止は賛成であるため、th:fragmentを使おうという気にならなかったのも一理ある。