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">
    <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>
注意 引入模板 不可以用/开头  要不发布之后会找不到文件
阅读更多
文章标签: thymeleaf
上一篇spring boot logback 日志配置
下一篇spring boot 和FastJson 整合
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