Themeleaf复用功能

Themeleaf复用功能

Thymeleaf 的复用功能能够有效减少代码冗余,提升开发效率,让代码更易于维护。以下为你详细介绍几种常见的复用功能:

1. 片段复用(Fragments)
定义片段

借助 th:fragment 指令,可将页面的部分代码定义成可复用的片段。片段能定义在单独的文件里,也可以和使用它的页面处于同一文件中。

示例:在 fragments.html 文件中定义片段:

scala 复制代码
html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
    <!-- 定义一个简单的头部片段 -->
    <div th:fragment="header">
        <h1>网站头部</h1>
    </div>
    <!-- 定义一个带参数的侧边栏片段 -->
    <div th:fragment="sidebar(title)">
        <h2 th:text="${title}">默认侧边栏标题</h2>
        <ul>
            <li>菜单项 1</li>
            <li>菜单项 2</li>
        </ul>
    </div>
</body>
</html>
使用片段

利用 th:replace 或者 th:insert 指令来引入片段。
th:replace 会用片段内容替换当前标签
th:insert 会把片段内容插入到当前标签内部。

示例:在 index.html 文件中使用上述片段:

scala 复制代码
html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>首页</title>
</head>
<body>
    <!-- 引入头部片段 -->
    <div th:replace="fragments :: header"></div>
    <!-- 引入侧边栏片段并传递参数 -->
    <div th:replace="fragments :: sidebar(title='特色侧边栏')"></div>
    <p>这是首页的主要内容。</p>
</body>
</html>

2. 布局复用(Layouts)

定义布局模板

借助 Thymeleaf Layout Dialect 或者类似的扩展,能够创建布局模板,把页面的公共部分(像头部、底部、导航栏等)提取出来。

示例:创建 layout.html 布局模板:

scala 复制代码
html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <title th:text="${title}">默认标题</title>
    <meta charset="UTF-8">
</head>
<body>
    <header>
        <h1>全局头部</h1>
    </header>
    <!-- 内容区域,子页面将替换此部分 -->
    <section layout:fragment="content">
        <p>默认内容</p>
    </section>
    <footer>
        <p>全局底部</p>
    </footer>
</body>
</html>
使用布局模板

在具体页面里使用 layout:decorate 指令指定要使用的布局模板,再用 layout:fragment 指令替换布局模板里的特定片段。

示例:创建 page.html 页面并使用布局模板:

scala 复制代码
html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout}">
<head>
    <title>具体页面标题</title>
</head>
<body>
    <!-- 替换布局模板中的 content 片段 -->
    <section layout:fragment="content">
        <p>这是具体页面的内容。</p>
    </section>
</body>
</html>

3. 表达式复用

可以把常用的表达式提取到一个变量中,在需要的地方复用。

示例:

scala 复制代码
html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>表达式复用示例</title>
</head>
<body>
    <!-- 定义一个表达式变量 -->
    <th:block th:with="user = ${session.user}">
        <p th:if="${user != null}" th:text="${'欢迎,' + user.name}">未登录</p>
        <p th:if="${user == null}">请登录</p>
    </th:block>
</body>
</html>

在这个示例中,th:with 指令定义了一个名为 user 的变量,用于存储 session.user 的值,后续在页面中能多次使用该变量,避免重复编写相同的表达式。

4. 消息复用

利用消息表达式(#{})和国际化资源文件,能够复用文本消息。

示例:

  1. 在 messages.properties 文件中定义消息:
scala 复制代码
properties
welcome.message=欢迎访问我们的网站!
  1. 在 HTML 页面中使用消息:
scala 复制代码
html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>消息复用示例</title>
</head>
<body>
    <p th:text="#{welcome.message}">默认欢迎消息</p>
</body>
</html>
相关推荐
前端小巷子15 分钟前
Webpack 5模块联邦
前端·javascript·面试
玲小珑18 分钟前
Next.js 教程系列(十九)图像优化:next/image 与高级技巧
前端·next.js
晓得迷路了19 分钟前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
go546315846520 分钟前
基于分组规则的Excel数据分组优化系统设计与实现
人工智能·学习·生成对抗网络·数学建模·语音识别
江城开朗的豌豆25 分钟前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆31 分钟前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
pengzhuofan34 分钟前
Web开发系列-第0章 Web介绍
前端
●VON38 分钟前
重生之我在暑假学习微服务第二天《MybatisPlus-下篇》
java·学习·微服务·架构·mybatis-plus
小鱼人爱编程43 分钟前
Java基石--反射让你直捣黄龙
前端·spring boot·后端
Yu_Lijing1 小时前
MySQL进阶学习与初阶复习第四天
数据库·学习·mysql