暇な日々にスパイスを

学んだ技術の備忘録

Spring Boot 11 navbarによるヘッダの作成と読込み

BootStrapのnavbarで作成した共通のヘッダを、Tyhmeleafの機能で埋め込みます。

navbarについては、BootStrapの例にある以下を利用します。
Fixed Top Navbar Example for Bootstrap
src自体はBootStrapをDLした中にサンプルとしてあります。

共通ヘッダ部分

まずはヘッダ部分を作成します。
f:id:snona:20160221204311p:plain
src/main/resources/templatesの下にcommonフォルダを切ります。 その中にheader.htmlを作成します。

サンプルのnavbar部分を抜き出してきます。
変更点は以下の2点です。

  1. /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" />
  2. 読み込み部分を指定するthymeleafの属性の追加 html <nav class="navbar navbar-default navbar-fixed-top" th:fragment="header"> ... </nav> th:fragment="header"で、headerという名前で取り込むタグであることを宣言しています

共通ヘッダ読込み

読込みを行います。
f:id:snona:20160221204254p:plain

  <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の読込みもまとめたいですね。