Thymeleaf之HTML分模块

孤独&烙印

于 2022-11-04 15:32:57 发布

阅读量288

点赞数

分类专栏： thymeleaf 文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/qq_46372272/article/details/127689890

版权

thymeleaf 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

common_css导入css样式:

<html xmlns:th="http://www.thymeleaf.org">
<!--公共css-->
<th:block th:fragment="common_css">
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="/backstage/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/backstage/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/backstage/plugins/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="/backstage/plugins/iCheck/square/blue.css">
    <link rel="stylesheet" href="/backstage/plugins/morris/morris.css">
    <link rel="stylesheet" href="/backstage/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
</th:block>
<!--公共CSS-->

common_css导入js样式:

<html xmlns:th="http://www.thymeleaf.org">
<!--公共JS-->
<th:block th:fragment="common_js">
    <script src="/backstage/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/backstage/plugins/jQueryUI/jquery-ui.min.js"></script>
    <script>
        $.widget.bridge('uibutton', $.ui.button);
    </script>
    <script src="/backstage/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="/backstage/plugins/raphael/raphael-min.js"></script>
    <script src="/backstage/plugins/morris/morris.min.js"></script>
    <script src="/backstage/plugins/sparkline/jquery.sparkline.min.js"></script>
    <script src="/backstage/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
    <script src="/backstage/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
</th:block>
<!--公共JS-->

common_header侧边栏:

<html xmlns:th="http://www.thymeleaf.org">
<!-- 页面头部 -->
<header class="main-header" th:fragment="header">
    <!-- Logo -->
    <a href="/backstage/index" class="logo">
        <span class="logo-mini"><b>后台</b></span>
        <span class="logo-lg">数据<b>后台</b>管理</span>
    </a>
    <!--导航右边头像-->
    <nav class="navbar navbar-static-top">
    </nav>
    <!--导航右边头像-->
</header>
<!-- 页面头部 -->

common_aside侧边栏:

<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">

<!--导航侧栏-->
<aside class="main-sidebar" th:fragment="aside">
    <!--侧边栏-->
        <section class="sidebar">
            <!-- 侧边栏内容 -->
        </section>
    <!--侧边栏-->
    <script>
        $(function () {
            // 点击外层菜单时记录他的id
            $(".treeview").click(function () {
                sessionStorage.menu = $(this).attr("id");
            })
            // 点击内层菜单时记录他的id
            $(".treeview-menu li").click(function () {
                sessionStorage.menu2 = $(this).attr("id");
            })

            // 对已点击的外层菜单添加class属性为active
            $("#"+sessionStorage.menu).addClass("active");
            // 对已点击的内层菜单添加颜色样式
            $("#"+sessionStorage.menu2+" a").css("color","white");
        });
    </script>
</aside>
<!--导航侧栏-->

common_footer侧边栏:

<html xmlns:th="http://www.thymeleaf.org">

<!-- 底部导航 -->
<footer class="main-footer" th:fragment="footer">
    <div class="pull-right hidden-xs">
        <b>Version</b> 1.0.8
    </div>
    <strong>Copyright &copy; <a href="https://blog.csdn.net/qq_46372272">Orion猎户博客</a>.</strong>All rights reserved.
</footer>
<!-- 底部导航 -->

总结: 将公用的模块进行组合

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>新增产品类型</title>
    <th:block th:replace="/backstage/common/common_resources::common_css"/>
    <th:block th:replace="/backstage/common_resources::common_js"/>
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">
    <!-- 页面头部 -->
    <header th:replace="/backstage/common/common_header::header"></header>
    <!-- 导航侧栏 -->
    <aside th:replace="/backstage/common/common_aside::aside"></aside>
    <!-- 内容区域 -->
    <div class="content-wrapper">
    </div>
    <!-- 底部导航 -->
    <footer th:replace="/backstage/common/common_footer::footer"></footer>
</div>
</body>
</html>