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

您所在的位置:网站首页 html中th th:insert、th:replace、th:include抽取和引用页面公共片段、传参等

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

2024-04-18 21:55| 来源: 网络整理| 查看: 265

一、抽取公共片段

th:fragment  给片段命名

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

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

     

  Company name                Sign out      

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

 

二、引入公共片段

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

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

这三中引入的效果如下:

公共片段: © 2011 The Good Thymes Virtual Grocery

th:insert :

效果: © 2011 The Good Thymes Virtual Grocery

th:replace:

效果: © 2011 The Good Thymes Virtual Grocery

th:include:

效果: © 2011 The Good Thymes Virtual Grocery

2.引入片段的表达式

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

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

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

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

注意 ~{}可以省略,开发中常常不会写~{}的方式来引入,而是通过下边这种,更加简洁。但是如果是行内写法,则必须加上~{},例如  [[~{}]]  或  [(~{  })]

 

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

例如引入id为user的片段:

#号为id选择器

 

三、引用片段并传参

1.传递参数

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

 2.获取参数

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

 

 



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3