Thymeleaf实现一张页面中引入另一张HTML文件

最新推荐文章于 2024-05-16 17:28:54 发布
原创 最新推荐文章于 2024-05-16 17:28:54 发布 · 4.9k 阅读 · 6
标签
#Thymeleaf #前端 #前端模板引擎
本文介绍了如何使用Thymeleaf在前端模板中实现页面引用，通过创建公共HTML文件（如header和footer），然后在父页面相应位置插入代码，达到页面复用和结构优化的效果，从而提高开发效率。

最近在修改网站页面的时候，发现页面代码有很多重复的地方，有很多地方需要优化。由于项目采用的是springboot框架+Thymeleaf前端模板引擎，这次主要优化的地方是页面头文件，导航栏和页脚。

做一些公共文件，实现和freemark的include标签一样的功能。

1.新建所需的公共HTML文件（子页面），如header or footer:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:http
最低0.47元/天 解锁文章
thymeleaf模板 在html中引入另一个html
罗先生的博客
06-19 1万+
thymeleaf模板 在html中引入另一个html 1.这是一个 head.html 页面 <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Insert title here</titl...
Thymeleaf html导入
金溪的博客
08-02 2585
首先定义一个templates/footer.html文件： &lt;!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf....
springboot thymeleaf 引入html公共模板
qq_43718758的博客
03-05 4372
1.在templates文件下创建一个common文件夹，用于存放公共的头部 创建一个html，在里面写公共的内容 <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> <footer th:fragment="
springboot 通过thymeleaf引入静态html页面并引入js、css文件
weixin_41463944的博客
05-16 1385
springboot 通过thymeleaf引入静态html页面并引入js、css文件
细品 Spring Boot+Thymeleaf，还有这么多好玩的细节！
江南一点雨的专栏
12-18 3067
文章目录1. Thymeleaf 简介2. 整合 Spring Boot2.1 基本用法2.2 手动渲染3. Thymeleaf 细节3.1 标准表达式语法3.1.1 简单表达式3.1.2 字面量3.1.3 文本运算3.1.4 算术运算3.1.5 布尔运算3.1.6 比较和相等3.1.7 条件运算符3.1.8 内置对象3.2 设置属性值3.3 遍历3.4 分支语句3.5 本地变量3.6 内联4. 小结 虽然现在流行前后端分离，但是后端模版在一些关键地方还是非常有用的，例如邮件模版、代码模版等。当然也不排除一
thymeleaf模板布局之引入其他html片段（类似jsp:include功能）
Lynn_coder的博客
04-10 1万+
在实际开发当中，有一些重复的内容必须提取出来，这样不仅页面布局合理，修改也会方便，改一处所有页面便都能得到改动。比如导航栏，底部版权声明等在jsp中，一般使用jsp:include:xxx.jsp来实现这个功能，那在thymeleaf里怎么做呢先说把所有html文件都引入进来的方法：我把导航栏的html片段单独提了出来，如果想全部引用它，就在想引用的那个页面写一个div，然后加上th:replac...
在html页面中引入另一个html页面
老头学编程的博客
12-28 9879
我们在使用html编写一个网站的时候，通常情况下头部和尾部是相同的，如果一个网站的每个页面都把这些代码写一遍，不仅浪费时间，还显得重复代码很多，所以此时把重复的页面单独摘出来，在用到的时候从外部直接引进去，就能节省很多时间，减少很多代码。 在这里，有好几种引入html文件的方式，不过每种都是有利有弊，需要根据需要自行选择 如果有些浏览器本地实现不了，那么放到服务器上面！（重要！！！） 注意：引入后主页面的Css样式不适用于被引入页面，比如在主页面设置 <style type="text/css"&gt
thymeleaf页面中引入公共页面
麦叔
06-02 9175
一.前言 当我们在html页面使用thymeleaf时,经常会遇到这样的情况。有一些html片段在我们所有页面都存在,造成了代码重复。遇到这种场景,我们就可以把公共代码段抽取到一个公共页面,在需要使用它的地方,我们引入就行。 二.公共页面抽取 1.公共页面位置 如上图所示,我们首先在项目中新建一个html文件,名称为:include.html,位置如图中所示。 2.公共页面内容 <!DO...
SpringBoot+Thymeleaf抽取HTML公共页面及引入公用页面
qq_27198345的博客
12-20 2820
在开发Web网站的时候，HTML页面有很多是相同的，如果每一个页面都写一遍，不仅非常麻烦，而且非常不利于后期的更改。典型的如导航栏、页脚等，每个HTML页面几乎都一样。 在Thymeleaf中我们通过如下的机制来抽取处公共的页面，并在需要的时候引入这个页面就可以了。 ...
thymeleaf引用html_SpringBoot+Thymeleaf实现html文件引入（类似include功能）_html/css_WEB-ITnose...
weixin_39606575的博客
12-21 876
由于对高大上的前端处理不太熟悉，想直接通过MVC的方式进行内容传递，因此选用了Thymeleaf模版处理向前端传值的问题。但是觉得很多PHP框架所实现的include模版的方式很不错，能够很好的实现头文件、导航、页尾等和主要内容的解耦，因此想通过使用Thymeleaf模版的同时，也能实现类似于include的功能。思路和背景觉得如果有精力，最好还是RESTFul的结构，然后前端采用angularj...
Thymeleaf页面引入
weixin_45389262的博客
03-16 1581
父页面引入另一个子页面，可以使用th:include或th:replace表达式。 th:include ： 引入另一个页面内容，加载到当前标记中 th:replace ： 引入另一个页面内容，替换掉当前标记 子页面可以使用th:fragment定义要引入的内容，也可以不定义引入全部 <!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xh...
bootstrap模板_Springboot2.0学习5 使用模板引擎thymeleaf
weixin_39985842的博客
11-25 276
一、Themeleaf模板引擎SpringBoot建议使用Themeleaf模板引擎。Thymeleaf是一个现代服务器端Java模板引擎，适用于Web和独立环境，能够处理HTML，XML，JavaScript，CSS甚至纯文本，其主要目标是提供一种优雅且高度可维护的模板创建方式。官网地址：https://www.thymeleaf.org/1. Thymeleaf允许您处理六种模板，每种模板称为...
Thymeleaf 教程
杭州.黄老师
12-01 3075
Thymeleaf 是一个服务器端 Java 模板引擎，能够处理 HTML、XML、CSS、JAVASCRIPT 等模板文件。Thymeleaf 模板可以直接当作静态原型来使用，它主要目标是为开发者的开发工作流程带来优雅的自然模板，也是 Java 服务器端 HTML5 开发的理想选择。 1. 创建模板文件 创建一个 HTML 模板文件： 1 2 3 4 5 6 7 8 9 10
thymeleaf中include和replace的使用与区别及传参
hlvy
08-28 6786
th:include 和 th:replace都是加载代码块内容，但是还是有所不同   th:include：加载模板的内容： 读取加载节点的内容（不含节点名称），替换div内容 th:replace：替换当前标签为模板中的标签，加载的节点会整个替换掉加载他的div  公共部分如下： &lt;!-- th:fragment 定义用于加载的块 --&gt; &lt;span th:frag...
Thymeleaf模版--子页面单独引入CSS、JS文件
Eric的专栏
05-26 1万+
最近在项目中应用到了 Thymeleaf，想写一个通用的页面来方便开发。网上有两种方法一种是通过layout:fragment实现，另一种是通过th:replace或者th:include实现。但是都不能对子页单独引入 CSS、JS 文件，所以记录下自己的实现方法。 我是通过th:replace的带参数方法实现的： 这是我的目录结构 我们拿&lt;head&gt;&lt;/head&gt...
thymeleaf导入其他页面模块
Lemon_MY的博客
04-15 1797
thymeleaf可以使用th:include标签进行其他页面模块的导入，这个效果和jsp:include效果相似，都可以导入其他内容不必重复书写。 被导入模块index.html： <div th:fragment="head"> </div> 在其它页面导入index.html中的head模块： <div th:include="index::head">...
springboot使用Thymeleaf引入html文件
qq_42535651的博客
07-18 2183
参考： https://www.cnblogs.com/han-1034683568/p/7520012.html 在pom文件中加入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-s...
【SpringBoot】 十二、themeleaf 的3种引入页面方式
piano_diano的博客
08-27 634
一、引入前先配置 thymeleaf: cache: false #开发时关闭缓存,不然没法看到实时页面 prefix: classpath:/templates/ suffix: .html encoding: UTF-8 mode: HTML5 二、创建被引入页面及公共片段 三、引入页面及公共片段 三种引入方式： th:insert：将公共片段整个插入到声明引入的元素中 th:replace：将声明引入的元素替换为公...
SpringBoot - thymeleaf 动态填充 html 页面数据
modelmd的博客
04-02 1757
注意：如果 index.html 页面没有打包进入 target目录，会报页面找不到的错误，如果没有打包到 target的话，在 pom 文件行添加如下片段。使用 model 模型增加动态属性值，thymeleaf 默认寻找 .html 的后缀静态页面。
（项目实战干货）Spring boot 中Thymeleaf 模板 html 标签使用
热门推荐
zhtbs的博客
07-07 2万+
Spring boot 中Thymeleaf 模板 html 标签使用 ​ 在Spring boot 项目开发中，会常常使用到Thymeleaf模板。在对Thymeleaf模板标签的使用技巧，有的人不是很熟悉。这篇文章专门介绍一下模板标签的使用技巧。静态原型中（html页面）Thymeleaf元素与html元素相结合使用的说明与代码例子。文中会提高大量Thymeleaf标签的属性介绍和使用的逻辑示例代码。 1 文字内联标签引入 ​ Thymeleaf模板中的使用文字内联标签，需要在使用的html元素上加上
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值