新しいプロジェクトでSpringBootを使います。
業務システムで、SPAのようなものは要求されないので、素直にThymeleafを使うことにします。
が、サイドバーとか、ヘッダーとか、各ページに記載するのも嫌なので、何か方法がないかを調べてみました。
環境
Spring Boot 3.3.0
Thymeleaf 3.1.2
Thymeleaf layout dialect 3.2.0
やりたいこと
こんな感じです。
共通のレイアウトを定義しておいて、コンテンツ部分のみ記述することで最終的に共通レイアウトと、個別のコンテンツを組み合わせて、ページを表示する。
調べた限り「Thymeleaf layout dialect」を使えばできそうでした。
実際にやってみた
大前提として、SpringBoot + Spring Web + Thymeleaf のプロジェクトが作成されていることとします。
設定
まずは、Gradleの設定。以下を追加します。
implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:3.2.0'
Controllerを書く
page1、page2と二つの画面を表示できるようにコントローラーを作ります。
@Controller
public class ContentController {
@GetMapping("/page1")
public String page1() {
return "page1";
}
@GetMapping("/page2")
public String page2() {
return "page2";
}
}
画面を作る
ということで、ここからは、Thymeleafで画面を作っていきます。
構成としては以下のようなイメージ
templates
│ page1.html
│ page2.html
│
└─common
layout.html
footer.html
header.html
sidebar.html
共通部分
th:insert、th:fragmentは、Thymeleafの標準的な書き方なので、ここでは説明を割愛します。
- header.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Header</title>
</head>
<body>
<div th:fragment="header">
<h1>ヘッダー</h1>
</div>
</body>
</html>
- sidebar.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Sidebar</title>
</head>
<body>
<div th:fragment="sidebar">
<nav>
<ul>
<li><a href="#">リンク1</a></li>
<li><a href="#">リンク2</a></li>
<li><a href="#">リンク3</a></li>
</ul>
</nav>
</div>
</body>
</html>
- footer.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Footer</title>
</head>
<body>
<div th:fragment="footer">
<p>フッター</p>
</div>
</body>
</html>
- layout.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Layout</title>
<link rel="stylesheet" type="text/css" href="/css/styles.css"/>
</head>
<body>
<header th:insert="~{common/header :: header}"></header>
<div class="container">
<aside th:insert="~{common/sidebar :: sidebar}"></aside>
<main layout:fragment="content"></main>
</div>
<footer th:insert="~{common/footer :: footer}"></footer>
</body>
</html>
コンテンツ側のページ
Page1と、Page2を作ります。
- page1
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{common/layout}">
<head>
<meta charset="UTF-8">
<title>Content</title>
</head>
<body>
<div layout:fragment="content">
<h2>コンテンツエリア</h2>
<p>ここにコンテンツ1が表示されます。</p>
</div>
</body>
</html>
- page2
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{common/layout}">
<head>
<meta charset="UTF-8">
<title>Content</title>
</head>
<body>
<div layout:fragment="content">
<h2>コンテンツエリア</h2>
<p>ここにコンテンツ2が表示されます。</p>
</div>
</body>
</html>
CSSを用意する
CSSを作って、static/css配下に、styles.cssという名前で作成しておきます。
@charset "UTF-8";
body {
font-family: Arial, sans-serif;
}
header,
footer {
background-color: #f8f8f8;
padding: 10px;
text-align: center;
}
.container {
display: flex;
}
aside {
width: 200px;
background-color: #f0f0f0;
padding: 10px;
}
main {
flex-grow: 1;
padding: 10px;
}
確認
さてここまでできたら動作を確認します。
Spring Bootアプリを起動して、以下URLにアクセスします。
http://localhost:8080/page1
無事できました。
続いて、以下URLにアクセス
http://localhost:8080/page2
はい。やりたいことはうまくいきましたね。
最後に
意外と簡単にできました。
これで共通部分を気にせず、担当者が実装すべきところに専念することができそうです。