From 2ac2c5579f86abcd7708ced97c5a5da6d68cce19 Mon Sep 17 00:00:00 2001
From: "1152958806@qq.com" <1152958806@qq.com>
Date: Thu, 12 Oct 2023 00:27:45 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96loading=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/fcircle.html                |  4 +-
 templates/modules/head.html           |  2 +-
 templates/modules/layouts/layout.html | 50 +++++++++++------
 templates/modules/loading-box.html    | 78 +++++++++------------------
 4 files changed, 62 insertions(+), 72 deletions(-)
diff --git a/templates/fcircle.html b/templates/fcircle.html
index fbd147e0..42b06741 100644
--- a/templates/fcircle.html
+++ b/templates/fcircle.html
@@ -55,8 +55,8 @@
                     <div class="title-h2-a-right"><span>以下内容自动生成，未经过审核</span></div>
                 </div>
                 <div id="hexo-circle-of-friends-root"></div>
-                <script>
-                    let UserConfig = {
+                <script type="text/javascript">
+                    var UserConfig = {
                         // 填写你的api地址
                         private_api_url: "[(${theme.config.fcircle.apiurl})]",
                         // 点击加载更多时，一次最多加载几篇文章，默认10
diff --git a/templates/modules/head.html b/templates/modules/head.html
index 8aa70e91..60ecba9c 100644
--- a/templates/modules/head.html
+++ b/templates/modules/head.html
@@ -157,7 +157,7 @@
     </script>
 
     <!-- 动态加载条 -->
-    <script data-pace-options='{ "restartOnRequestAfter":false,"eventLag":false}'
+    <script data-pace-options="{ &quot;restartOnRequestAfter&quot;:false,&quot;eventLag&quot;:false}"
             th:src="${assets_link + '/libs/pace/pace.min.js'}"
             th:if="${theme.config.other.loadingBoxs.loadProgressBar}">
     </script>
diff --git a/templates/modules/layouts/layout.html b/templates/modules/layouts/layout.html
index 70b7d0e1..4189a2ae 100644
--- a/templates/modules/layouts/layout.html
+++ b/templates/modules/layouts/layout.html
@@ -26,7 +26,7 @@
 <body>
 
 <!-- loading 页面 -->
-<div th:replace="~{modules/loading-box :: loading-box}"></div>
+<th:block th:replace="~{modules/loading-box :: loading-box}"></th:block>
 
 <!-- 网站背景 -->
 <div id="web_bg"></div>
@@ -68,6 +68,38 @@
     <!-- todo head 中有它的 css，应该可以写一块，并改成后台可配置的功能，代码中应该还有他的 js -->
     <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/node-snackbar/0.1.16/snackbar.min.js"></script>
 
+    <script th:if="${theme.config.other.loadingBoxs.loadingBoxEnable} and not ${#strings.isEmpty(theme.config.other.loadingBoxs.loadingBoxImg)}">
+        var preloader = {
+            endLoading: () => {
+                //- document.body.style.overflow = 'auto';
+                document.getElementById('loading-box').classList.add("loaded")
+            },
+            initLoading: () => {
+                //- document.body.style.overflow = '';
+                document.getElementById('loading-box').classList.remove("loaded")
+            }
+        }
+        window.addEventListener('load', preloader.endLoading())
+        setTimeout(function () {
+            preloader.endLoading();
+        }, 3000)
+
+    </script>
+    <div class="js-pjax">
+        <!-- 动态标题 -->
+        <script th:replace="~{modules/common/diytitle :: diytitle}"></script>
+    </div>
+
+    <!-- 评论 -->
+    <th:block th:if="${theme.config.comments.use!='commentWidget' && theme.config.comments.commentsEnable }"
+              th:with="use = ${theme.config.comments.use}">
+        <th:block th:replace="~{'modules/comment/' + ${use}}"></th:block>
+        <script th:if="${theme.config.comments.visitorMail.visitorMailEnable}">var visitorMail = "[(${theme.config.comments.visitorMail.mail})]";</script>
+    </th:block>
+
+    <!--音乐-->
+    <script>var meting_api = "[(${theme.config.tool.nav_music.meting_api})]"; </script>
+
     <!-- 深色模式下添加粒子效果canvas -->
     <canvas th:if="${theme.config.style.universe}" id="universe" width="1312" height="880"></canvas>
     <script th:if="${theme.config.style.universe}" async="" th:src="${assets_link + '/libs/canvas/dark.js'}"></script>
@@ -76,12 +108,6 @@
     <!-- 应该是文章页分享使用 -->
     <script data-pjax src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/qrcodejs/1.0.0/qrcode.min.js"></script>
 
-    <!-- 评论 -->
-    <th:block th:if="${theme.config.comments.use!='commentWidget' && theme.config.comments.commentsEnable }"
-              th:with="use = ${theme.config.comments.use}">
-        <th:block th:replace="~{'modules/comment/' + ${use}}"></th:block>
-        <script th:if="${theme.config.comments.visitorMail.visitorMailEnable}">var visitorMail = "[(${theme.config.comments.visitorMail.mail})]";</script>
-    </th:block>
     <!--  https://raphamorim.io/waterfall.js/  应该是这个 还有相关的 js 代码 是否可以调整-->
     <script th:src="${assets_link + '/libs/waterfall/waterfall.min.js'}"></script>
 
@@ -91,9 +117,6 @@
 
     <script th:src="${assets_link + '/libs/view-image/view-image.min.js'}"></script>
 
-    <!--音乐-->
-    <script>var meting_api = "[(${theme.config.tool.nav_music.meting_api})]"; </script>
-
     <link rel="stylesheet" href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.css" media="all" onload="this.media='all'">
 
     <script th:src="${assets_link + '/libs/aplayer/APlayer.min.js'}"></script>
@@ -125,15 +148,8 @@
     <!--官方评论插件js-->
     <script th:if="${pluginFinder.available('PluginCommentWidget')}" src="/plugins/PluginCommentWidget/assets/static/comment-widget.iife.js"></script>
 
-    <div class="js-pjax">
-        <!-- 动态标题 -->
-        <script th:replace="~{modules/common/diytitle :: diytitle}"></script>
-    </div>
-
     <script th:if="${theme.config.envelope_comment.enable_danmu}" th:src="${assets_link + '/libs/twikoo/easy-Danmaku.min.js'}" id="Danmaku"></script>
 
-
-
     <script>
         let pjaxSelectors = ['title', '#config-diff', '#body-wrap', '#rightside-config-hide', '#rightside-config-show', '.js-pjax','#site-config']
 
diff --git a/templates/modules/loading-box.html b/templates/modules/loading-box.html
index 0e786c88..4c4c8495 100644
--- a/templates/modules/loading-box.html
+++ b/templates/modules/loading-box.html
@@ -1,30 +1,9 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
-
-<!-- loading 页面，todo 这块都可以不要，后面删除，先精简代码，后续考虑组件添加 -->
-<div id="loading-box" onclick="heo.hideLoading()"
-     th:fragment="loading-box"
-     th:if="${theme.config.other.loadingBoxs.loadingBoxEnable} and not ${#strings.isEmpty(theme.config.other.loadingBoxs.loadingBoxImg)}">
-
-
+<!-- loading页面 -->
+<th:block th:fragment="loading-box"
+          th:if="${theme.config.other.loadingBoxs.loadingBoxEnable} and not ${#strings.isEmpty(theme.config.other.loadingBoxs.loadingBoxImg)}">
     <style type="text/css">
-
-        #loading-box .loading-image-dot {
-            width: 30px;
-            height: 30px;
-            background: #6bdf8f;
-            position: absolute;
-            border-radius: 50%;
-            border: 6px solid #fff;
-            top: 50%;
-            left: 50%;
-            -webkit-transform: translate(18px, 24px);
-            -moz-transform: translate(18px, 24px);
-            -o-transform: translate(18px, 24px);
-            -ms-transform: translate(18px, 24px);
-            transform: translate(18px, 24px);
-        }
-
         #loading-box {
             -webkit-user-select: none;
         }
