springboot的代码片段

springboot的代码片段

一、th:insert，th:replace，th:include的使用

以下摘抄于此文档

关于thymeleaf th:replace th:include th:insert 的区别
th:insert   ：保留自己的主标签，保留th:fragment的主标签。

th:replace ：不要自己的主标签，保留th:fragment的主标签。

th:include ：保留自己的主标签，不要th:fragment的主标签。（官方3.0后不推荐）

 需要替换的片段内容：

<footer th:fragment="copy">

   <script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>

</footer>

导入片段：

  <div th:insert="footer :: copy"></div>

  <div th:replace="footer :: copy"></div>

  <div th:include="footer :: copy"></div>

结果为：
<div>
  <footer>
     <script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>
  </footer>  
</div>  

<footer>
  <script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>
</footer>  

<div>
  <script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>
</div>  

二、实验

以bootstrap为例，发现主页面和代码片段之间样式不会相互影响。

代码片段

<aside th:fragment="leaderBoard" id="leaderBoard" class="leaderBoard">
  <div class="col-lg-8 col-md-12">
            <div class="row clearfix">
                <div class="col-sm-12">
                    <a th:href="@{/study/toStudyPage}">
                        <strong style="color: #0d97ff">专栏：</strong>
                    </a>
                    <div class="card">
                        <div class="body">
                            <div class="carousel slide" data-ride="carousel">
                                <div class="carousel-inner" role="listbox">
                                    <div class="carousel-item text-center active">
                                        <div class="col-12">
                                            <ul class="row days-list list-unstyled">
                                                <li class="day col-4">
                                                    <p>doc1</p>
                                                    <img th:src="@{/assets/images/image-gallery/1.jpg}" src="../html/assets/images/image-gallery/3.jpg" alt="">
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</aside>

主页面

<div class="row clearfix">
	<div th:include="/basic/leaderboard :: leaderBoard"></div>
</div>

注意：

• 发现主页面的row对代码片段的col不起效果，正确做法应保证主页面和代码片段样式不会相互影响（"row clearfix"放在代码片段中）。
• 注意 th:insert，th:replace，th:include的语法，先指明要使用template下哪个html页面，再指明会用该html页面中的哪个片段）

三、参考文档

thymeleaf th:replace th:include th:insert 的区别