Thymeleaf 页面布局标题属性被覆盖答案

【问题标题】：Thymeleaf page layout header properties overridenThymeleaf 页面布局标题属性被覆盖
【发布时间】：2016-07-17 01:32:53
【问题描述】：

好的，我正在使用thymeleaf page layouts。

它似乎工作正常，但是，我想知道如何在使用片段的页面的<head></head> 中配置<title></title> 属性？目前，head 中的所有内容都被 header 片段覆盖（如下所示）。

这是我的：resources/templates/fragments/header.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="header">
    <link href="../../static/css/bootstrap.min.css" th:href="@{css/bootstrap.min.css}" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" th:src="@{js/bootstrap.min.js}"></script>
</head>
<body></body>
</html>

这是我的索引页面（我希望显示标题标签）：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head th:include="fragments/header :: header">
    <title>THIS DOES NOT SHOW</title>
</head>
<body>
    <div class="container">
        <div th:include="fragments/headerNavbar :: headerNavbar"></div>

        <h1>hey</h1>
        <div class="btn btn-success">button</div>
        <button class="btn btn-success">another</button>       
    </div>

这是实际的 HTML 输出：

 <head>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap.min.js"></script>
</head>

我知道发生了什么。标题片段被加载（包含）到我的索引页面的头部，因此它覆盖了所有属性。

我的问题是我不知道如何拥有一个标题片段并且在指定一个属性（如标题）时让一个文件使用该片段。

这是我在索引文件中尝试过的：

<head>
    <div th:include="fragments/header :: header"></div>
    <title>THIS DOES NOT SHOW</title>
</head>

但它确实搞砸了我的 HTML。必须有一个简单的解决方案？

【问题讨论】：

可能我也想问。
@Prashant 太奇怪了！似乎并不是一个明显的解决方案。有可能的方法来解决它，也许使用 Jquery，但那很笨重......
同意！它们只能被视为解决方法而不是解决方案，尤其是当声称 thymeleaf 是一种天然的模板引擎时。真的很想知道我们是否在这里遗漏了什么..
@Prashant 找到了解决方案！一分钟后查看我的答案
看起来像一个解决方案，因为

标签： java spring-mvc spring-boot thymeleaf

【解决方案1】：

好的，我找到了使用此solution 的方法。我仍然认为它很笨拙，并且我仍然认为必须有更好的方法，但是对于我的需要这已经足够了（如果您有解决方案，请分享）：

th:remove="tag" 的神奇之处在于，在运行时，对象标签被移除并适当地显示片段：

<head>
    <title>THIS DOES SHOW</title>
    <object th:include="fragments/header :: header" th:remove="tag"><object> 
</head>

所以现在的输出是：

<head>
    <title>THIS DOES SHOW</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap.min.js"></script>
</head>

【讨论】：

很好的解决方案，但您的代码中有错误，您没有正确关闭

【解决方案2】：

您可以使用Thymeleaf Layout Dialect，它通过新属性提供对分层布局的支持。这些属性类似于 Thymeleaf 的属性，但提供了额外的功能。

例如，它允许将布局头部分的内容与提供正文部分的页面的头部分的内容混合。

您必须创建一个模板用作页面的布局。根据您的示例，您将拥有如下内容：

文件resources/templates/layouts/layout.html

<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
  <head>
    <link href="../../static/css/bootstrap.min.css" th:href="@{css/bootstrap.min.css}" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" th:src="@{js/bootstrap.min.js}"></script>
    <title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">My app</title>
  </head>
  <body>
    <section layout:fragment="content">
        <!-- Content replaced by each page's content fragment -->
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Praesent scelerisque neque neque, ac elementum quam dignissim interdum.
        </p>
    </section>
  </body>
</html>

文件resources/templates/index.html

<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" 
      layout:decorator="layouts/layout">
<head>
    <title>Home page</title>
</head>
<body>
    <div layout:fragment="content">
        <h1>hey</h1>
        <div class="btn btn-success">button</div>
        <button class="btn btn-success">another</button>       
    </div>
</body>
</html>

这样生成的页面将具有以下标题部分：

<head>
  <link href="../../static/css/bootstrap.min.css" th:href="@{css/bootstrap.min.css}" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" th:src="@{js/bootstrap.min.js}"></script>
  <title>My app - Home page</title>
</head>

注意layout:title-pattern 属性，它允许设置模式以生成最终标题。默认情况下，布局方言将合并页面头部中包含的任何脚本或样式表。为了简单起见，我没有为页眉、页脚、菜单等添加任何片段，但它也受支持。

查看项目页面，了解您必须添加到项目中的依赖项以及所需的配置。如果您正在使用引导，则 Thymeleaf 启动器已经支持此方言，因此您只需将依赖项添加到您的项目中，它将自动配置。

编辑：我已更正布局示例中的错字，使用 layout:include 而不是 layout:fragment。

【讨论】：

我接受了它，因为我更喜欢这个解决方案而不是我原来的解决方案。我喜欢分层布局，所以我需要进一步研究它:)
由于异常，不得不对示例进行一些小改动。我改变了布局：layout:include="content" 到 layout:include="::content"
对不起，我的错，应该改为layout:fragment="content"。这是用于包含页面内容的属性。已在答案中更正。