Themeleaf复用功能

Themeleaf复用功能

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

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

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

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 文件中使用上述片段:

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 布局模板:

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 页面并使用布局模板:

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. 表达式复用

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

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 文件中定义消息:
properties
welcome.message=欢迎访问我们的网站!
  1. 在 HTML 页面中使用消息:
html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>消息复用示例</title>
</head>
<body><p th:text="#{welcome.message}">默认欢迎消息</p>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/79021.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端面试题(八):简述Vue2的响应式原理

Vue 2 的响应式原理主要基于 数据劫持 和 发布-订阅模式&#xff0c;通过 Object.defineProperty 对对象的属性进行拦截&#xff0c;实现数据的监控与视图更新。具体原理如下&#xff1a; 1. 数据劫持&#xff1a;Object.defineProperty Vue 2 在初始化过程中&#xff0c;通过…

深度学习中的数值稳定性处理详解:以SimCLR损失为例

文章目录 1. 问题背景SimCLR的原始公式 2. 数值溢出问题为什么会出现数值溢出&#xff1f;浮点数的表示范围 3. 数值稳定性处理方法核心思想数学推导 4. 代码实现分解代码与公式的对应关系 5. 具体数值示例示例&#xff1a;相似度矩阵方法1&#xff1a;直接计算exp(x)方法2&…

SQL(9):创建数据库,表,简单

1、创建数据库&#xff0c;一句SQL语句搞定 CREATE DATDBASE 数据库名 CREATE DATABASE my_db;2、创建表 CREATE TABLE 表名(字段名 类型) CREATE TABLE Persons ( PersonID int, LastName varchar(255), FirstName varchar(255), Address varchar(255), City varchar(255)…

QT Sqlite数据库-教程002 查询数据-下

【1】数据库查询的优化&#xff1a;prepare prepare语句是一种在执行之前将SQL语句编译为字节码的机制&#xff0c;可以提高执行效率并防止SQL注入攻击。 【2】使用prepare查询一张表 QString myTable "myTable" ; QString cmd QString("SELECT * FROM %1…

cline 提示词工程指南-架构篇

cline 提示词工程指南-架构篇 本篇是 cline 提示词工程指南的学习和扩展&#xff0c;可以参阅&#xff1a; https://docs.cline.bot/improving-your-prompting-skills/prompting 前言 cline 是 vscode 的插件&#xff0c;用来在 vscode 里实现 ai 编程。 它使得你可以接入…

算法---子序列[动态规划解决](最长递增子序列)

最长递增子序列 子序列包含子数组&#xff01; 说白了&#xff0c;要用到双层循环&#xff01; 用双层循环中的dp[i]和dp[j]把所有子序列情况考虑到位 class Solution { public:int lengthOfLIS(vector<int>& nums) {vector<int> dp(nums.size(),1);for(int i …

kubectl命令补全以及oc命令补全

kubectl命令补全 1.安装bash-completion 如果你用的是Bash(默认情况下是)&#xff0c;先安装补全功能支持包 sudo apt update sudo apt install bash-completion -y2.为kubectl 启用补全功能 会话中临时&#xff1a; source <(kubectl completion bash)持久化配置&#x…

48、Spring Boot 详细讲义(五)

3、集成MyBatis 3.1 MyBatis 概述 3.1.1 核心功能和优势 MyBatis 是一个 Java 持久层框架,它通过 XML 或注解配置 SQL 语句,将 Java 方法与 SQL 语句映射起来,消除了大量的 JDBC 代码,简化了数据库操作。MyBatis 的核心功能和优势包括: ORM(对象关系映射):通过 XML …

BERT - Bert模型框架复现

本节将实现一个基于Transformer架构的BERT模型。 1. MultiHeadAttention 类 这个类实现了多头自注意力机制&#xff08;Multi-Head Self-Attention&#xff09;&#xff0c;是Transformer架构的核心部分。 在前几篇文章中均有讲解&#xff0c;直接上代码 class MultiHeadAtt…

解决 Spring Boot 启动报错:数据源配置引发的启动失败

启动项目时&#xff0c;控制台输出了如下错误信息&#xff1a; Error starting ApplicationContext. To display the condition evaluation report re-run your application with debug enabled. 2025-04-14 21:13:33.005 [main] ERROR o.s.b.d.LoggingFailureAnalysisReporte…

