thymeleaf引入公共片段并传递参数

最新推荐文章于 2023-06-07 01:26:22 发布
最新推荐文章于 2023-06-07 01:26:22 发布
阅读量1.7k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44729800/article/details/106459884
版权

thymeleaf引入其他界面---公共页面元素的抽取

 

三种引入功能片段的th属性:

th:insert :将公共片段整个插入到声明引入的元素中

th:replace :将声明引入的元素替换为公共片段

th:include :将被引入的片段的内容包含进这个标签中

 

页脚页眉或其他公共菜单等：

1）templates.commons目录下创建bar.html

2)在bar.html中编写要引入的代码

3）如果引入代码是th:fragment="topbar"，则主网页引入方法是：（公共头）

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

3)如果引入代码是id="sidebar"，则主网页引入方法是：（侧边栏）

<div th:replace="commons/bar::#sidebar(activeUri='emps')"></div>

4）在后面加括号传入参数，多个参数用逗号分隔

因为有多个页面引用这个，所以高亮哪个需要处理

判断是否在主页面，如果在主页面则主页面高亮

判断是否在员工页面，如果在，则员工页高亮

 <a class="nav-link active"
                   th:class="${activeUri=='main.html'?'nav-link active':'nav-link'}"
                   href="#" th:href="@{/main.html}">

 

bar.html中的代码：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--topbar-->
<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/#">[[${session.loginUser}]]</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>
​
<!--sidebar-->
<nav class="col-md-2 d-none d-md-block bg-light sidebar" id="sidebar">
    <div class="sidebar-sticky">
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link active"
                   th:class="${activeUri=='main.html'?'nav-link active':'nav-link'}"
                   href="#" th:href="@{/main.html}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home">
                        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                        <polyline points="9 22 9 12 15 12 15 22"></polyline>
                    </svg>
                    Dashboard <span class="sr-only">(current)</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link"
                   href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file">
                        <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
                        <polyline points="13 2 13 9 20 9"></polyline>
                    </svg>
                    Orders
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart">
                        <circle cx="9" cy="21" r="1"></circle>
                        <circle cx="20" cy="21" r="1"></circle>
                        <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
                    </svg>
                    Products
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" href="#" th:href="@{/emps}"
                th:class="${activeUri=='emps'?'nav-link active':'nav-link'}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users">
                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                        <circle cx="9" cy="7" r="4"></circle>
                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                        <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                    </svg>
                    员工管理
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart-2">
                        <line x1="18" y1="20" x2="18" y2="10"></line>
                        <line x1="12" y1="20" x2="12" y2="4"></line>
                        <line x1="6" y1="20" x2="6" y2="14"></line>
                    </svg>
                    Reports
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers">
                        <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
                        <polyline points="2 17 12 22 22 17"></polyline>
                        <polyline points="2 12 12 17 22 12"></polyline>
                    </svg>
                    Integrations
                </a>
            </li>
        </ul>
​
        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
            <span>Saved reports</span>
            <a class="d-flex align-items-center text-muted" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
            </a>
        </h6>
        <ul class="nav flex-column mb-2">
            <li class="nav-item">
                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                        <polyline points="14 2 14 8 20 8"></polyline>
                        <line x1="16" y1="13" x2="8" y2="13"></line>
                        <line x1="16" y1="17" x2="8" y2="17"></line>
                        <polyline points="10 9 9 9 8 9"></polyline>
                    </svg>
                    Current month
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                        <polyline points="14 2 14 8 20 8"></polyline>
                        <line x1="16" y1="13" x2="8" y2="13"></line>
                        <line x1="16" y1="17" x2="8" y2="17"></line>
                        <polyline points="10 9 9 9 8 9"></polyline>
                    </svg>
                    Last quarter
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                        <polyline points="14 2 14 8 20 8"></polyline>
                        <line x1="16" y1="13" x2="8" y2="13"></line>
                        <line x1="16" y1="17" x2="8" y2="17"></line>
                        <polyline points="10 9 9 9 8 9"></polyline>
                    </svg>
                    Social engagement
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                        <polyline points="14 2 14 8 20 8"></polyline>
                        <line x1="16" y1="13" x2="8" y2="13"></line>
                        <line x1="16" y1="17" x2="8" y2="17"></line>
                        <polyline points="10 9 9 9 8 9"></polyline>
                    </svg>
                    Year-end sale
                </a>
            </li>
        </ul>
    </div>
