Memory River

记忆河,记今日之事忆往昔之流

springboot项目中 使用thymeleaf引用公共HTML头部静态资源

Rickey  \  2019-03-05 09:12:18

问题

现在我的博客网站是spa架构的,一开始没有规划好导致现在做SEO头疼得很,咬咬牙决定再一次改版博客网站,抛弃现有的spa架构,改为传统的服务器渲染模式,内容发布网站为了SEO总是必要的。经过对架构和框架细细思量,决定使用springboot+thymeleaf的方式构建前端,在java代码里请求原有的微服务进行数据的获取,返回页面显示。

说干就干,马上开始研究thymeleaf模板引擎,在html代码中,需要将一些公共的静态资源文件统一引用,类似jsp的include一样。


原始页面文件:

这一堆静态资源都是公共的,需要单独处理引用,这样就不用每个页面都写一遍。特别是title、mate这些信息,自然是每篇文章都会不一样的。

我的项目结构如下:

解决方法

1、资源定位

thymeleaf提供了一个很好的资源定位的方法,比如我的静态资源都是放在static下面的,那我引用的方式就直接:th:href="@{/assets/vendor/fonts/fontawesome.css}"

<!-- Icon fonts -->
	<link rel="stylesheet" type="text/css" th:href="@{/assets/vendor/fonts/fontawesome.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/assets/vendor/fonts/ionicons.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/assets/vendor/fonts/linearicons.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/assets/vendor/fonts/open-iconic.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/assets/vendor/fonts/pe-icon-7-stroke.css}">


2、创建公共的html

创建公共的HTML,由公共HTML文件统一管理公共静态资源的引入。

我项目创建了一个公共的HTML:

然后把所有需要全局引入的静态资源文件放到这个HTML里引入:

上面代码中的重点:<th:block th:fragment="common_resource">th:fragment标签的值相当与将此段代码给命名,所以要注意同一个路径同一个文件内,不要出现一样命名的代码片段。另外:这里必须要用 th:block,至于为什么,文章末尾再解释。

3、引用公共HTML

引用的方法很简单,一行代码就可以了。

<head>
	<div th:replace="common/resource/common_resource :: common_resource"></div>
</head>
  • common/resource/common_resource :表示common/resource路径下的common_resource.html文件
  • 冒号右边的common_resource:表示common_resource.html文件内的使用th:fragment标签定义的对应名称的代码片段


至此,使用thymeleaf引用公共HTML头部静态资源就配置完成了。访问刷新页面就可以看到效果了。


尾注:

由于<head></head>标签中不能存放<div></div>之类的标签,而不同页面的title基本上都不同,再加上网站后期的SEO优化需要的<meta/>标签,这些都要单独出来。

如果使用<head th:replace="路径 :: 模块名"></head>或者<div th:include="路径 :: 模块名"></div>,都会使引入或者模块中的主标签保留下来,在此处都是不适用的,解决方法如下:

引入:<div th:replace="路径 :: 模块名"></div>

模块:<th:block th:fragment="模块名"></th:block>

<th:block></th:block>是Thymeleaf提供的唯一的一个Thymeleaf块级元素,其特殊性在于Thymeleaf模板引擎在处理<th:block>的时候会删掉它本身,而保留其内容(多用于渲染平级标签)。th:replace <th:block>的结合,完美舍弃引入和模块处的主标签。


地址: http://wchuf.com/article/adt/5e7a90a9f0724d278dc6538c97fdbe31.html
声明: 本文为原创文章,版权归本站所有,欢迎分享本文,转载请保留出处!
  646         0         0
Rickey
人,可以无傲气,但不可以无傲骨。

YOU MIGHT ALSO LIKE

0 COMMENTS
想对博主说些什么?