我们最后想实现的就是将 UI 中可重用的代码块放到模板之中。为了实现该功能，我们 需要使用 thymeleaf-layout-dialect 依赖，它已经包含在项目的 spring-boot-starter-thymeleaf 依赖里面。
我们会创建一个新的文件，名为 default.html，并将其放在 src/main/resources/templates/ layout 之中，它包含了每个页面中都重复出现的代码：
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="viewport" content="width=device-width, initial- scale=1, maximum-scale=1.0, user-scalable=no"/> <title>Default title</title>
<link href="/webjars/materializecss/0.96.0/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/> </head> <body> <section layout:fragment="content"> <p>Page content goes here</p> </section>
<script src="/webjars/jquery/2.1.4/jquery.js"></script> <script src="/webjars/materializecss/0.96.0/js/materialize.js"></ script> </body> </html>现在，我们要修改 resultPage.html 文件，让它使用布局，这会简化它的内容：
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout/default"> <head lang="en"> <title>Hello twitter</title> </head> <body> <div class="row" layout:fragment="content">
<h2 class="indigo-text center" th:text="|Tweet results for ${search}|">Tweets</h2>
<ul class="collection">
<li class="collection-item avatar" th:each="tweet : ${tweets}">
<img th:src="${tweet.user.profileImageUrl}" alt="" class="circle"/> <span class="title" th:text="${tweet.user. name}">Username</span>
<p th:text="${tweet.text}">Tweet message</p> </li> </ul> </div> </body> </html> 其中，layout:decorator="layout/default"能够表明去哪里查找布局。这样，我们可以将内 容注入到布局的不同 layout:fragment 区域中。需要注意的是，每个模板都是合法的 HTML 文件，我们可以非常容易地重写它的标题。
1251
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