履带小车+六轴机械臂(2)

本次介绍原理图部分 开发板部分&#xff0c;电源供电部分&#xff0c;六路舵机&#xff0c;PS2手柄接收器&#xff0c;HC-05蓝牙模块&#xff0c;蜂鸣器&#xff0c;串口&#xff0c;TB6612电机驱动模块&#xff0c;LDO线性稳压电路&#xff0c;按键部分 1、开发板部分 需要注…

【开发记录】服务外包大赛记录

参加服务外包大赛的A07赛道中&#xff0c;最近因为频繁的DEBUG&#xff0c;心态爆炸 记录错误 以防止再次出现错误浪费时间。。。 2025.4.13 项目在上传图片之后 会自动刷新 没有等待后端返回 Network中的fetch /upload显示canceled. 然而这是使用了VS的live Server插件才这样&…

基于FreeRTOS和LVGL的多功能低功耗智能手表(硬件篇)

目录 一、简介 二、板子构成 三、核心板 3.1 MCU最小系统板电路 3.2 电源电路 3.3 LCD电路 3.4 EEPROM电路 3.5 硬件看门狗电路 四、背板 4.1 传感器电路 4.2 充电盘 4.3 蓝牙模块电路 五、总结 一、简介 本篇开始介绍这个项目的硬件部分&#xff0c;从最小电路设…

为 Kubernetes 提供智能的 LLM 推理路由:Gateway API Inference Extension 深度解析

现代生成式 AI 和大语言模型&#xff08;LLM&#xff09;服务给 Kubernetes 带来了独特的流量路由挑战。与典型的短时、无状态 Web 请求不同&#xff0c;LLM 推理会话通常是长时运行、资源密集且部分有状态的。例如&#xff0c;一个基于 GPU 的模型服务器可能同时维护多个活跃的…

MacOs下解决远程终端内容复制并到本地粘贴板

常常需要在服务器上捣鼓东西&#xff0c;同时需要将内容复制到本地的需求。 1-内容是在远程终端用vim打开&#xff0c;如何用vim的类似指令达到快速复制到本地呢&#xff1f; 假设待复制的内容&#xff1a; #include <iostream> #include <cstring> using names…

STM32 vs ESP32:如何选择最适合你的单片机?

引言 在嵌入式开发中&#xff0c;STM32 和 ESP32 是两种最热门的微控制器方案。但许多开发者面对项目选型时仍会感到困惑&#xff1a;到底是选择功能强大的 STM32&#xff0c;还是集成无线的 ESP32&#xff1f; 本文将通过 硬件资源、开发场景、成本分析 等多维度对比&#xf…

【blender小技巧】Blender导出带贴图的FBX模型,并在unity中提取材质模型使用

前言 这其实是我之前做过的操作&#xff0c;我只是单独提取出来了而已。感兴趣可以去看看&#xff1a;【blender小技巧】使用Blender将VRM或者其他模型转化为FBX模型&#xff0c;并在unity使用&#xff0c;导出带贴图的FBX模型&#xff0c;贴图材质问题修复 一、导出带贴图的…

如何保证本地缓存和redis的一致性

1. Cache Aside Pattern&#xff08;旁路缓存模式&#xff09;​​ ​核心思想​&#xff1a;应用代码直接管理缓存与数据的同步&#xff0c;分为读写两个流程&#xff1a; ​读取数据​&#xff1a; 先查本地缓存&#xff08;如 Guava Cache&#xff09;。若本地未命中&…

k8s通过service标签实现蓝绿发布

k8s通过service标签实现蓝绿发布 通过k8s service label标签实现蓝绿发布方法1:使用kubelet完成蓝绿切换1. 创建绿色版本1.1 创建绿色版本 Deployment1.2 创建绿色版本 Service 2. 创建蓝色版本2.1 创建蓝色版本 Deployment2.2 创建蓝色版本 Service 3. 创建蓝绿切换SVC (用于外…

智慧酒店企业站官网-前端静态网站模板【前端练习项目】

最近又写了一个静态网站&#xff0c;智慧酒店宣传官网。 使用的技术 html css js 。 特别适合编程学习者进行网页制作和前端开发的实践。 项目包含七个核心模块&#xff1a;首页、整体解决方案、优势、全国案例、行业观点、合作加盟、关于我们。 通过该项目&#xff0c;小伙伴们…