Question

我是一名Thymeleaf初学者。我从一个共同的布局页面开始：

片段/的layout.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="headerFragment">
    <title>Template title</title>
    <!-- metas, link and scripts -->
</head>
<body>
<div class="container">
    Some text
</div>
</body>
</html>

内容页面：

page.html中

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="fragments/layout :: headerFragment">
    <title>Page title</title>
    <!-- metas, link and scripts -->
</head>
<body>
<div class="container">
    Some text
</div>
</body>
</html>

当我渲染页面时，标题始终来自模板，而不是来自页面。在Thymeleaf中是否可以使用metas，脚本和样式（在HEAD标签中），但是要有每页标题？

Answer 1

我也遇到了这个问题（感谢您nmy引用documentation！）以下是我注意到的以及我在应用中如何解决它：

文档中要注意的事项：

th:include和th:replace
通过domselector而不是th:fragment
Thymeleaf为查找选择器提供了“this”选项

考虑到这三件事，您可以执行以下操作：

片段/的layout.html：

<head th:fragment="headerFragment">
    <title th:include=":: #pageTitle">Layout Generic Title< /title>
    <!-- metas, link and scripts -->
</head>

page.html中

<head th:include="fragments/layout :: headerFragment">
    <title id="pageTitle">Page title</title>
    <!-- other elements you want to reference in your layout -->
</head>

希望这有帮助！

Answer 2

查看Parameterizable fragment signatures。

基本上，在你的片段中：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="headerFragment (pageTitle)">
    <title th:text="${pageTitle}>Template title</title>
    <!-- metas, link and scripts -->
</head>
<body>
    <div class="container">
        Some text
    </div>
</body>
</html>

然后，你在哪里使用它：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/layout :: headerFragment (pageTitle='Bla Bla Some Title'">
    <title>Page title</title>
    <!-- metas, link and scripts -->
</head>
<body>
    <div class="container">
        Some text
    </div>
</body>
</html>

Answer 3

您甚至可以将它们组合在一起;）在模板页面中使用以下内容。

<title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">
    Template title
</title>

在您的情况下，这将解决：

<title>Template title - Page Title</title>

Answer 4

这是我发现的最佳解决方案：

创建一个块片段

<th:block th:fragment="header">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" charset="UTF-8"/>
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <!-- Bootstrap Css -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"/>

    <!-- Fontawesome css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

    <!-- JQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

</th:block>

在html页面的所有头部执行此操作

<head>
    <div th:replace="fragments/headerFragment :: header"></div>
    <title>Example</title>
    <script src="customStuff"></script>
</head>

所以最后你可以在你的所有页面中创建一个包含所有脚本和css的片段，然后将其添加到标题中，同时仍然可以添加一些自定义css，脚本或任何

Answer 5

这项工作对我来说..

<强>布局

<head th:fragment="headerfragment">
    <title th:text="${pageTitle}">Template Title</title>

页

<head th:include="layout :: headerfragment">

在我的控制器
上
m.addAttribute("pageTitle", "Dashboard Page");

Answer 6

根据documentation：include包括片段内容到包含div。所以你会得到模板的标题。您可以使用页面标题的属性，如下所示，并在每个控制器中设置其值。

<head th:fragment="headerFragment">
   <title>${pagetitle}</title>
   <!-- metas, link and scripts -->
</head>

或者，您可以使用布局方言来实现与此处所述相同的方法。 Thymeleaf layout dialect and th:replace in head causes title to be blank

Answer 7

    <!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">
  <head th:fragment="static_resource">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" media="all"
        href="../lib/element-ui/index.css"  />
    <script type="text/javascript" src="../lib/http.js"></script>
    <script type="text/javascript" src="../lib/vue.js"></script>
    <script type="text/javascript" src="../lib/element-ui/index.js"></script>
  </head>
  <body>
    
  
  </body>
  
</html>

并包含带有block指令的片段，可以设置标题分隔

<head>
<th:block th:include="web/fragments/static_file :: static_resource" />
<title>首页</title>
</head>

Answer 8

1) 组合片段

你想要做的是让一个 HTML 从另一个 HTML 继承，并覆盖部分代码。但是我不建议使用继承（th:include），你到处都能看到很多关于继承和组合区别的讨论。

这是片段文件（templates/fragments/header.html）：

<div th:fragment="headerMeta" xmlns:th="http://www.thymeleaf.org" th:remove="tag">
    <!-- meta -->
    <meta charset="UTF-8">
</div>

<div th:fragment="headerCssJs" xmlns:th="http://www.thymeleaf.org" th:remove="tag">
    <!-- CSS and JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</div>

这是模板文件：

<head>
    <title>My First Page</title>
    <meta name="description" content="This is my first page.">
    
    <div th:replace="fragments/header :: headerMeta"></div>
    <div th:replace="fragments/header :: headerCssJs"></div>
</head>

2) 官网示例

8.3 Flexible layouts: beyond mere fragment insertion

Thymeleaf的头和头衔

8 个答案:

1) 组合片段

2) 官网示例