Thymeleaf 模板 - 有没有办法装饰模板而不是包含模板片段？

java spring-mvc thymeleaf

2022-09-01 03:34:53

我是第一次使用 Thymeleaf，我需要对模板进行澄清。如果我正确理解了文档，我可以在我的页面中包含一个模板 - 或者只是它的一个片段。例如，我可以写这样的东西：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <head th:include="template/layout :: header">
    </head>
    <body>
        Hello world
        <div th:include="template/layout :: footer"></div>
    </body>
</html>

但是我想要的实际上是使用模板的相反方式：我不想在页面中包含模板片段，而是将页面包含在我的模板中，如下所示：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    ...
</head>
<body>

    <div id="my-template-header">...</div>

    <div id="the-content">
        <!-- include here the content of the current page visited by the user -->
        ???
    </div>

    <div id="my-template-footer">...</div>
</body>

换句话说，有没有办法在Thymeleaf中拥有与Sitemesh装饰器标签等效的标签？

谢谢

答案 1

使用 Thymeleaf 2.1，你可以这样写：

创建模板（例如 templates/layout.html），并在 html 标记中添加 th：fragment=“page” 信息，并使用 th：include=“this ：： content” 信息定义内容区域：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      th:fragment="page">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Test</title>
    </head>
    <body>
        layout page
        <div th:include="this :: content"/>
        layout footer
    </body>
</html>

现在创建将包含此模板的页面，在html标记中添加th：include=“模板/布局：：页面”，并将您的主要内容放在带有th：fragment=“content”的div中

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      th:include="templates/layout :: page">
    <head>
        <title></title>
    </head>
    <body>
        <div th:fragment="content">
            my page content
        </div>
    </body>
</html>

在布局页面中，您可以使用此选项（th：include=“this ：： content”）或禁止显示此选项（th：include=“：： content”）。我认为这似乎是jsf facelets。

答案 2

好吧，正如Sotirios Delimanolis所说，Thymeleaf不支持这种使用模板的方式，或者我应该说“分层布局”，正如Daniel Fernandez在此线程中解释的那样。

由于 sitemesh 和 Thymeleaf 是兼容的，因此似乎我必须同时使用这两种解决方案。太糟糕了。

编辑：正如DennisJaamann在评论中建议的那样，我最终使用了Thymeleaf Layout Dialect，这是一种视图方言，提供了我一直在寻找的功能。

工作代码：

首先，我添加类：LayoutDialect

@Bean
public ServletContextTemplateResolver templateResolver() {
    ServletContextTemplateResolver resolver = new ServletContextTemplateResolver();
    resolver.setPrefix("/WEB-INF/views/");
    resolver.setSuffix(".html");
    //NB, selecting HTML5 as the template mode.
    resolver.setTemplateMode("HTML5");
    resolver.setCacheable(false);
    return resolver;
}

然后，我创建模板（例如），并在要放置当前页面内容的位置添加信息：templates/layout.htmllayout:fragment

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    ...
</head>
<body>
    <div id="my-template-header">...</div>

    <div id="the-content" layout:fragment="content">
        <!-- include here the content of the current page visited by the user -->
    </div>

    <div id="my-template-footer">...</div>
</body>

并且该页面将引用具有以下属性的模板：layout:decorator

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="templates/layout">
<body>

    <div layout:fragment="content">
        Hello world
    </div>

</body>
</html>