</nav>
​
</body>
</html>
咱是汝的什么
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
[springboot]Thymeleaf公共片段(标签)与内联js
字母哥博客
04-02 1872
片段表达式的使用过程，有点像我们平时代码开发过程中的：共用函数抽取，大家按照这个思路，开始我们的学习！
Thymeleaf提取公共页面（从实例入手，以inspinia模板为例）
BADAO_LIUMANG_QIZHI的博客
06-28 2031
场景 使用Thymelaf 时，可以提取公共页面，比如侧边栏、需要公共引入的css、js文件、页脚等都可以提取出来。只编写业务页面的内容部分即可。 三种不同引入方式的区别 th:insert：将代码块片段整个插入到使用了th:insert的HTML标签中， th:replace：将代码块片段整个替换使用了th:replace的HTML标签中， th:include：将代码块片段包含的内容...
thymeleaf 公共模板传参
weixin_44371237的博客
05-27 394
公共模板 <th:block id="editBottom"> <div th:text="${link}"></div> </th:block> 引入页面 <th:block th:include="/manage/column/common::#editBottom(link='role')"></th:block>
thymeleaf 语法 —— thymleaf 的3种页面布局 layout、 th:include、th:replace 参数传递
热门推荐
猎人在吃肉
11-05 1万+
文章目录方式一、layout 布局方式二、 th:include 方式一、layout 布局 依赖： <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId>...
39、尚硅谷_SpringBoot_web开发-【实验】-员工列表-链接高亮&列表完成
八嘎兔
07-05 274
thymeleaf公共页面元素抽取 1、抽取公共片段 <div th:fragment="copy"> &copy; 2011 The Good Thymes Virtual Grocery </div> 2、引入公共片段 <div th:insert="~{footer :: copy}"></div> ~{templatename::s...
Thymeleaf引用片段传入参数
天高任鸟飞
08-30 7420
片段传入参数 声明片段的时候 可以声明变量参数，在片段中使用变量参数 &lt;div th:fragment="frag (onevar,twovar)"&gt; &lt;p th:text="${onevar} + ' - ' + ${twovar}"&gt;...&lt;/p&gt; &lt;/div&gt; 引入片段的时候 把参数的值，传入进来 两种书写方式 如果，...
thymeleaf 页面问题（路径，公共模块引入）
Kevinvcc200的博客
12-20 4877
路径：href,src 格式： @{  } eg:    &lt;link rel="stylesheet" th:href="@{/css/admin.less}" /&gt; &lt;script th:src="@{/js/jquery-3.2.1.min.js}"&gt;&lt;/script&gt; 一般项目默认static就是根路径，所以static下的路径中不能写stati..
Springboot + Thymeleaf实现带参数跳转页面
weixin_46504244的博客
09-03 4080
Springboot实现页面跳转需要引入依赖： <dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf</artifactId> <version>3.0.11.RELEASE</version> </dependency> 在application.propertiesde文件中配置 spr
thymeleaf标签的使用（传值到页面、弹窗；引入其他的html页面的部分页面）
Hiber12的博客
09-16 7048
一、前端页面测试thymeleaf标签 1、测试取值、循环、判断、方框是否默认打勾 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" > <head> <meta charset="UTF-8"/> <title>Title</title> </head&g
SpringBoot整合Thymeleaf提取公共页面
weixin_44541136的博客
05-29 784
在我们开发web项目的过程中，例如我们在编写HTML页面代码的时候，像典型的导航栏、侧边栏等部分，几乎都是重复的代码。在这之前我们一般都是使用页面嵌套等方式，把这些多余的页面代码去重复，最近接触到很多前后端代码分离开发的技术（Vue，Thymeleaf等），那么今天就简单分享一下学习到的Springboot整合了Thymeleaf模板后提取页面公共代码。 下面这两部分折叠的代码段就是上图红色框里面的顶部和侧边栏。 首先在templates目录下创建一个页面把上面两段代码放置进去，单独抽取出来..
thymeleaf仿vue动态调用高级用法，实现thymeleaf片段模板调用，动态加载
lengRuShuang116的博客
08-19 2508
首先这是基于一个需求，我们的项目后台用的springboot，前端用的layui，当时有一个需求是，在一个页面展示出一个任务当前任务的办理进度，就是很多个栅格的这种，而且要根据流程节点动态的展现，最终在项目经理的指导下，采用了thymeleafd的片段化调用的方式； 首先需要经过一个controller跳转到我的页面可以称作我最终显示的详情页面 跳转到详情页的控制器 @RequestMapping...
SpringBoot2.x系列教程（三十二）Thymeleaf资源导入及公共布局
程序新视界
01-15 1340
本篇文章来大家学习一下在Thymeleaf下如何引入静态资源及通用代码块。 引入静态资源 Thymeleaf中引入静态资源比较简单，与前面讲到的@{…}语法一致。 <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UT...
Thymeleaf公共代码段抽取、传参数，多参数写法，th:include, th:replace, th:insert
最新发布
konnysnow的专栏
06-07 489
2，如何解决Thymeleaf：如何使用条件条件动态添加/删除CSS类。3：thymeleaf用if判断字符串。
thymeleaf后端传值给前端,前端调不到
qq_42943161的博客
08-16 809
解决方法: 注意一下用的是servlet还是session,后者取值为session.xxxx,前者不用加作用域
Thymeleaf 公共组件的抽取 & 使用
扛麻袋的少年的博客
03-30 3264
Spring Boot学习笔记(十六)：使用Thymeleaf项目开发中，经常会遇到网页中有大量的重复的内容，此时我们就需要考虑把重复的内容抽取出来，这样就会显得网页不是那么的臃肿。Thymeleaf模板引擎也为我们提供了这种功能。        项目开发中，我们通常会在页面添加一个底...
关于thymeleaf 中页面变量报错的问题个人解决方法
GinChou的萌新博客
12-09 1375
不是专门做前段的萌新，遇到一个页面报错问题 目录 1、复原情况 2、解决方式 1、按照网上的解决方式：取消前台验证：（不适用） 2、重新梳理代码问题 前后对比： 结论 1、复原情况 报错无法识别参数 在其他类中没有异常，控制类也是正常的。 运行报错： 、 后台报错： 2、解决方式 1、按照网上的解决方式：取消前台验证：（不适用） 治标不治本，只是在编译的时候进行了隐藏，没有解决实际问题 2、重新梳理代码问题 我在重新查看实体类、结合在后台报错空指针..
thymeleaf多重 数组传递_线性回归中的多重共线性与岭回归
weixin_30938397的博客
01-24 154
写在前面线性回归详解​mp.weixin.qq.com上篇文章详细介绍了线性回归分析方程、损失方程及求解、模型评估指标等内容，其中在推导多元线性回归使用最小二乘法的求解原理时，对损失函数求导得到参数向量 的方程式上式中有解，即能够得到最后一步的前提条件是存在逆矩阵，而逆矩阵存在的充分必要条件是特征矩阵不存在多重共线性。本文将详细介绍线性回归中多重共线性问题及解决。 主要详细介绍两种线性回归的缩减(...
Thymeleaf
可来堂
03-03 386
1, include     Including template fragments     th:fragment       th:include         用法：         在某个标签中使用th:fragment属性定义一个变量名，然后在其他模板中通过th:include，即可引入。     a.html             定义一个fragment，并取名为
thymeleaf中include和replace的使用与区别及传参
hlvy
08-28 6531
th:include 和 th:replace都是加载代码块内容，但是还是有所不同   th:include：加载模板的内容： 读取加载节点的内容（不含节点名称），替换div内容 th:replace：替换当前标签为模板中的标签，加载的节点会整个替换掉加载他的div  公共部分如下： &lt;!-- th:fragment 定义用于加载的块 --&gt; &lt;span th:frag...
thymeleaf 引入html公共模板代码
04-24
好的，我可以为您讲解如何在thymeleaf中引入HTML公共模板代码。一般来说，我们可以将公共的HTML代码放置在一个单独的HTML文件中，然后使用thymeleaf的“include”指令将其引入到其他HTML文件中。具体的步骤如下： 1. 创建一个包含公共HTML代码的HTML文件，例如“common.html”。 2. 在其他HTML文件中，使用如下thymeleaf指令将“common.html”文件引入： `<!--/*@thymesVar id="common" type="text/html"*/-->` `<!--/*@thymesImport "../common.html"*/-->` 3. 在需要使用公共HTML代码的位置，使用如下thymeleaf指令引用： `<div th:insert="${common} :: content"></div>` 通过以上步骤，您就可以在thymeleaf中引入HTML公共模板代码了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值