马克社区,马克吐温社区,马克java社区SpringBoot使用thymeleaf实现布局方案二，方案在手说走就走

SpringBoot使用thymeleaf实现布局方案二，方案在手说走就走 - 第425篇

在前面的小节中，介绍了th:include/th:replace/th:insert的方式进行页面的布局，在这里还有一种非常不错的方案，也就是layout，这一节就来看下如何进行使用。

一、layout布局

这里是接着上一节的基本框架，往下讲解，对于基本的引入不重复赘述。

看下layout的使用步骤：

（1）引入thymeleaf-layout-dialect依赖

（2）添加LayoutDialect

（3）允许bean被重新定义

（4）定义布局文件layout.html

（5）编写页面文件

1.1 引入thymeleaf-layout-dialect依赖

在pom.xml文件依赖：

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

1.2添加LayoutDialect

创建一个配置文件ThymeleafConfig，主要是注入LayoutDialect：

package com.kfit.config;import nz.net.ultraq.thymeleaf.LayoutDialect;import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;import org.thymeleaf.TemplateEngine;/** * Thymeleaf配置类 * * @author 悟纤「公众号SpringBoot」 * @date 2022-04-23 * @slogan 大道至简 悟在天成 */@Configurationpublic class ThymeleafConfig {    @Bean    public LayoutDialect layoutDialect(){        return new LayoutDialect();    }    @Bean    public TemplateEngine templateEngine(){        TemplateEngine templateEngine = new TemplateEngine();        templateEngine.addDialect(layoutDialect());        return templateEngine;    }}

1.3允许bean被重新定义

如果没有添加此配置的话，可能会报如下错误：

只需要在application.properties添加配置：

spring.main.allow-bean-definition-overriding=true

1.4定义布局文件layout.html

这个也是layout布局方式的核心文件了，看下具体怎么编写：

<!DOCTYPE html><html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"><head>    <title>Layout page</title></head><body>    <!-- 导航部分 -->    <header style="text-align: center;height: 40px;background: cadetblue;"> 首页 | 产品 | 关于我们 </header>    <section layout:fragment="content">        <p>Page content goes here</p>    </section>    <!-- 顶部部分 -->    <footer style="text-align: center;;height: 40px;background: #2e2e41;color:white;">@版权所有 公众号SpringBoot</footer></body></html>

说明：

（1）使用xmlns:layout引入layout

（2）使用layout:fragment定义页面的代码片段渲染位置

（3）对于header和footer也可以使用th:replace进行引入

1.5编写页面文件

最后来看下页面：

<!DOCTYPE html><html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"      layout:decorate="~{common/layout.html}"><head>    <title>Content page</title></head><body>    <section layout:fragment="content">        <div style="text-align: center;height:100px;">内容部分layout</div>    </section></body></html>