thymeleaf 定义公共header 和公共js

最新推荐文章于 2024-06-10 19:40:36 发布

擦肩而过

最新推荐文章于 2024-06-10 19:40:36 发布

阅读量2.2k

点赞数

分类专栏： SpringBoot

原文链接：https://blog.csdn.net/qq_33842795/article/details/80322829,https://blog.csdn.net/qq_35123187/article/details/79986039

版权

SpringBoot 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在common文件夹下创建common_header.html文件

内容如下

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title,links,styles)">
    <meta charset="utf-8">
    <title th:replace="${title}">The awesome application</title>

    <!--全局通用框架样式 begin-->
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" th:href="@{/content/ui/global/bootstrap/css/bootstrap.min.css}">
    <!-- Font Awesome -->
    <link th:href="@{/content/ui/global/font-awesome/css/font-awesome.css}" rel="stylesheet" />
    <!-- Theme style -->
    <link rel="stylesheet" th:href="@{/content/adminlte/dist/css/AdminLTE.css}">
    <link rel="stylesheet" th:href="@{/content/adminlte/dist/css/skins/_all-skins.css}">
    <link th:href="@{/content/min/css/supershopui.common.min.css}" rel="stylesheet" />

    <link th:href="@{/content/plugins/iCheck/all.css}" rel="stylesheet" />

    <link th:href="@{/content/plugins/zTree/css/metroStyle/metroStyle.css}" rel="stylesheet" />

    <link th:href="@{/content/plugins/webuploader/webuploader.css}" rel="stylesheet" />

    <link th:href="@{/content/plugins/bootstrap-table/bootstrap-table.css}" rel="stylesheet" />
    <link th:href="@{/content/plugins/my97DatePicker/skin/WdatePicker.css}" rel="stylesheet" />
    <link th:href="@{/content/ui/global/bootstrap-switch/css/bootstrap-switch.css}" rel="stylesheet" />
    <link th:href="@{/content/plugins/select2/css/select2.min.css}" rel="stylesheet" />
    <link th:href="@{/content/plugins/select2/css/select2-bootstrap.min.css}" rel="stylesheet" />
    <!--<link th:href="@{/content/ui/css/common.css}" rel="stylesheet" />-->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!--全局通用框架样式 end-->

    <!--/* Per-page placeholder for additional links */-->
    <th:block th:replace="${links}" />
    <!--/* Per-page placeholder for additional styles */-->
    <th:block th:replace="${styles}" />


</head>

使用如下：

1：可以自带标题也可以追加css引入,如果需要自定义 style 样式加上标签，在common_header 参数加上即可

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<!--<head th:replace="common/common_header :: common_header(~{::title},~{::link})">-->
<head th:replace="common/common_header :: common_header(~{::title},~{::link},~{})">
    <title>用户首页</title>
    <!--<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">-->
    <link rel="stylesheet" th:href="@{/content/plugins/ueditor/themes/default/css/ueditor.css}">

</head>

在common文件夹下创建common_foot.html文件

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<div th:fragment="foot">
    <script th:src="@{/content/ui/global/jQuery/jquery.min.js}"></script>
    <script th:src="@{/content/common/common.js}"></script>

    <!-- Bootstrap 3.3.6 -->
    <script th:src="@{/content/ui/global/bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{/content/min/js/supershopui.common.js}"></script>
    <script th:src="@{/content/plugins/iCheck/icheck.min.js}"></script>
    <script th:src="@{/content/ui/global/bootstrap-switch/js/bootstrap-switch.js}"></script>
    <script th:src="@{/content/plugins/my97DatePicker/WdatePicker.js}"></script>
    <script th:src="@{/content/common/layer/layer.js}"></script>
    <script th:src="@{/content/plugins/bootstrap-select/js/bootstrap-select.js}"></script>
    <script th:src="@{/content/plugins/select2/js/select2.full.min.js}"></script>
    <script th:src="@{/content/plugins/moment/moment.js}"></script>
</div>

使用如下：

<div th:replace="common/common_foot :: foot"></div>

另一篇博客：

路径：href,src

格式： @{ }

eg:

一般项目默认static就是根路径，所以static下的路径中不能写static，应当以 / 代替

thymeleaf 创建引入公共模块：

1,th:inssert:保留当前主标签，保留th:fragment主标签；

2,th:replace:舍弃当前主标签，保留th:fragment主标签；

3,th:include:保留当前主标签，舍弃th:fragment主标签。

格式：

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

模块：<div th:fragment="模块名"></div>

注1：引入的路径以默认的根路径static为相对路径.

eg: <head th:replace="../templates/system/index/headLink :: links"></head>

注2：引入头部公共外部资源问题

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

<head th:replace="路径 :: 模块名"></head>或者

都会使引入或者模块中的主标签保留下来

在此处都是不适用的，解决方法如下：

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

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

<th:block></th:block>是Thymeleaf提供的唯一的一个Thymeleaf块级元素，其特殊性在于Thymeleaf模板引擎在处理<th:block>的时候会删掉它本身，而保留其内容。（多用于渲染平级标签）

th:replace 和<th:block>的结合，完美舍弃引入和模块处的主标签。

擦肩而过

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
thymeleaf 定义公共header 和公共js

在common文件夹下创建common_header.html文件内容如下<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"><head th:fragment="common_header(title,links,styles)"> <meta charset="utf-8">
复制链接

扫一扫