Question

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

这是我：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。有一个简单的解决方案吗？

Answer 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>

Answer 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 。

Thymeleaf页面布局标题属性覆盖

2 个答案: