th:insert、th:replace、th:include抽取和引用页面公共片段、传参等

2024-04-24 14:18

本文主要是介绍th:insert、th:replace、th:include抽取和引用页面公共片段、传参等,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

转载自:https://www.cnblogs.com/bear7/p/13491428.html

一、抽取公共片段

th:fragment  给片段命名

将公共片段抽取出来,并在顶级标签内使用th:fragment给该片段命名。

例如:将公共片段抽取出来放到comment/bar.html中:

<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar"><a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">Company name</a><input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search"><ul class="navbar-nav px-3"><li class="nav-item text-nowrap"><a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">Sign out</a></li></ul>
</nav>

这样我们就抽取了一个名叫topbar的公共片段。

二、引入公共片段

1.三种引入片段的方式:

  • th:insert :将公共片段插入到声明引入的标签中
  • th:replace:将公共片段替换掉声明引入的标签
  • th:include:将公共片段中的内容包含进声明引入的标签内。

这三中引入的效果如下:

公共片段:
<footer th:fragment="copy">
&copy; 2011 The Good Thymes Virtual Grocery
</footer>

th:insert :

<div th:insert="footer :: copy"></div>效果:
<div>
<footer>
© 2011 The Good Thymes Virtual Grocery
</footer>
</div>

th:replace:

<div th:replace="footer :: copy"></div>
效果:
<footer>
&copy; 2011 The Good Thymes Virtual Grocery
</footer>

th:include:

<div th:include="footer :: copy"></div>
效果:
<div>
&copy; 2011 The Good Thymes Virtual Grocery
</div>

2.引入片段的表达式

在上边例子中我们可能有疑问 footer :: copy 这是什么意思?

其实这是一种引入片段的表达式之一,下面我们讲两种引入片段的表达式。

(1) 通过片段名引入片段的表达式: ~{模板名::片段名}

如我们需要引入上边第一部分演示的片段,我们需要这样写

<div th:replace="~{commons/bar::topbar}"></div>

注意:"~ {}"可以省略,开发中常常不会写~{}的方式来引入,而是通过下边这种,更加简洁

<div th:replace="commons/bar::topbar"></div>

(2)通过选择器引入片段的表达式:~{模板名::选择器}

例如引入id为user的片段:

#号为id选择器

3.引用片段并传参

1.传递参数

只需要在表达式后边跟个小括号即可传递参数,小括号内通过键值对的方式设置值(key=value)

<div th:replace="commons/bar::topbar(username='zhangsan')"></div>

2.获取参数

在目标页面(引用片段表达式中模板名对应的页面)通过变量表达式${} 获取值即可

<h4 th:text="${username}"></h4>

这篇关于th:insert、th:replace、th:include抽取和引用页面公共片段、传参等的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


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

相关文章

Java资源管理和引用体系的使用详解

《Java资源管理和引用体系的使用详解》:本文主要介绍Java资源管理和引用体系的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、Java的引用体系1、强引用 (Strong Reference)2、软引用 (Soft Reference)3、弱引用 (W

Python Selenium动态渲染页面和抓取的使用指南

《PythonSelenium动态渲染页面和抓取的使用指南》在Web数据采集领域,动态渲染页面已成为现代网站的主流形式,本文将从技术原理,环境配置,核心功能系统讲解Selenium在Python动态... 目录一、Selenium技术架构解析二、环境搭建与基础配置1. 组件安装2. 驱动配置3. 基础操作模

C#实现查找并删除PDF中的空白页面

《C#实现查找并删除PDF中的空白页面》PDF文件中的空白页并不少见,因为它们有可能是作者有意留下的,也有可能是在处理文档时不小心添加的,下面我们来看看如何使用Spire.PDFfor.NET通过C#... 目录安装 Spire.PDF for .NETC# 查找并删除 PDF 文档中的空白页C# 添加与删

Spring 中的循环引用问题解决方法

《Spring中的循环引用问题解决方法》:本文主要介绍Spring中的循环引用问题解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录什么是循环引用?循环依赖三级缓存解决循环依赖二级缓存三级缓存本章来聊聊Spring 中的循环引用问题该如何解决。这里聊

MySQL INSERT语句实现当记录不存在时插入的几种方法

《MySQLINSERT语句实现当记录不存在时插入的几种方法》MySQL的INSERT语句是用于向数据库表中插入新记录的关键命令,下面:本文主要介绍MySQLINSERT语句实现当记录不存在时... 目录使用 INSERT IGNORE使用 ON DUPLICATE KEY UPDATE使用 REPLACE

Android WebView无法加载H5页面的常见问题和解决方法

《AndroidWebView无法加载H5页面的常见问题和解决方法》AndroidWebView是一种视图组件,使得Android应用能够显示网页内容,它基于Chromium,具备现代浏览器的许多功... 目录1. WebView 简介2. 常见问题3. 网络权限设置4. 启用 JavaScript5. D

SpringBoot自定义注解如何解决公共字段填充问题

《SpringBoot自定义注解如何解决公共字段填充问题》本文介绍了在系统开发中,如何使用AOP切面编程实现公共字段自动填充的功能,从而简化代码,通过自定义注解和切面类,可以统一处理创建时间和修改时间... 目录1.1 问题分析1.2 实现思路1.3 代码开发1.3.1 步骤一1.3.2 步骤二1.3.3

Flutter监听当前页面可见与隐藏状态的代码详解

《Flutter监听当前页面可见与隐藏状态的代码详解》文章介绍了如何在Flutter中使用路由观察者来监听应用进入前台或后台状态以及页面的显示和隐藏,并通过代码示例讲解的非常详细,需要的朋友可以参考下... flutter 可以监听 app 进入前台还是后台状态,也可以监听当http://www.cppcn

MySQL表锁、页面锁和行锁的作用及其优缺点对比分析

《MySQL表锁、页面锁和行锁的作用及其优缺点对比分析》MySQL中的表锁、页面锁和行锁各有特点,适用于不同的场景,表锁锁定整个表,适用于批量操作和MyISAM存储引擎,页面锁锁定数据页,适用于旧版本... 目录1. 表锁(Table Lock)2. 页面锁(Page Lock)3. 行锁(Row Lock

禁止HTML页面滚动的操作方法

《禁止HTML页面滚动的操作方法》:本文主要介绍了三种禁止HTML页面滚动的方法:通过CSS的overflow属性、使用JavaScript的滚动事件监听器以及使用CSS的position:fixed属性,每种方法都有其适用场景和优缺点,详细内容请阅读本文,希望能对你有所帮助... 在前端开发中,禁止htm