thymeleaf中片段（fragment）使用调用页内容

太过爱你忘了你带给我的痛 2023-06-30 02:50 3阅读 0赞

我终于知道在thymeleaf中，一个公用片段，如何使用调用它的页面上的内容了。

将页面上一些公用、独立的东西制作成片段，然后供其他页面按需要、层次式地引用，一般来说，已经满足大部分的需求。

但是有些还不够。比如想做一些容器类的片段：这个片段是一个容器，它只有外层一些东西是公用的，里面的内容，可能对于不同的页面，就是不同的，如图所示：  
![在这里插入图片描述][20200114184437343.png]  
对于这个容器来说，如何将调用页面上的个性化内容放到它里面去呢？

通过参数传过去。

片段页：search.html

<block th:fragment="container(detail)" >
        <div>
            <div class="area-btn">
                <th:block th:include="::button" />
            </div>
            <div class="area-detail">
                <th:block th:replace="${detail}" />
            </div>
        </div>
    </block>
    
    
    <block th:fragment="button" >
        <input type="submit" id="btnSearch" value="查找" />
        <input type="button" id="btnReset" value="重置" />
    </block>

某调用页：

<th:block th:include="search::container(~{::mydetail})" >
        <block th:fragment="mydetail" >
            <div>Hello World!</div>
            <div>Hello China!</div>
            <span>Hello GuangZhou!</span>
        </block>
    </th:block>

关键是这个符号“**`~{::}`**”，代表的是片段。  
thymeleaf里的符号：

Variable Expressions: ${ ...}
    Selection Variable Expressions: *{ ...}
    Message Expressions: #{ ...}
    Link URL Expressions: @{ ...}
    Fragment Expressions: ~{ ...}

参考资料：

[Standard Expression Syntax（标准表达式语法）][Standard Expression Syntax]

[Fragment specification syntax（片段规范语法）][Fragment specification syntax]

[20200114184437343.png]: https://img-blog.csdnimg.cn/20200114184437343.png
[Standard Expression Syntax]: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#standard-expression-syntax
[Fragment specification syntax]: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#fragment-specification-syntax