解决在Thymeleaf中layout:fragment不生效的问题

本文介绍了解决SpringMVC项目中Thymeleaf模板的layout:fragment不生效的问题,通过添加依赖及配置来实现模板继承。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

       最近一直在springboot项目上使用thymeleaf模板,很是方便,于是在我的SpringMVC项目中整合了thymeleaf模板,但是就出问题了,layout:fragment并不生效,模板继承并不可以使用。百般查阅之后,解决方法如下:

这里写图片描述

意思呢就是要想使用这个fragment呀,首先得在bean配置中加上这么几句才可以。

首先是maven依赖:

<dependency>
      <groupId>nz.net.ultraq.thymeleaf</groupId>
      <artifactId>thymeleaf-layout-dialect</artifactId>
      <version>2.2.1</version>
</dependency>

然后是在启动类增加:

TemplateEngine templateEngine = new TemplateEngine(); 
templateEngine.addDialect(new LayoutDialect());

或者是在XML配置文件中增加:

<bean id="templateEngine" class="org.thymeleaf.spring4.SpringTemplateEngine">
  <property name="additionalDialects">
    <set>
      <bean class="nz.net.ultraq.thymeleaf.LayoutDialect"/>
    </set>
  </property>
</bean>

参考:Thymeleaf Layout Dialect官方API

### Thymeleaf 中 `th:fragment` 属性的使用 在 Thymeleaf 模板引擎中,`th:fragment` 是用于定义可重用片段的关键属性。通过此属性可以创建页面中的局部区域作为独立的部分,在其他地方引用这些部分来构建复杂的网页布局。 #### 定义 Fragment 片段 要定义一个 fragment 片段,可以在任意 HTML 标签上添加 `th:fragment` 属性并指定名称: ```html <div th:fragment="header"> <h1>网站标题</h1> <p>欢迎访问本网站。</p> </div> ``` 上述代码定义了一个名为 header 的片段[^3]。 #### 引入 Fragment 片段 有几种方式可以从另一个文件引入已定义好的 fragments 片段: - **替换当前标签的内容** 当希望完全替代某个容器内的原有内容时,可以利用 `th:replace` 来实现这一点。这将会移除目标位置处原有的标记结构,并代之以新加载进来的 fragment 内容。 ```html <header th:replace="/fragments/header :: header"></header> ``` 这里 `/fragments/header` 表示外部资源路径,而 `:: header` 则指定了具体想要使用的 fragment 名称。 - **插入到现有标签内** 如果只是想把新的内容附加到现有的 DOM 结构之中而不改变其本身的层次关系,则应该选用 `th:insert` 方法来进行操作。 ```html <nav th:insert="/fragments/navigation :: nav-menu"></nav> ``` 这段声明会在 `<nav>` 元素内部追加由 `/fragments/navigation` 文件里 id 为 `nav-menu` 的 section 所代表的一组链接列表。 - **仅复制子节点** 对于只需要获取源文档某一部分下的直接后代元素的情况来说,可以选择应用 `th:include` 方式完成任务;不过需要注意的是自版本 3.0 起官方已经不再建议继续沿用这种方式了。 ```html <footer th:include="/fragments/footer :: footer-content"></footer> ``` 该指令会将来自 `/fragments/footer.html` 文档中具有 `footer-content` ID 值的对象里的所有直系孩子对象克隆至当前位置之下。 #### 实际案例展示 下面给出一段完整的例子说明如何在一个主页面中组合多个不同的 fragments 片段形成最终呈现给用户的完整界面效果: ##### 主页 (index.html) ```html <!DOCTYPE html> <html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"> <head> <!-- ... --> </head> <body> <header th:replace="~{common/fragments :: site-header}"></header> <main role="main"> <section class="hero-unit"> <h1>首页英雄单元格</h1> <p>这是主页的主要内容...</p> </section> <article> <h2>文章标题</h2> <p>正文...</p> </article> </main> <aside th:replace="~{common/fragments :: sidebar}"> <!-- 默认侧边栏占位符 --> </aside> <footer th:replace="~{common/fragments :: page-footer}"> <!-- 页面底部版权信息等 --> </footer> </body> </html> ``` 在这个实例里面,分别调用了位于 common 目录下 fragments 文件夹里面的三个不同功能区——头部 (`site-header`)、侧面 (`sidebar`) 和脚部 (`page-footer`) ——共同构成了整个 index.htm l的整体架构。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值