Thymeleaf 踩坑+th:include带入js脚本和css样式

最新推荐文章于 2023-11-07 15:24:06 发布
最新推荐文章于 2023-11-07 15:24:06 发布
阅读量3k 收藏 2
点赞数 1
分类专栏： Thymeleaf 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49610478/article/details/109525183
版权

今天写了一个tab页，多个网页都有在使用，就想到了使用th:include进行复用

因为涉及到css样式，需要写在css文件中，所以就用link引入css样式，放在了include页面的head标签里面，结果发现翻车了，样式并没有被引入到页面中

后来隐隐的猜到，include可能就是引入th:include 目标html文件的特定id的div而已，跟这个html文件无关，无论html文件里面写了什么css引入了什么script脚本

所以想要把css样式或js脚本连同fragments中的残页一同引入页面中，就需要把对应的css文件和js脚本写到特定id的div中，如下图

这样在include的时候就会把css样式文件一同引入到需要的页面中去了，js脚本同理，破案解决~

老秃爵
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
QiYuAdmin-Thymeleaf的include封装共用js和css（项目优化）
zqy_zq_zxl的博客
05-26 1万+
简介有段时间没有更新博客了，最近公司的销售爆表，同时来了几个项目，项目之间交付的日期相差的也比较短，一直沉迷于项目中。从今天开始QiYuAdmin项目我每天都会花点时间去维护它，去优化它，之后的版本将会陆陆续续增加一些功能，其中最重要的就是流程引擎，接下来的一段时间里，主要是优化项目，将里面的很多没有用到的东西给删除掉，一点一点的完善它。源码已经上传到了开源中国了，群的公告里面有源码的地址。QQ群号
th:insert、th:replace、th:include抽取和引用页面公共片段、传参等
dasd
08-20 1473
转载自：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
thymeleaf 引入js css
热门推荐
pdw2009的专栏
03-27 5万+
我一般 都是                            下面在你要的页面 引入这个片段就行 他就相当于jsp 中我们常用的
thymeleaf引入js和css方式
weixin_33695450的博客
09-24 571
2019独角兽企业重金招聘Python工程师标准>>> ...
【JavaScript 教程系列第 2 篇】如何在 HTML 中引入 JavaScript
“Allen Su”的博客
11-03 1634
一：如何在 HTML 中引入 JavaScript 。 二：引入外部 JavaScript 和内部 JavaScript 。
thymeleaf引入header，aside，footer公共页面
xiaoxiao1777的博客
12-27 2979
1.这些公共片段都单独提取出来header.html，aside.html，footer.html 2.先看jsp中的写法，对比一下 <jsp:include page="header.jsp"></jsp:include> 能否这样写：<th:include page="header.html"></th:include>? 不可以！ ...
thymeleaf实现th:each双重多重嵌套功能
10-15
-- 引用的css，js --> <!-- 遍历一级分类 --> <li th:each="cate1 : ${cateList}"> <a th:text="${cate1.cate1Name}"> <!-- 遍历一级分类下的二级分类 --> <li th:each="cate2 : ${cate1.cate2List}"> ...
Thymeleaf中th:each及th:if使用方法解析
09-07
本文将深入探讨Thymeleaf中的两个关键指令：`th:each` 和 `th:if`。 ### 一、th:each `th:each` 指令主要用于遍历数据集合，这些集合通常由控制器（Controller）传递到视图（View）。例如，以下是一个简单的控制器...
springboot+thymeleaf+maven+html+css实现精美大方好看官网模板完整源码.zip
07-09
springboot+thymeleaf+maven+html+css实现精美大方好看官网模板完整源码 不需要搭建数据库即可启动，如果需要后台管理+数据库可以自己迭代拓展增加； 项目可以轻易修改，非常简单，非常适合新手
springboot项目实训源代码+thymeleaf+mysql+mybatis
02-23
4、thymeleaf模板的配置，常用标签的使用，if,for,include,replace标签 6、用户管理：新增，修改，删除，查询功能 9、页面功能由html+thymeleaf实现 10、数据库脚本及数据在项目源代码主文件夹user.sql 课程资料...
基于springboot+thymeleaf+mybatis+tale.js+redis简洁的个人博客系统源码，适合快速全栈学习
06-15
基于springboot+thymeleaf+mybatis+tale.js+redis简洁的个人博客系统源码，适合快速全栈学习，项目经过严格测试，确保可以运行！ 1.涉及技术及工具 核心框架：SpringBoot ORM 框架：MyBatis MyBatis 工具：MyBatis...
30.在springboot中使用thymeleaf的模板（include,insert）
weixin_59334478的博客
09-09 962
网站：www.baidu.com网站：www.baidu.com第一种方式使用模板，th:insert。百度公司百度公司
thymeleaf标签——页面引入表头
一将终成
12-08 4291
本文旨为笔记，仅供参考 在前端页面用thymeleaf标签做一个非常简易的页面包含表头的例子： 效果如图： 非常简单： 只需要一个标签就ok· &lt;div th:include="header ::myheader"&gt; &lt;/div&gt; 再看看表头部分： &lt;body&gt; &lt;div th:fragment="myheader"&gt; &lt;div sty
Thymeleaf 导入公共页面内容两种方式（th:replace，th:include）
旭东怪的博客
08-30 4341
1 公共页面（subPage/head.html） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml" xml:lang="en"&
thymeleaf 语法 —— ~{ } 代码块、:: selector、代码块选择器、th:insert、th:replace、th:include 的区别
猎人在吃肉
11-05 1974
一、~{ } 代码块表达式 格式： ~{ templatename :: selector } 支持： ~{ templatename :: #html_id } ~{ ::selector} 表达代码段在本页 参数说明： :: 前面的部分是 模板文件名（包括路径，模板文件名的后缀省略，默认都是.html）， :: 后面部分是 selector（选择器） 1、一般使用方式 在fragments...
spring boot(四)：thymeleaf使用详解
weixin_33804990的博客
09-02 4087
在上篇文章springboot(二)：web综合开发中简单介绍了一下thymeleaf，这篇文章将更加全面详细的介绍thymeleaf的使用。thymeleaf 是新一代的模板引擎，在spring4.0中推荐使用thymeleaf来做前端模版引擎。 thymeleaf介绍 简单说， Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP 。相...
thymeleaf页面中引入公共页面
麦叔
06-02 8815
一.前言 当我们在html页面使用thymeleaf时,经常会遇到这样的情况。有一些html片段在我们所有页面都存在,造成了代码重复。遇到这种场景,我们就可以把公共代码段抽取到一个公共页面,在需要使用它的地方,我们引入就行。 二.公共页面抽取 1.公共页面位置 如上图所示,我们首先在项目中新建一个html文件,名称为:include.html,位置如图中所示。 2.公共页面内容 <!DO...
Thymeleaf基本语法和使用
最新发布
2301_76541246的博客
11-07 520
启动项目进行测试，在浏览器上访问http://localhost:8080/toLoginPage，在页面底部动态显示了当前日期2019-2020，而不是文件中的静态数字2018-2019。#session：（仅限Web Context）HttpSession对象 #servletContext：（仅限Web Context）ServletContext对象。thymeleaf页面缓存设置（默认为true），开发中方便调试应设置为false，上线稳定后应保持默认true。#locale：上下文区域设置。
Thymeleaf定义和引用模板及include和replace的区别
Luck_ZZ的博客
03-08 5258
一、定义模板 可通过th:fragment定义模板片段和id定义模板片段th:fragment的值为模板片段的名称One通过th:fragmen定义模板片段；Two通过id定义模板片段；Three和four为了引用时，显示include和replace的区别；Five模板片段传参。myfrag.html&lt;html xmlns="http://www.w3.org/1999/xhtml" xm...
thymeleaf模板引擎 th:sec
08-17
Thymeleaf是一种模板引擎，它在Spring框架中被广泛使用。Thymeleaf可以用来替代JSP，并且具有与Velocity和FreeMarker类似的功能。它有许多吸引人的特点，其中包括能够完全替代JSP、可以在开发阶段重新加载Thymeleaf模板等等。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [spring boot使用thymeleaf模板的方法详解](https://blog.csdn.net/qq_40741855/article/details/85142088)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值