@@ -34,7 +13,7 @@
             width: 100%;
             height: 100%;
             position: fixed;
-            background: var(--heo-background);
+            background: var(--heo-card-bg);
             z-index: 1999;
             opacity: 1;
             transition: 0.2s;
@@ -57,11 +36,26 @@
             animation-direction: alternate;
         }
 
+        #loading-box .loading-image-dot {
+            width: 30px;
+            height: 30px;
+            background: #6bdf8f;
+            position: absolute;
+            border-radius: 50%;
+            border: 6px solid #fff;
+            top: 50%;
+            left: 50%;
+            -webkit-transform: translate(18px, 24px);
+            -moz-transform: translate(18px, 24px);
+            -o-transform: translate(18px, 24px);
+            -ms-transform: translate(18px, 24px);
+            transform: translate(18px, 24px);
+        }
+
         @keyframes loadingAction {
             from {
                 opacity: 1;
             }
-
             to {
                 opacity: 0.6;
             }
@@ -71,7 +65,6 @@
             from {
                 opacity: 1;
             }
-
             to {
                 opacity: 0;
             }
@@ -81,37 +74,18 @@
             from {
                 opacity: 0;
             }
-
             to {
                 opacity: 1;
             }
         }
     </style>
-
-    <div class="loading-bg">
-        <img class="loading-img" style="border-radius: 50%;" th:src="${theme.config.other.loadingBoxs.loadingBoxImg}">
-        <div class="loading-image-dot"></div>
+    <div id="loading-box" onclick="heo.hideLoading()">
+        <div class="loading-bg">
+            <img class="loading-img" style="border-radius: 50%;" th:src="${theme.config.other.loadingBoxs.loadingBoxImg}">
+            <div class="loading-image-dot"></div>
+        </div>
     </div>
 
-    <script>
-
-        var preloader = {
-            endLoading: () => {
-                //- document.body.style.overflow = 'auto';
-                document.getElementById('loading-box').classList.add("loaded")
-            },
-            initLoading: () => {
-                //- document.body.style.overflow = '';
-                document.getElementById('loading-box').classList.remove("loaded")
-            }
-        }
-        window.addEventListener('load', preloader.endLoading())
-        setTimeout(function () {
-            preloader.endLoading();
-        }, 3000)
-
-    </script>
-
-</div>
+</th:block>
 
 </html>
\ No newline at end of file
