SpringBoot 利用 th:fragment 实现代码复用

定义和引用模板片段

在多数项目中,我们经常会写很多重复代码,如导航栏、侧边栏等,为实现代码复用Thymeleaf 需要我们定义这些部分“⽚段”(相当于抽取出来)以供其他模版包含,可以使⽤th:fragment属性来定义被包含的模版⽚段。

示例如下:

  1. 将待重用的代码单独放入html文件中;(不放也可以,目的是方便日后区分);
    这里单独放入commons文件夹下:
    在这里插入图片描述
  2. 将待重用代码中加入 th:fragment:“name”,导入thymleaf引擎;

thymleaf引擎:

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">

th:fragment:“name”:

<!--顶部导航栏-->
<nav class="home-nav" th:fragment="navbar">
<!--侧边栏-->
<div class="col-md-2 sidebar"  th:fragment="sidebar">
  1. 将已片段化的代码插入
	 <!--导航条-->
    <div th:replace="~{commons/commons::navbar}"></div>
     <!--侧边栏-->
    <div th:replace="~{commons/commons::sidebar}"></div>

注意文件路径,代码⽚段表达式是表示标记⽚段的简单⽅法,并将其移动到模板周围。这允许我们复制它们,将它们传递给其他模板作为参数,等等。最常⻅的⽤法是使⽤th:insert或th:replace进⾏⽚段插入:

<div th:insert="~{commons :: main}"></div>

猜你喜欢

转载自blog.csdn.net/weixin_44627672/article/details/113827024