八、thymeleaf 公共页面元素抽取

1、抽取公共片段

使用 th:fragment = “fra_name” 声明一个公共片段

<footer th:fragment="head" id="id_head">
<p>Head Information.</p>
</footer>

2、抽取公共片段

~{templatename::selector}：模板名::选择器

~{templatename::fragmentname}:模板名::片段名

templatename：当前引用片段所在文件位置。

selector：公共片段的选择器。

fragmentname:公共片段的名字。

例如，上面的公共片段在 bar.html 文件中声明，那么可以像下面这样引用：

//片段名引用
<div th:insert="~{bar :: head}"></div>
//选择器引用
<div th:insert="~{bar :: #id_head}"></div>

3、三种引用方式的区别

(1)、th:insert : 将公共片段整个插入到声明引入的元素中

//引入
<div th:insert="~{bar :: head}"></div>
//效果
<div>
<footer id="id_head">
<p>Head Information.</p>
</footer>
</div>

会将引入片段所在的标签全部引入到当前标签中。

(2)、th:replace : 将声明引入的元素替换为公共片段

//引入
<div th:replace="~{bar :: head}"></div>
//效果
<footer id="id_head">
<p>Head Information.</p>
</footer>

引入标签的 div 会被覆盖掉，最后内容为整个带引入标签内容。

(3)、th:include：将被引入的片段的内容包含进这个标签中

//引入
<div th:include="~{bar :: head}"></div>
//效果
<div>
<p>Head Information.</p>
</div>

只会将被引入片段其中的内容拿过来，其声明标签不要。

当然以上引入方式也可以使用选择器完成。

如果引入方式是这样的：

<div th:replace="commons/bar::#sidebar"></div>

表示引入的片段，是当前文件同级目录 commons 包(文件夹)下 bar 文件中 id 为 sidebar 的片段。

4、携带参数

　　在引入公共片段时，可以携带参数。将参数用加括号放在引入片段后面即可。

<div th:replace="commons/bar::#sidebar(activeUri='emps')"></div>

　　上面代码表示，引入片段时带入名为 activeUri 的参数，参数值为 emps。

　　在公共代码片段处，可以根据不同的参数值做出不同的动作。

<nav>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" th:href="@{/index}"
//根据参数是否等于 index 给当前元素添加不同的 class。
th:class="${activeUri=='index' ? 'nav-link active' : 'nav-link'}" >
INDEX
</a>
</li>
...
...
</ul>
</nav>

最后

以上就是洁净抽屉为你收集整理的八、thymeleaf 公共页面元素抽取的全部内容，希望文章能够帮你解决八、thymeleaf 公共页面元素抽取所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。