Question

我有template.html文件，其中包含所有页面的布局，我有另一个html文件（index.html），我希望index.html文件的数据写在template.html的body标签中。我怎么能通过百里香来做到这一点。

Answer 1

创建一个页面，其中包含将在页面之间共享的布局。通常，这将是一个模板，其中包含页眉，导航，页脚以及页面内容的位置。

的layout.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
   <head>
      <title>Layout page</title>
      <script src="common-script.js"></script>
   </head>
   <body>
      <header>
         <h1>My website</h1>
      </header>
      <section layout:fragment="content">
          <p>Page content goes here</p>
      </section>
      <footer>
         <p>My footer</p>
         <p layout:fragment="custom-footer">Custom footer here</p>
      </footer>  
    </body>
  </html>

注意layout：fragment属性是如何应用于页脚中的and

元素的。这些是装饰器页面中的点，它们可以通过匹配内容页面中的片段来替换。现在，创建一些内容页面。

Content1.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="Layout.html">
<head>
    <title>Content page 1</title>
    <script src="content-script.js"></script>
</head>
<body>
    <section layout:fragment="content">
     <p>This is a paragraph from content page 1</p>
    </section>
    <footer>
      <p layout:fragment="custom-footer">This is some footer content from content page 1</p>
    </footer>
</body>
</html>

<强>参考：

Thymeleaf的一种方言，允许您使用布局/装饰页面来设置内容的样式。 https://github.com/ultraq/thymeleaf-layout-dialect#decorators-and-fragments

Answer 2

通常你会反过来，并在页面中包含模板或模板的一部分，如下所示：

<head th:include="fragments/template :: headFragment">

标题中的

或

<div th:include="fragments/template :: footerFragment"></div>

在index.html的正文中。片段在template.html文件中的位置：

<header id="headerFragment" th:fragment="headerFragment">
...
</header>

<div class="container">
</div>

<footer id="footer" th:fragment="footerFragment">
  <!-- FOOTER -->
  <footer>
    ...
  </footer>
</footer>

将索引页面包含在模板中后，它就不再是模板了，对吗？

此致

Thymeleaf在模板文件中渲染数据

2 个答案: