百里香叶3(不是)建筑布局顺序?



我知道百里香叶(https://github.com/ultraq/thymeleaf-layout-dialect(的布局方言的存在,但在进入百里香叶3之前的方言之前,我想探索更新的片段表达(在TL3中引入(。

因此,根据文档 - 我可以定义 base.html其工作方式几乎与布局方言允许管理片段的方式相同。

基.html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="base(title, links, content)">
<title th:replace="${title}"></title>
<link rel="stylesheet" type="text/css" media="all" href="/css/main.css" />
<th:block th:replace="${links}"></th:block>
</head>
<body>
<header th:replace="~{header :: header}"></header>
<div th:replace="${content}"></div>
<footer th:replace="~{footer::footer}"></footer>
</body>
</html>

。但是当我在家里使用它时.html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="base::base(~{::title}, ~{::link}, ~{::content})">
<title th:text="#{home.title}"></title>
<link rel="stylesheet" th:href="test">
<link rel="stylesheet" th:href="test1">
<link rel="stylesheet" th:href="test2">
</head>
<body>
<div th:fragment="content">
<span>TEST CONTENT</span>
</div>
</body>
</html>

。它就像家一样.html只评估自己和它传递给 base 的参数.html因为这是产品:

<!DOCTYPE html>
<html>
<head>
<title>My home page</title>
<link rel="stylesheet" type="text/css" media="all" href="/css/main.css" />
<link rel="stylesheet" href="test"><link rel="stylesheet" href="test1"><link rel="stylesheet" href="test2">
</head>
<body>
<div>
<span>TEST CONTENT</span>
</div>
</body>
</html>

如您所见,标题在 home 中进行评估.html并传递给 base.html,我在 home.html 中提供的 3 个链接也是如此。此外,内容也会传递并放置在适当的位置。缺少什么?所有不是基础论据的东西.html碎片。百里香叶忽略评估我的页眉和页脚,只是删除它们。

让我只注意,如果我在主页中放置页眉/页脚.html在内容中,它们将被评估为应有的方式 - 从标题.html选择器标题:"~{标题::标题}"。

我是否错过了一些关于整个事情应该如何运作的关键内容?如果片段无法评估自己并且需要从"子文件(调用方("传递所有内容,那么能够定义将用作布局的片段有什么意义?

在我看来,您将片段和替换混合在一起。头部更换效果很好,因为您正确声明了它。但是为什么要在 base 中声明一个th:replace属性.html比如<header th:replace="~{header :: header}"></header>?它不在片段中,不是参数,因此必须从某个地方替换它。

据我了解,您期望在基地.html有碎片,在家里.html有替代品。然后制作页眉和页脚片段,并在 home.html 中声明相应的th:replace标签。

<div th:replace="${content}"></div>

这也不起作用,因为它不在th:fragment标签内。 底线:修复标签的层次结构和替换逻辑。

就像Xaltotun指出的那样 - 我需要修复我的东西。

我将 base(args...( 放在标题中,所以我传递的片段在正文中不可见,因此一切都失败了。

让我添加一些代码:

布局.html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:fragment="layout(content, title, meta)">
<head>
<title th:text="${title}">Default Title</title>
<link rel="stylesheet" type="text/css" media="all" href="/css/style.css" />
<th:block th:replace="${meta}" />
</head>
<body>
<div class="viewport">
<header class="website-header">
...
</header>
<div th:replace="${content}"></div>
<th:block th:replace="staticContentTemplate :: testFragment" />
<footer class="website-footer">
...
</footer>
</div>
</body>
</html>

首页.html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="layout::layout(~{::content}, #{home.title}, ~{::meta})">
<head>
<th:block th:fragment="meta">
<link rel="stylesheet" th:href="test">
</th:block>
</head>
<body>
<div th:fragment="content">
<span>TEST CONTENT</span>
</div>
</body>
</html>

结果符合预期:

  • 主页.html提供标题、内容和元。
  • 布局.html提供其他所有内容,并且还从不同的源复制其他模板staticContentTemplate :: testFragment
  • 给其他人的提示:请注意,我按此顺序将 args 放置在布局中 - 内容因为它始终存在,标题可以是可选的,元可能不需要 - 这允许我们仅使用内容调用布局:layout(~{::content})(更短 = 更好(。

最新更新