Spring Boot 11 navbarによるヘッダの作成と読込み
BootStrapのnavbarで作成した共通のヘッダを、Tyhmeleafの機能で埋め込みます。
navbarについては、BootStrapの例にある以下を利用します。
Fixed Top Navbar Example for Bootstrap
src自体はBootStrapをDLした中にサンプルとしてあります。
共通ヘッダ部分
まずはヘッダ部分を作成します。
src/main/resources/templatesの下にcommonフォルダを切ります。
その中にheader.htmlを作成します。
サンプルのnavbar部分を抜き出してきます。
変更点は以下の2点です。
- /css/navbar-fixed-top.cssへのリンクをthymeleaf形式に変更
html <link rel="stylesheet" th:href="@{/css/navbar-fixed-top.css}" />
th:href="@{url}"を記載することで、SpringBootで設定したcontext pathが含まれるようになります。
展開後
html <link rel="stylesheet" href="/todo/css/navbar-fixed-top.css" />
- 読み込み部分を指定するthymeleafの属性の追加
html <nav class="navbar navbar-default navbar-fixed-top" th:fragment="header"> ... </nav>
th:fragment="header"で、headerという名前で取り込むタグであることを宣言しています
共通ヘッダ読込み
読込みを行います。
<div th:replace="common/header :: header"></div>
th:replace="ファイルパス :: フラグメント名"で読込みしています。
読込みにはth:includeとth:replaceがありますが、includeではタグの属性が効かないようです。
また、cssへのリンク等は読み込まれていないため、読込みを行っているhtmlでもcssへのリンクを明記する必要があります。
html
<link rel="stylesheet" href="/todo/css/navbar-fixed-top.css" />
cssとjsの読込みもまとめたいですね。