如何使用 thymeleaf 扩展我的模板?

问题描述 投票:0回答:2

我想要一个在一页中显示这两个文件的视图。我遵循了语法,但仍无法获得正确的视图。

布局页面:

<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

    <body>
        <div layout:fragment="content">
            <p>Changing contents</p>
        </div>
    </body>
</html>

内容页:

<!DOCTYPE html>
<html lang="en"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="skeleton.html"
      xmlns:th="http://www.thymeleaf.org">

  <body>
    <div layout:fragment="content">

      <!--Content of the page-->
      <h3>page injected in another page</h3>

    </div>
  </body>
</html>

结果就是包含以下文本的内容页面的内容: 页面已注入另一个页面

有人可以告诉我我的代码有什么问题吗?

html templates layout thymeleaf
2个回答
1
投票

对于

layout:decorate
,您需要使用标准表达式语法,类似...
layout:decorate="~{skeleton}"
将起作用,具体取决于您的
skeleton.html
文件的位置。


0
投票

看起来 Thymeleaf 3.1 版模板扩展应该使用教程:使用 Thymeleaf (3.1.2.RELEASE),第 8.5 章布局继承中描述的其他机制来完成:

布局是(

src/main/resources/templates/layout/layout_simple.html
):

<!DOCTYPE html>
<html lang="en" th:fragment="layout(title, main)"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:replace="${title}">Layout title</title>
</head>
<body>
<header>Common block: header</header>
<main id="mainpart" th:replace="${main}">
    <p><em>This content must not be visible.</em></p>
</main>
<footer>Common block: footer</footer>
</body>
</html>

页面是(

src/main/resources/templates/thymeleaf_first_page_simple.html
):

<!DOCTYPE html>
<html th:replace="~{layout/layout_simple :: layout(~{::title}, ~{::main})}"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf demo simple</title>
</head>
<body>
<main>
    <h1>Thymeleaf template extension simple demo</h1>
    <p>Actual page content: [<th:block th:text="${modelValue}" />]</p>
</main>
</body>
</html>

结果是:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf demo simple</title>
</head>
<body>
<header>Common block: header</header>
<main>
    <h1>Thymeleaf template extension simple demo</h1>
    <p>Actual page content: [some simple value from the model]</p>
</main>
<footer>Common block: footer</footer>
</body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.