diff --git a/themes/Ying/assets/css/main.css b/themes/Ying/assets/css/main.css index a906d8ed..c06e6aa7 100644 --- a/themes/Ying/assets/css/main.css +++ b/themes/Ying/assets/css/main.css @@ -3504,66 +3504,60 @@ input[type=submit] { /* GenericOutput */ [data-theme="dark"] .chroma .go { color:#44475a } /* GenericPrompt */ [data-theme="dark"] .chroma .gp { } +/* Floating Tools */ /* Floating Tools */ .floating-tools { position: fixed; - bottom: 28px; + bottom: 24px; right: 16px; z-index: 900; display: flex; flex-direction: column; gap: 8px; align-items: center; - transform: translateZ(0); - will-change: transform; opacity: 1; visibility: visible; - transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease; + transition: opacity 0.2s ease, visibility 0.2s ease; } - .floating-tools.hidden { opacity: 0 !important; visibility: hidden !important; - transform: translateZ(0) translateY(12px) !important; pointer-events: none !important; } - .floating-tools a { - width: 42px; - height: 42px; - background: rgba(255, 255, 255, 0.94); - color: rgba(24, 24, 27, 0.86); + width: 36px; + height: 36px; + background: rgba(255, 255, 255, 0.6); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + color: rgba(24, 24, 27, 0.75); border-radius: 50%; - font-size: 20px; + font-size: 17px; cursor: pointer; text-decoration: none; display: flex; justify-content: center; align-items: center; - -webkit-backdrop-filter: none; - backdrop-filter: none; - border: 1px solid rgba(0, 0, 0, 0.08); - box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12); - transform: translateZ(0); - transition: background 0.2s ease, transform 0.2s ease; + border: 1px solid rgba(255, 255, 255, 0.3); + box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); + transition: all 0.2s ease; } - .floating-tools a:hover { - background: #fff; - transform: translateZ(0) translateY(-2px); - box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16); + background: rgba(255, 255, 255, 0.85); + color: rgba(24, 24, 27, 0.95); + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12); } - [data-theme="dark"] .floating-tools a { - background: rgba(30, 41, 59, 0.94); - color: rgba(241, 245, 249, 0.9); - border-color: rgba(148, 163, 184, 0.22); - box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34); + background: rgba(30, 41, 59, 0.6); + color: rgba(241, 245, 249, 0.75); + border-color: rgba(148, 163, 184, 0.15); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } - [data-theme="dark"] .floating-tools a:hover { - background: rgba(51, 65, 85, 0.98); - box-shadow: 0 12px 26px rgba(0, 0, 0, 0.42); + background: rgba(30, 41, 59, 0.85); + color: rgba(241, 245, 249, 0.95); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } /* ── ViewImage — Apple-style lightbox ── */ diff --git a/themes/Ying/assets/js/modules/mypjax.js b/themes/Ying/assets/js/modules/mypjax.js index d9435861..505138f7 100644 --- a/themes/Ying/assets/js/modules/mypjax.js +++ b/themes/Ying/assets/js/modules/mypjax.js @@ -94,89 +94,54 @@ document.addEventListener("pjax:success", function () { }); // pjax加载完成 -// 代码折叠初始化 — 独立监听器,确保不被其他初始化错误影响 document.addEventListener("pjax:complete", function () { - setTimeout(function() { - if (typeof window.initCodeFold === 'function') window.initCodeFold(); - }, 200); -}); - -document.addEventListener("pjax:complete", function () { - // pjax完成动画 - if (typeof NProgress !== 'undefined') { - NProgress.done(); - } - - // 重载一些js样式调整 + // 立即执行:进度条、基础 UI + if (typeof NProgress !== 'undefined') NProgress.done(); pjax_reload(); - // 初始化代码复制 - if (typeof initCodeCopy === 'function') initCodeCopy(); - - // 初始化段落评论 - if (typeof window.initParagraphComments === 'function') { - try { - window.initParagraphComments(); - } catch (e) { - console.error('initParagraphComments error:', e); + // 下一帧执行:轻量初始化 + requestAnimationFrame(function() { + if (typeof initCodeCopy === 'function') initCodeCopy(); + if (typeof window.initSearch === 'function') { + try { window.initSearch(); } catch(e) {} } - } + if (typeof window.refreshFloatingTools === 'function') { + window.refreshFloatingTools(); + } else if (typeof window.initFloatingTools === 'function') { + try { window.initFloatingTools(); } catch(e) {} + } + // 文章动画 + if (typeof window.initPostScrollspy === 'function') window.initPostScrollspy(); + }); - // 初始化无限加载 - if (typeof window.initInfiniteScroll === 'function' && window.enableInfiniteScroll) { - window.initInfiniteScroll(); - } - - // 初始化友链状态 - if (typeof window.initLinkStatus === 'function') { - try { - window.initLinkStatus(); - } catch(e) { console.error('initLinkStatus error:', e); } - } - - // 重载评论 - if (typeof window.initArtalk === 'function') { - try { - window.initArtalk(); - } catch(e) { console.error('initArtalk error:', e); } - } - - // 重载不蒜子统计 - if (typeof window.bsz_fetch === 'function') { - try { - window.bsz_fetch(); - } catch(e) { console.error('bsz_fetch error:', e); } - } - - // 重载 Search 和 Floating Tools (Moved from main.js) - if (typeof window.refreshFloatingTools === 'function') { - window.refreshFloatingTools(); - } else if (typeof window.initFloatingTools === 'function') { - requestAnimationFrame(function() { - try { - window.initFloatingTools(); - } catch(e) { console.error('initFloatingTools error:', e); } - }); - } - if (typeof window.initSearch === 'function') { - try { - window.initSearch(); - } catch(e) { console.error('initSearch error:', e); } - } + // 空闲时执行:非关键功能 + var idle = window.requestIdleCallback || function(fn) { return setTimeout(fn, 200); }; + idle(function() { + if (typeof window.initParagraphComments === 'function') { + try { window.initParagraphComments(); } catch(e) {} + } + if (typeof window.initInfiniteScroll === 'function' && window.enableInfiniteScroll) { + window.initInfiniteScroll(); + } + if (typeof window.initLinkStatus === 'function') { + try { window.initLinkStatus(); } catch(e) {} + } + if (typeof window.initArtalk === 'function') { + try { window.initArtalk(); } catch(e) {} + } + if (typeof window.bsz_fetch === 'function') { + try { window.bsz_fetch(); } catch(e) {} + } + if (typeof window.initImageFrameReveal === 'function') { + try { window.initImageFrameReveal(); } catch(e) {} + } + // 链接卡片和中英文间距(DOM 扫描,非关键) + if (typeof window.initLinkify === 'function') window.initLinkify(); + if (typeof window.initPangu === 'function') window.initPangu(); + }); - // 重载图片框架滚动显示 - if (typeof window.initImageFrameReveal === 'function') { - try { - window.initImageFrameReveal(); - } catch(e) { console.error('initImageFrameReveal error:', e); } - } - - // 重载文章动画 - if (typeof window.initPostScrollspy === 'function') window.initPostScrollspy(); - // 重载链接卡片 - if (typeof window.initLinkify === 'function') window.initLinkify(); - // 重载中英文间距 - if (typeof window.initPangu === 'function') window.initPangu(); - - refreshHeatmap(); + // 延迟:代码折叠 + setTimeout(function() { + if (typeof window.initCodeFold === 'function') window.initCodeFold(); + }, 300); }); diff --git a/themes/Ying/layouts/_default/single.html b/themes/Ying/layouts/_default/single.html index 881a7dd7..ac17c104 100644 --- a/themes/Ying/layouts/_default/single.html +++ b/themes/Ying/layouts/_default/single.html @@ -28,10 +28,11 @@ function initPostScrollspy() { var content = document.getElementById('post-writing'); if (!content) return; - content.querySelectorAll('h2, h3, h4, p, ul, ol, blockquote, table').forEach(function(el) { + // 只给关键元素加动画,减少 observer 数量 + content.querySelectorAll('h2, h3, blockquote, table, figure').forEach(function(el) { if (!el.hasAttribute('uk-scrollspy')) el.setAttribute('uk-scrollspy', 'cls: uk-animation-fade; delay: 60'); }); - content.querySelectorAll('figure, img, .post-video, .link-card').forEach(function(el) { + content.querySelectorAll('.post-video, .link-card').forEach(function(el) { if (!el.hasAttribute('uk-scrollspy')) el.setAttribute('uk-scrollspy', 'cls: uk-animation-slide-bottom-small; delay: 100'); }); }