LoginSignup
21
25

More than 3 years have passed since last update.

Thymeleafでヘッダーフッターを共通化する方法

Last updated at Posted at 2019-12-13

概要

Spring BootとThymeleafを使って作るWebアプリで、各htmlのページに共通しているヘッダーやフッターを共通化する方法

環境

  • Java8
  • Spring Boot
    • version: 2.1.9.RELEASE
  • Thymeleaf
    • version: 3.0.11.RELEASE
  • Eclipse
    • version: 2018-09 (4.9.0)

サンプル

ディレクトリ構成

Java側は省略しますが、templateと静的コンテンツの配置はこんな感じ。

dir
src/main/resources
├── static
│   ├── css
│   │   ├── common.css
│   │   └── top.css
│   └── js
│       └── datepicker.js
└── templates
    ├── common.html
    └── index.html

SpringBootはtemplates配下のHTMLからCSSやJSファイルを参照する場合、
staticがルートディレクトリになるので、このような構成にしてます。

共通部品用のcommon.htmlを作成する

common.html
<html xmlns:th="http://www.thymeleaf.org">
<!-- (1)共通にしたいheadをfragment化する -->
<head th:fragment="meta_header(title,links,scripts)">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- (2)共通で読み込むCSS/JS -->
    <link rel="stylesheet" href="/css/common.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- (3)タイトルのフォーマット -->
    <title th:text="${title}+' | sample app'">各ページタイトル | sample app</title>

    <!-- (4)各View固有で読み込むもの -->
    <th:block th:replace="${links} ?: _" />
    <th:block th:replace="${scripts} ?: _" />
</head>
<body>
    <!-- (5)body内で共通化したい部品をfragment化する -->
    <header th:fragment="header">
        <h1><a th:href="@{'/'}">sample app</a></h1>
    </header>
</body>
</html>

解説

(1) fragment名は引数を取れるのでtitle,links,scriptsを引数に設定する
(2) 各ページで共通に読み込むCSS/JSを記載する
(3) 引数のtitleを使ってth:text=""にページタイトルのフォーマットを設定する
(4) 各ページで読み込むCSS/JSをth:replaceを使って差し込む
処理なしトークン(?: _)を使うことで、${links}がnullだった場合はth:block自体が無かったものになる
(5) body内でも共通化したいものがあったらth:fragmentを使って部品化する

各html側で呼び出す

index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!-- (1)共通headerで置き換える -->
<head th:replace="common :: meta_header('top',~{::link},~{::script})">
    <!-- (2)このページ固有で読み込むCSS/JS -->
    <link rel="stylesheet" th:href="@{/css/top.css}" />
    <script type="text/javascript" th:src="@{/js/datepicker.js}"></script>
</head>
<body>
    <!-- (3)共通部品を呼び出す -->
    <div th:replace="common :: header"></div>
    <h2>top page</h2>
</body>

解説

(1) headercommon.htmlで定義したものに引数を渡して置き換える
(2) このページ(このサンプルではindex.html)固有で読み込むファイルを定義する
(3) 共通部品もth:replace="ページ名::fragment名"で置き換える

参考

Spring Bootでヘッダ・フッタの共通化する方法
Tutorial: Using Thymeleaf

21
25
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
21
25