如何针对Thymeleaf模板抽取公共页面

对于公共页面(导航栏nav、页头head、页尾footer)的抽取有三种方式:
???????1)基于iframe进行抽取,这种方式很有效,但比较老了,另外为了页面的自适应性,还得做不少工作;
???????2)如果是jsp页面,则可以通过<%@ include file="head.jsp"%>进行抽取
???????3)利用ajax进行页面加载,但有不少问题
???????基于Springboot后台开发框架,JSP虽然还是可以用,但已经强烈推荐使用Thymeleaf模板了,这个时候问题就来了,Thymeleaf模板是html页面,又不想通过iframe或者ajax的方式,那我们该如何做?
???????其实,Thymeleaf已经给我们提供了极好的方式,并且不仅仅是页面,还可以对样式CSS、Javascript进行抽取。
???????使用Thymeleaf模板的 th:replace、th:includeth:insert属性,借助th:fragment属性来实现。
th:replace----不保留自己的主标签,保留th:fragment的主标签
th:include----保留自己的主标签,不保留th:fragment的主标签
th:insert----保留自己的主标签,也保留th:fragment的主标签
1、公共抽取部分的页面定义,如mycommon.html

说明:
1)<head th:fragment="commonHeader(title)">
<title th:text="${title}"></title>其中的${title},这样页面的标题就灵活了。
2)一般在页面头部引入CSS,而在页尾引入JS,这样保证页面出现在用户面前样式就已经加载,提高用户体验
2、在具体页面中引入公共部分,如mydemo.html

说明:
th:replace,include,th:insert三者的使用形式皆如:th:include="模板路径::id"

原文地址:https://blog.51cto.com/3058076/2457659

时间: 2024-08-30 17:22:16

如何针对Thymeleaf模板抽取公共页面的相关文章

SpringBoot入门篇--使用Thymeleaf模板引擎进行页面的渲染

在做WEB开发的时候,我们不可避免的就是在前端页面之间进行跳转,中间进行数据的查询等等操作.我们在使用SpringBoot之前包括我在内其实大部分都是用的是JSP页面,可以说使用的已经很熟悉.但是我们在使用springBoot开发框架以后我们会发现一个致命的问题,就是SpringBoot对Jsp的支持可以说是惨不忍睹,官方推荐我们进行使用的是Thymeleaf模板引擎进行.其实我这里也没搞清楚模板引擎原理是什么,以后有机会再深入了解,我们只需要学会怎么用就行,目前而言.当然模板引擎有很多,比如f

thymeleaf公共页面元素抽取

thymeleaf公共页面元素抽取 1.抽取公共片段 <div th:fragment="copy"> © 2011 The Good Thymes Virtual Grocery </div> 2.引入公共片段 <div th:insert="~{footer :: copy}"></div> ~{templatename::selector}:模板名::选择器 ~{templatename::fragmentnam

Thymeleaf静态资源引入方式及公共页面代码抽取

静态资源引入 Thymeleaf模板引擎url问题,要用如下的方式写,确保在任何情况下都能访问到 <!-- Bootstrap core CSS --> <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- 引用webjars的方式引入静态资源 --> <link th:href="@{/webjars/bootstrap/

11、SpringBoot-CRUD-thymeleaf公共页面元素抽取

thymeleaf公共页面元素抽取 存在一种现象:两个文件的代码只有一部分代码不一样 其余的均相同,此时就可以提取公共的代码去简化开发 1.抽取公共片段 <div th:fragment="copy"> © 2011 The Good Thymes Virtual Grocery </div> 2.引入公共片段 <div th:insert="~{footer :: copy}"></div> ~{templatena

thymeleaf引用公共页面

本例采用的是Springboot+thymeleaf,因为公共页面属于动态页,因此需要放在templates目录下(具体几层自定义即可),我们这里做一个引用头部.主体和底部公共信息的示例 1. 公共信息页面 head.html,使?th:fragment 属性来定义被包含的模版?段,以供其他模版引用或者包含,这里我们定义了头部(admin_head(title)).主体(admin_common).底部(admin_bottom)三个模板片段 <!DOCTYPE html> <html&

thymeleaf引入公共页面的某个片段

引入公共片段引入公共片段的th属性,包括三种方式 th:insert将公共片段,整个插入到声明引入的元素中 th:replace将声明引入的元素,替换为公共片段 th:include将被引入的片段的内容,包含进这个标签中 抽取公共片段 <footer th:fragment="copy">  2011 </footer> 引入方式 1 <div th:insert="footer :: copy"></div> 2 &

SpringBoot2(thymeleaf模板jsp页面和jpa)

一.thymeleaf模板 1.在pom.xml中导入依赖 <!-- 添加thymeleaf模版的依赖 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId&

thymeleaf 无法正常解析页面(本地可以正常访问某个请求,并可以返回页面,但服务端访问出现找不到模板)

thymeleaf 无法正常解析页面(本地可以正常访问某个请求,并可以返回页面,但服务端访问出现找不到模板) 出错提示: Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is org.thymeleaf.exceptions.TemplateInputException: Er

Thymeleaf 模板

Thymeleaf 模板布局 th:fragment.th:replace.th:insert.th:remove th:fragment  模板布局 模板片段说明 模板中,经常希望从其他模板中包含?些部分,如?眉,?脚,公共菜单等部分,为了做到这?点,Thymeleaf 可以使?th:fragment 属性来定义被包含的模版?段,以供其他模版包含. 如下所示定义模板片段: <div th:fragment="copy"> © 2011 The Good Thymes Vi