Thymeleaf 布局方言和 th:replace in head 导致标题为空白答案

【问题标题】：Thymeleaf layout dialect and th:replace in head causes title to be blankThymeleaf 布局方言和 th:replace in head 导致标题为空白
【发布时间】：2023-04-04 19:51:02
【问题描述】：

我正在关注本教程：http://www.thymeleaf.org/doc/layouts.html（进入 Thymeleaf 布局方言部分）。在那里你可以找到一个例子：

<!DOCTYPE html>
<html>
  <head>
  <!--/*  Each token will be replaced by their respective titles in the resulting page. */-->
    <title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">Task List</title>
    ...
  </head>
  <body>
    <!--/* Standard layout can be mixed with Layout Dialect */-->
    <div th:replace="fragments/header :: header">
    ...
    </div>
    <div class="container">
      <div layout:fragment="content">
      ...
      </div>
      <div th:replace="fragments/footer :: footer">&copy; 2014 The Static Templates</div>
    </div>
  </body>
</html>

在上面的例子中，页脚和页眉被th:replace标签替换，而<head>在布局文件中有<title>标签。

基本上，我想用th:replace 替换整个<head> 标签。因此，我有：

我的布局文件：

<!DOCTYPE html>
<html>
<head th:replace="/html/components/head :: head">
</head>
<body>
     <div layout:fragment="content">
     </div>
...
     <div th:replace="/html/components/footer :: footer" />
</body>
<html>

我的内容文件：

<!DOCTYPE html>
<html layout:decorator="/html/layouts/layout">
<head>
    <title>My content title</title>
</head>
<body>
      <div layout:fragment="content">
      ...
      </div>
</body>
</html>

最后是我的 /html/components/head.htm 文件：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:fragment="head">
<meta charset="utf-8" />
<title layout:title-pattern="$CONTENT_TITLE">Layout Title should be replaced by Content Title!</title>
...
</head>
<body>
</body>
</html>

内容没问题。文件中的页脚和标题按预期包含（替换），但页面标题为空白！

我明白了：

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title></title>
...

怎么了？

【问题讨论】：

如果我只是删除并将头文件的内容直接放到 layout.htm 中，那么标题就可以了。但我不喜欢这个解决方案的丑陋。有什么方法可以移动整个头部并将其与布局分开？

标签： layout thymeleaf dialect

【解决方案1】：

最后，我找到了实现我想要的方法。

在布局文件<title>标签必须留。我用<object>标签分组的所有其他标签并注释如下：

<head>
  <title layout:title-pattern="$CONTENT_TITLE">Layout Title will be replaced by Page Title!</title>
  <object th:include="/html/components/head :: head" th:remove="tag" />
</head>

在我的 html/components/head.htm 文件中，我必须删除 <title> 标记，这样它就不会在包含后重复。

<head th:fragment="head">
  <meta charset="utf-8" />
  <!-- NO TITLE TAG HERE -->
  ...
</head>

这种方式头部片段包含在<object>标签中，感谢th:remove="tag"<object>标签被删除，我的最终HTML输出是：

<head>
  <title>My content title</title>
  <meta charset="utf-8" />
  <!--  NO TITLE TAG HERE -->
  ...
</head>

显然，一旦我开始工作，我也删除了 NO TITLE TAG HERE 消息。

【讨论】：

我建议您使用 <meta th:include="/html/components/head :: head" th:remove="tag" />，因为某些 IDE（例如 IntelliJ）会将标签 object 标记为不允许在 head 中使用。
你也可以使用<div th:replace="/html/components/head :: head" />，效果一样。
哦！非常感谢））

【解决方案2】：

我想我找到了一种稍微不那么冗长的方法来同时使用 th:replace 和 th:fragment，例如在您的页面中包含常见的<head> 元数据和静态资源。

将th:remove="tag" 放入片段定义，这样您就不必每次都重复th:remove="tag"。

fragment_head.html

<thymeleaf xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" 
    th:fragment="head" th:remove="tag">

    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" th:href="@{/css/vendor/bootstrap.min.css}"/>

</thymeleaf>

mypage.html

<head>
    <thymeleaf th:replace="fragment_head :: head" />
</head>

【讨论】：

【解决方案3】：

你可以替换整个head标签。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="pl" th:replace="fragments/head :: head">
</head>
<body>
 ...
</body>
</html>

资源/模板/片段/head.html：

    <head lang="pl">
        <title>Title</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.5/css/bootstrap.min.css"
              th:href="@{/webjars/bootstrap/3.3.5/css/bootstrap.min.css}"
              rel="stylesheet" media="screen" />

        <script src="http://cdn.jsdelivr.net/webjars/jquery/2.1.4/jquery.min.js"
                th:src="@{/webjars/jquery/2.1.4/jquery.min.js}"></script>
        <link href="../static/css/mycss.css"
              th:href="@{css/mycss.css}" rel="stylesheet" media="screen"/>
    </head>

【讨论】：