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完成。

山姆，虽然你的答案很满意，但我仍有疑问。

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

它适用于布局，但如何仅替换片段的内容？

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

片段/ 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>

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

在某些情况下，我需要更换正在替换的元素。我也需要保留其父母和内容。

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

布局/ 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片段中选择子元素位置？

2 个答案: