head通用模板封装

head通用模板封装

一、场景描述

在head中经常会有一些公共的js和css,不想在每个html中重复的引入。

二、确定thymeleaf的版本

<properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <!-- set thymeleaf version -->
    <thymeleaf.version>3.0.0.RELEASE</thymeleaf.version>
    <thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>
</properties>

三、公共模板

文件路径:resources\templates\common.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="commonHead(title,links,styles,scripts)">
    <meta charset="UTF-8" />
    <title th:replace="${title}"></title>
    <script th:inline="javascript">var ctx = "[[@{/}]]";</script>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.5/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/3.3.5/css/bootstrap.min.css}" />
    <script src="/webjars/jquery/3.1.1/jquery.min.js" th:src="@{/webjars/jquery/3.1.1/jquery.min.js}"></script>
    <script src="/webjars/bootstrap/3.3.5/js/bootstrap.min.js" th:src="@{/webjars/bootstrap/3.3.5/js/bootstrap.min.js}"></script>

    <th:block th:replace="${links}" />
    <th:block th:replace="${styles}" />
    <th:block th:replace="${scripts}" />
</head>
</html>

四、引入

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en" th:replace="common::commonHead(~{::title},~{::link},~{},~{})">
    <title>首页</title>
    <!-- self -->
    <link rel="stylesheet" href="/css/common.css" th:href="@{/css/common.css}" />
    <link rel="stylesheet" href="/css/index.css" th:href="@{/css/index.css}" />
</head>
<body>

</body>
</html>

五、注意点

1. 在引入的时候使用 ~{::link} ,而不是 ~{::links} ;

2. 没有自定义style和script,需要使用 ,~{},~{} ,若果有,则是 ,~{::style},~{::script} ;
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值