八、thymeleaf 公共页面元素抽取

版权声明：本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/PZHU_CG_CSDN/article/details/81989248

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>