如何选择 Thymeleaf 片段内的子元素位置？

Question

我想使用 Thymeleaf 选择子元素在片段中的位置，如下例所示。

fragments.html:

<div th:fragment="awesomeFragment">
     Some Text
     <div><!-- children must be here --></div>
</div>

view.html:

<div th:replace="fragments :: awesomeFragment">
     <a href="www.google.com"/>
</div>

预期输出：

<div>
     Some Text
     <div><a href="www.google.com"/></div>
</div>

可能吗？如果是这样，我该怎么做？

Answer 1

您可以通过布局来完成。
为此使用 Thymeleaf Layout Dialect。
（如果您使用 Spring Boot 它已经打开了！）

布局将以这种形式呈现：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <title></title>
</head>
<body>
    <header>
        Some text
    </header>
    <div layout:fragment="content">
        <p>Page content goes here</p>
    </div>
</body>

您的页面将是：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
  xmlns:th="http://www.thymeleaf.org"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  layout:decorator="base/test">
<head>
    <title></title>
</head>
<body>
    <div layout:fragment="content">
        <a href="www.test.com">Test.com</a>
    </div>
</body>

我在我的 Thymeleaf 测试项目中尝试过。浏览器中页面的源代码如您所愿：

Answer 2

编辑：

以下问题已解决！可以使用 Includes and Fragments.

来完成

Sam，虽然你的回答很满意，解决了我的部分问题，但我还是有疑问。

此方法用布局中指定的元素替换元素及其所有祖先，并保留原始元素的内容。

它适用于布局，但只替换片段的内容怎么样？

假设我有以下场景。我正在开发 bootstrap 小部件库。一些小部件，如导航栏有内部容器，这个容器将包含其他元素。例如：

fragments/navbar.html

<!-- navbar --> 
<div th:fragment="navbar" class="navbar">
    <div class="navbar-inner">        
        <a class="brand" href="#">Awesome Thymeleaf Navbar</a>
        <ul class="nav">
            <!-- children goes here -->                
        </ul>
    </div>
</div>
<div>

内部 index.html

This is my Navbar:
<div th:replace="fragments/navbar :: navbar">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</div>

并得到以下输出：

    This is my Navbar:    
    <!-- navbar --> 
    <div th:fragment="navbar" class="navbar">
            <div class="navbar-inner">        
                <a class="brand" href="#">Awesome Thymeleaf Navbar</a>
                <ul class="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
            </div>
        </div>
    <div>

你明白其中的区别吗？他们向我展示的方式替换了元素及其祖先，但保留了内容。结果是整个文档根被替换。

在某些情况下，我只需要替换被替换的元素。我也需要保留它的 parents 和内容。

正如我所说，它已经解决了。下面是一个如何实现这个的例子：

layouts/navbar.html:

<!DOCTYPE html>
<html>
<body>       
    <div layout:fragment="navbar" class="navbar">
        <div class="navbar-inner">        
            <a class="brand" href="#">Navbar</a>
            <ul class="nav" layout:fragment="navbar-content">
                <!-- children goes here -->                
            </ul>
        </div>
    </div>  
</body>
</html>`

document.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Home</title>
    </head>
    <body>This is my Navbar:
        <div layout:include="layouts/navbar :: navbar" th:remove="tag">
            <ul layout:fragment="navbar-content">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </div>
    </body> 
</html>

如何选择 Thymeleaf 片段内的子元素位置？

How to choose children elements position inside a Thymeleaf's fragment?

java

spring-mvc

model-view-controller

thymeleaf

page-fragments