如何针对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:include或th:insert属性，借助th:fragment属性来实现。
th:replace----不保留自己的主标签，保留th:fragment的主标签
th:include----保留自己的主标签，不保留th:fragment的主标签
th:insert----保留自己的主标签，也保留th:fragment的主标签
1、公共抽取部分的页面定义，如mycommon.html
如何针对Thymeleaf模板抽取公共页面
说明：
1）<head th:fragment="commonHeader(title)">
<title th:text="${title}"></title>其中的${title}，这样页面的标题就灵活了。
2）一般在页面头部引入CSS，而在页尾引入JS，这样保证页面出现在用户面前样式就已经加载，提高用户体验
2、在具体页面中引入公共部分，如mydemo.html
如何针对Thymeleaf模板抽取公共页面
说明：
th:replace，include，th:insert三者的使用形式皆如：th:include="模板路径::id"
    更详细的细节，大家可以可以看我的视频介绍：https://edu.51cto.com/sd/091c7 ，希望对大家有所帮助

成都创新互联公司专注于保山企业网站建设,成都响应式网站建设公司,商城网站开发。保山网站建设公司,为保山等地区提供建站服务。全流程按需搭建网站，专业设计，全程项目跟踪，成都创新互联公司专业和态度为您提供的服务

网站栏目：如何针对Thymeleaf模板抽取公共页面
本文链接：https://www.cdcxhl.com/article24/ghodje.html

成都网站建设公司_创新互联，为您提供品牌网站制作、网站制作、手机网站建设、面包屑导航、建站公司、静态网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容