私は最近、春にthymeleafテンプレートエンジンの使用を開始しました。私が達成したいのは-私のコントローラーがこれなら
@RequestMapping(value="/", method=RequestMethod.GET)
public String index() {
return "homePage";
}
次に、head、title、bodyなどの完全なHTML定義なしで、homePage.htmlにHTMLコードを記述します。
<div>This is home page content</div>
このようにhomePage.htmlに書きたくない。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
<head>
<title>Spring MVC Example</title>
</head>
<body>
<div th:include="fragments/header::head"></div>
<div>This is home page content</div>
<div th:include="fragments/footer::foot"></div>
</body>
ヘッダーフラグメントのヘッド部分、コントローラーのコンテンツ、フッターフラグメントのフッターを使用することを好みます。
だから全体で-これを達成する方法:
/ fragment/header.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
<head>
<title>Spring MVC Example</title>
</head>
<body>
/ home.html
<div>This is home page content</div>
(これはエラーをスローします)
/ fragment/footer.html
</body>
</html>
注:これらの例はすでに見ました
私はこれを次のように解決しました:
コントローラーはindex.htmlを参照し、「コンテンツページ」の属性を指定します
@RequestMapping(value={"/"})
public String root(Locale locale, ModelMap model) {
model.addAttribute("content", "helloWorldView");
return "index";
}
これは私のindex.htmlです:
<!DOCTYPE html>
<html lang="en">
<head lang="en" th:replace="fragments/header :: header"> </head>
<body>
<div class="container">
<div th:replace="@{'views/' + ${content}} :: ${content}"></div>
</div>
<div lang="en" th:replace="fragments/footer :: footer"> </div>
</body>
</html>
だから私はヘッダーとフッターのあるフォルダーフラグメントを持っています:
fragment/header.html
<head th:fragment="header">
//css includes etc title
</head>
fragment/footer.html
<div th:fragment="footer">
//scripts includes
</div>
そして、私のフォルダーのビューでは、コンテンツのviews/helloWorldView.htmlですべてのビューを取得しました:
<div th:fragment="helloWorldView">
//Content
</div>
これは私がそれを達成した方法です。
ステップ1:デフォルトのレイアウトファイルを作成
resources/templates/layouts/default.html
<!DOCTYPE html>
<html>
<head th:replace="fragments/header :: head"></head>
<body>
<div class="container">
<div layout:fragment="content"></div>
<div th:replace="fragments/footer :: footer"></div>
</div>
</body>
</html>
ステップ2:ヘッダーとフッターのフラグメントを作成します。
/resources/templates/fragments/header.html
<head th:fragment="head">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta content="ie=Edge" http-equiv="x-ua-compatible" />
<title th:text="${metaTitle} ? ${metaTitle} : 'default title'"></title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
<link rel="stylesheet" href="/css/style.css"/>
</head>
/resources/templates/fragments/footer.html
<div class="footer text-center" th:fragment="footer">
<p> <a href="#"> Terms of Use</a> | <a href="#">What's New</a> | <a href="#">Help</a> </p>
<!-- javascripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js">
</script>
</div>
ステップ3:ホームページを作成します
/resources/templates/home.html
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="layouts/default">
<body>
<div id="page" layout:fragment="content">
<div>This is home page content</div>
</div>
</body>
</html>
ステップ4(スプリングブート2): pom.xmlに依存関係を追加
/pom.xml
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>