Spring thymeleaf 页眉和页脚动态包括答案

【问题标题】：Spring thymeleaf header and footer dynamic includesSpring thymeleaf 页眉和页脚动态包括
【发布时间】：2016-08-08 08:45:02
【问题描述】：

我最近在春季开始使用 thymeleaf 模板引擎。我想要实现的是 - 如果我的控制器是这样的

@RequestMapping(value="/", method=RequestMethod.GET)
public String index() {
    return "homePage";
}

然后我想在 homePage.html 中编写 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>

注意：我已经看过这些例子

【问题讨论】：

您能否粘贴包含页脚时出现的错误？

标签： java spring thymeleaf

【解决方案1】：

这就是我实现它的方式。

第一步：创建默认布局文件

资源/模板/布局/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 步（Spring Boot 2）：向 pom.xml 添加依赖项

/pom.xml

<dependency>
    <groupId>nz.net.ultraq.thymeleaf</groupId>
    <artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>

【讨论】：

我不得不提到这样的路径：
让它对我有用

【解决方案2】：

我是这样解决的：

Controller 指向 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>

所以我有一个带有页眉和页脚的文件夹片段：

片段/header.html

<head th:fragment="header">
   //css includes etc title
</head>

片段/footer.html

<div th:fragment="footer">
  //scripts includes
</div>

在我的文件夹视图中，我得到了所有包含内容的视图意见/helloWorldView.html：

<div th:fragment="helloWorldView">
    //Content
</div>

【讨论】：

嗨@Joostje 感谢您的回答，但我不是在寻找这种方式。在索引中我只想要内容，在标题中我想要 etc.
如何扩展它以使内容视图根据您单击的菜单项而变化？