在Spring Thymeleaf中，th:include允许我们在一个页面中引用另一个页面的片段，这让网站的开发更加灵活和高效。
一、引入th:include的基本用法
th:include最基本的语法格式如下：
<div th:include="fragments/header::headerContent"></div>
在上面的代码中，我们使用th:include引用了其他页面的headerContent片段，这个页面位于fragments/header.html中。
需要注意的是，在引用其他页面的片段时，必须使用以下格式：页面的名字+::+片段的名字。
th:include并不仅仅局限于标签，我们在其他标签中同样可以使用它来引入其他页面中的内容。
二、使用th:include与动态展示数据
我们可以使用th:include来引入其他页面中的动态数据。假设我们在片段headerContent中需要动态展示当前用户的头像和用户名，这个信息可以从后台Java代码中获取。
那么我们可以将headerContent片段写为如下形式：
<div th:fragment="headerContent">
<span class="avatar" th:style="'background-image: url(' + ${user.avatar} + ')'"></span>
<span class="username" th:text="${user.name}"></span>
</div>
在上面的代码中，我们使用了th:text和th:style属性来展示用户名和头像，并且这些数据都来自于后台Java代码中的user对象。
那么在引用这个片段时，我们可以这样写：
<div th:include="fragments/header::headerContent" th:with="user=${currentUser}"></div>
在上面的代码中，我们使用th:with属性来指定user变量，这个变量在后台Java代码中与currentUser对象对应。
三、使用th:include拆分页面
编写网站时，有时候一些页面中会出现相似的内容，这时我们可以使用th:include来避免代码重复。使用th:include时，我们可以将相似的内容提取出来，放在单独的页面中，以便复用。
举个例子，在一个博客网站中，可能会有很多文章列表，在每个文章列表中，都需要显示文章的标题、摘要以及发表时间等信息。那么我们可以将文章列表的部分内容写为一个片段，然后在所有需要使用到文章列表的页面中引用这个片段。
我们可以将文章列表片段写为如下代码：
<div th:fragment="articleList">
<div class="article-item" th:each="article : ${articles}">
<h4 th:text="${article.title}"></h4>
<p th:text="${article.abstract}"></p>
<small th:text="${article.publishedTime}"></small>
</div>
</div>
在上面的代码中，我们使用th:each循环来展示所有的文章，并且使用了th:text属性来展示文章的标题、摘要以及发表时间。
在其他页面中引用这个片段时，我们可以这样写：
<div th:include="fragments/article::articleList" th:with="articles=${articleList}"></div>
在上面的代码中，我们使用th:with属性来指定articles变量，这个变量在后台Java代码中与articleList对象对应。
四、结语
在这篇文章中，我们详细介绍了th:include的用法。通过引用其他页面的片段，我们可以实现更加灵活和高效的网站开发。希望这篇文章能够对大家有所帮助。
原创文章，作者：TKZD，如若转载，请注明出处：https://www.506064.com/n/141793.html
微信扫一扫 
支付宝扫一扫 