github
/
halo-theme-hao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化loading页面

This commit is contained in:
1152958806@qq.com 2023-10-12 00:27:45 +08:00
parent b9c257f1b4
commit 2ac2c5579f
4 changed files with 62 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
templates/fcircle.html
View File

@ -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

2
templates/modules/head.html
View File

@ -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>

50
templates/modules/layouts/layout.html
View File

@ -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']

78
templates/modules/loading-box.html
View File

@ -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>