如何不使用Layout Dialect向Thymeleaf片段传递任意HTML内容？

当然可以用原生Thymeleaf实现你要的功能，不需要依赖Layout Dialect或其他第三方方言。核心是利用Thymeleaf的片段参数和选择器机制，实现类似"插槽"的内容注入效果，具体实现方式如下：

1. 定义可接收动态内容的手风琴片段 #

在模板文件（比如/path/to/template.html）里，定义接受标题和内容参数的片段：

<div th:fragment="accordion(heading, content)">
    <h2 th:text="${heading}"></h2>
    <div class="body">
        <!-- 插入传递进来的任意HTML内容 -->
        <th:block th:insert="${content}"></th:block>
    </div>
</div>

这里的content参数是一个片段变量，专门用来接收外部传入的任意HTML结构。

2. 在页面中引用片段并传递自定义内容 #

在需要使用手风琴的页面里，通过th:replace调用片段，同时用选择器指定要传递的内容块：

<!-- 调用手风琴片段，传递标题和自定义内容 -->
<div th:replace="~{/path/to/template.html :: accordion(
    heading='Example Heading', 
    content=~{::#accordion-content}
)}">
    <!-- 这里就是自定义内容插槽，用id标记方便选择器定位 -->
    <th:block id="accordion-content">
        <p>Maybe some p tag</p>
        <table>
            <tr><td>任意表格内容</td></tr>
        </table>
        <!-- 支持嵌套手风琴，完全兼容 -->
        <div th:replace="~{/path/to/template.html :: accordion(
            heading='Nested Accordion', 
            content=~{::#nested-content}
        )}">
            <th:block id="nested-content">
                <p>嵌套手风琴的内容</p>
            </th:block>
        </div>
    </th:block>
</div>

额外说明 #

• 如果你需要多个"插槽"（比如手风琴头部和内容之外再加一个底部），只需要在片段定义里增加对应的参数即可，比如accordion(heading, content, footer)，然后在调用时传递多个选择器对应的内容块。
• 你之前用::h1、::section的方式是基于标签选择器，虽然可行但不够灵活，用id选择器可以精准定位内容块，避免页面中其他同标签元素干扰。

内容的提问来源于stack exchange，提问作者Kerem