From e4b948ad494fbd4e7abc7de9aa56bb9e7ec24cd9 Mon Sep 17 00:00:00 2001
From: Vaica <94612053+zqlit@users.noreply.github.com>
Date: Thu, 29 Jan 2026 20:33:30 +0800
Subject: [PATCH] =?UTF-8?q?fixed=20=20=E6=98=BC=E5=A4=9C=E5=88=87=E6=8D=A2?=
=?UTF-8?q?=20bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
themes/Ying/assets/css/main.css | 225 +++++++++++++----------
themes/Ying/assets/js/barrage.js | 30 +--
themes/Ying/assets/js/main.js | 61 +++++-
themes/Ying/assets/js/mypjax.js | 12 +-
themes/Ying/layouts/partials/artalk.html | 3 +-
themes/Ying/layouts/partials/footer.html | 2 +-
6 files changed, 211 insertions(+), 122 deletions(-)
diff --git a/themes/Ying/assets/css/main.css b/themes/Ying/assets/css/main.css
index de505272..0d41ab1d 100644
--- a/themes/Ying/assets/css/main.css
+++ b/themes/Ying/assets/css/main.css
@@ -157,6 +157,7 @@ body {
background-size: inherit; */
background-attachment: fixed;
z-index: 5;
+ transition: background-color 0.3s ease, color 0.3s ease;
}
hr {
@@ -315,7 +316,29 @@ ul {
text-align: center;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
- transition: background-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease, backdrop-filter 0.35s ease;
+ /* Optimized transition: removed box-shadow and backdrop-filter for performance */
+ transition: background-color 0.35s ease, color 0.35s ease;
+}
+
+/* Mobile Optimization: Remove expensive effects */
+@media (max-width: 767px) {
+ .main,
+ [data-theme="dark"] .main,
+ .artalk-related,
+ .floating-tools {
+ backdrop-filter: none !important;
+ -webkit-backdrop-filter: none !important;
+ box-shadow: none !important;
+ }
+}
+
+/* Theme Toggle Icon Animation */
+#theme-toggle i {
+ transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
+}
+
+#theme-toggle.rotate i {
+ transform: rotate(360deg);
}
.header {
@@ -2558,7 +2581,8 @@ input[type=submit] {
display: flex;
justify-content: center;
align-items: center;
- transition: all 0.3s;
+ /* Optimized transition: specific properties instead of all */
+ transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
/* Removed backdrop-filter for performance */
/* backdrop-filter: blur(10px) saturate(180%); */
/* -webkit-backdrop-filter: blur(10px) saturate(180%); */
@@ -3076,110 +3100,120 @@ img[atk-emoticon] {
}
/* --- Dark Mode Overrides --- */
-@media (prefers-color-scheme: dark), [data-theme="dark"] {
- .artalk {
- --at-color-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0), #242021) !important;
- --at-color-bg: #1A1718 !important;
- --at-color-border: #332D2F !important;
- --at-color-meta: #666 !important;
- --at-color-bg-grey: #332D2E !important;
- --at-color-grey: #747474 !important;
- }
+/* --- Dark Mode Overrides (Fixed Syntax) --- */
+[data-theme="dark"] .artalk {
+ --at-color-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0), #242021) !important;
+ --at-color-bg: #1A1718 !important;
+ --at-color-border: #332D2F !important;
+ --at-color-meta: #666 !important;
+ --at-color-bg-grey: #332D2E !important;
+ --at-color-grey: #747474 !important;
+}
- .artalk, .atk-layer-wrap, .atk-content, .atk-header, .atk-content p, .pinglun {
- color: var(--text-content-dark-color) !important;
- }
+[data-theme="dark"] .artalk,
+[data-theme="dark"] .atk-layer-wrap,
+[data-theme="dark"] .atk-content,
+[data-theme="dark"] .atk-header,
+[data-theme="dark"] .atk-content p,
+[data-theme="dark"] .pinglun {
+ color: var(--text-content-dark-color) !important;
+}
- .atk-item.atk-nick, .atk-header .atk-nick, .atk-item.atk-nick a {
- color: var(--text-title-dark-color) !important;
- }
+[data-theme="dark"] .atk-item.atk-nick,
+[data-theme="dark"] .atk-header .atk-nick,
+[data-theme="dark"] .atk-item.atk-nick a {
+ color: var(--text-title-dark-color) !important;
+}
- .atk-main-editor {
- background: transparent !important;
- border: 1px solid var(--frame-dark-color) !important;
- }
+[data-theme="dark"] .atk-main-editor {
+ background: transparent !important;
+ border: 1px solid var(--frame-dark-color) !important;
+}
- .atk-textarea {
- color: var(--text-content-dark-color) !important;
- background: transparent !important;
- }
-
- .artalk .atk-main-editor input.atk-nick,
- .artalk .atk-main-editor input.atk-email,
- .artalk .atk-main-editor input.atk-link {
- color: var(--text-content-dark-color) !important;
- }
+[data-theme="dark"] .atk-textarea {
+ color: var(--text-content-dark-color) !important;
+ background: transparent !important;
+}
- .atk-ua {
- color: #666 !important;
- background: var(--background-dark-color) !important;
- }
+[data-theme="dark"] .artalk .atk-main-editor input.atk-nick,
+[data-theme="dark"] .artalk .atk-main-editor input.atk-email,
+[data-theme="dark"] .artalk .atk-main-editor input.atk-link {
+ color: var(--text-content-dark-color) !important;
+}
- .atk-text, .atk-list-no-comment, .atk-copyright, .atk-copyright a, .atk-comment .atk-main .atk-footer .atk-actions span:hover {
- color: #666 !important;
- }
+[data-theme="dark"] .atk-ua {
+ color: #666 !important;
+ background: var(--background-dark-color) !important;
+}
- .atk-pinned-badge {
- color: #e5e5e5 !important;
- background: #332D2F !important; /* 与深色边框呼应 */
- }
+[data-theme="dark"] .atk-text,
+[data-theme="dark"] .atk-list-no-comment,
+[data-theme="dark"] .atk-copyright,
+[data-theme="dark"] .atk-copyright a,
+[data-theme="dark"] .atk-comment .atk-main .atk-footer .atk-actions span:hover {
+ color: #666 !important;
+}
- .atk-badge {
- color: #e5e5e5 !important;
- background: #444 !important;
- }
+[data-theme="dark"] .atk-pinned-badge {
+ color: #e5e5e5 !important;
+ background: #332D2F !important; /* 与深色边框呼应 */
+}
- .atk-reply-to {
- border-left: 3px solid #242021 !important;
- }
+[data-theme="dark"] .atk-badge {
+ color: #e5e5e5 !important;
+ background: #444 !important;
+}
- .atk-send-btn {
- background: #332D2F !important; /* 深色实心背景 */
- color: #e5e5e5 !important;
- border: 1px solid rgba(255,255,255,0.1) !important;
- }
-
- .atk-send-btn:hover {
- background: #444 !important;
- color: #fff !important;
- }
-
- .atk-main-editor > .atk-bottom .atk-state-btn {
- background: var(--background-dark-color) !important;
- }
-
- .atk-main-editor > .atk-bottom .atk-state-btn .atk-text-wrap {
- color: #666;
- }
+[data-theme="dark"] .atk-reply-to {
+ border-left: 3px solid #242021 !important;
+}
- /* Blockquote Dark Mode */
- .atk-content blockquote {
- background-color: #252526; /* 更深的背景 */
- border-left-color: #444; /* 边框颜色与主题呼应 */
- color: #b0b0b0; /* 柔和的灰白文字 */
- box-shadow: none; /* 暗色模式去除阴影或减弱 */
- }
+[data-theme="dark"] .atk-send-btn {
+ background: #332D2F !important; /* 深色实心背景 */
+ color: #e5e5e5 !important;
+ border: 1px solid rgba(255,255,255,0.1) !important;
+}
- .atk-content blockquote::before {
- color: rgba(255,255,255,0.05); /* 暗色模式下的装饰引号 */
- }
-
- /* Emoji Switcher Dark Mode */
- .atk-grp-switcher span {
- color: var(--text-content-dark-color) !important;
- }
-
- /* Loading State (Dark Mode) */
- .atk-loading {
- background: rgba(30, 30, 30, 0.8) !important; /* 与白昼模式保持一致的透明度 */
- box-shadow: none !important;
- color: #e5e5e5 !important;
- }
-
- .atk-loading-spinner svg circle {
- stroke: #e5e5e5 !important;
- opacity: 0.8;
- }
+[data-theme="dark"] .atk-send-btn:hover {
+ background: #444 !important;
+ color: #fff !important;
+}
+
+[data-theme="dark"] .atk-main-editor > .atk-bottom .atk-state-btn {
+ background: var(--background-dark-color) !important;
+}
+
+[data-theme="dark"] .atk-main-editor > .atk-bottom .atk-state-btn .atk-text-wrap {
+ color: #666;
+}
+
+/* Blockquote Dark Mode */
+[data-theme="dark"] .atk-content blockquote {
+ background-color: #252526; /* 更深的背景 */
+ border-left-color: #444; /* 边框颜色与主题呼应 */
+ color: #b0b0b0; /* 柔和的灰白文字 */
+ box-shadow: none; /* 暗色模式去除阴影或减弱 */
+}
+
+[data-theme="dark"] .atk-content blockquote::before {
+ color: rgba(255,255,255,0.05); /* 暗色模式下的装饰引号 */
+}
+
+/* Emoji Switcher Dark Mode */
+[data-theme="dark"] .atk-grp-switcher span {
+ color: var(--text-content-dark-color) !important;
+}
+
+/* Loading State (Dark Mode) */
+[data-theme="dark"] .atk-loading {
+ background: rgba(30, 30, 30, 0.8) !important; /* 与白昼模式保持一致的透明度 */
+ box-shadow: none !important;
+ color: #e5e5e5 !important;
+}
+
+[data-theme="dark"] .atk-loading-spinner svg circle {
+ stroke: #e5e5e5 !important;
+ opacity: 0.8;
}
/* --- Transition Effects --- */
@@ -3200,7 +3234,8 @@ img[atk-emoticon] {
.atk-plug-panel-wrap,
.atk-loading-spinner svg circle,
.atk-content blockquote {
- transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease, backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease, stroke 0.35s ease, fill 0.35s ease !important;
+ /* Optimized: removed box-shadow and backdrop-filter */
+ transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, opacity 0.35s ease, stroke 0.35s ease, fill 0.35s ease !important;
}
/* --- Force Light Mode Overrides (Fix for Day Mode visibility) --- */
diff --git a/themes/Ying/assets/js/barrage.js b/themes/Ying/assets/js/barrage.js
index 94ff80f7..34b45566 100644
--- a/themes/Ying/assets/js/barrage.js
+++ b/themes/Ying/assets/js/barrage.js
@@ -61,6 +61,7 @@
this.index = 0;
this.timer = null;
this.isPaused = false;
+ this.isDestroyed = false;
}
// 开始发送
@@ -70,11 +71,13 @@
if (this.data.length === 0) return;
this.clear();
+ this.isDestroyed = false;
this.loop();
}
// 清空
clear() {
+ this.isDestroyed = true;
if (this.timer) clearTimeout(this.timer);
// 清除容器内所有弹幕元素
if (this.container) {
@@ -86,18 +89,12 @@
// 循环发射
loop() {
- // 如果容器不在文档中(PJAX切换后)，尝试重新获取容器
- // (注意：this.container 是 DOM 引用，如果页面重绘，旧引用可能失效)
+ if (this.isDestroyed) return;
+
+ // 如果容器不在文档中(PJAX切换后)，停止播放
if (!document.body.contains(this.container)) {
- console.warn('[Barrage] 容器失效，尝试重新获取...');
- const newContainer = document.querySelector('.barrager');
- if (newContainer) {
- this.container = newContainer;
- console.log('[Barrage] 容器重新获取成功，继续播放');
- } else {
- console.warn('[Barrage] 容器彻底丢失，停止播放');
- return; // 真的没了再停止
- }
+ console.warn('[Barrage] 容器失效，停止播放');
+ return;
}
// 发射逻辑
@@ -285,15 +282,18 @@
console.error('加载弹幕时发生错误:', error);
}
}
+
+ // 暴露给全局，供 mypjax.js 调用
+ window.loadBarrager = loadBarrager;
// 初始化监听
document.addEventListener('DOMContentLoaded', function() {
loadBarrager(); // 页面首次加载时启动弹幕
});
- document.addEventListener('pjax:complete', function() {
- // PJAX 跳转后重新加载弹幕
- loadBarrager();
- });
+ // 移除内部的 pjax:complete 监听，统一由 mypjax.js 控制调用时机
+ // document.addEventListener('pjax:complete', function() {
+ // loadBarrager();
+ // });
})();
diff --git a/themes/Ying/assets/js/main.js b/themes/Ying/assets/js/main.js
index 34ef5adb..37c928eb 100644
--- a/themes/Ying/assets/js/main.js
+++ b/themes/Ying/assets/js/main.js
@@ -218,17 +218,47 @@ function copySzhContent() {
}
}
+// Update Theme Icon
+function updateThemeIcon(isDark) {
+ const toggleBtns = document.querySelectorAll('#theme-toggle');
+ toggleBtns.forEach(btn => {
+ const icon = btn.querySelector('i');
+ if (icon) {
+ // Add rotation class for animation
+ btn.classList.add('rotate');
+ setTimeout(() => btn.classList.remove('rotate'), 500);
+
+ // Switch icon
+ if (isDark) {
+ icon.className = 'ri-moon-line';
+ } else {
+ icon.className = 'ri-sun-line';
+ }
+ }
+ });
+}
+
// Theme Toggle Logic
function toggleTheme() {
const currentTheme = document.documentElement.getAttribute('data-theme');
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+ const isDark = newTheme === 'dark';
+
document.documentElement.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
- // Notify Artalk if present
- if (window.Artalk) {
- Artalk.setDarkMode(newTheme === 'dark');
- }
+ // Update Icon
+ updateThemeIcon(isDark);
+
+ // Optimize: Defer heavy Artalk update to avoid blocking UI animation
+ setTimeout(() => {
+ // Notify Artalk if present (Instance or Static)
+ if (window.artalk && typeof window.artalk.setDarkMode === 'function') {
+ window.artalk.setDarkMode(isDark);
+ } else if (window.Artalk && typeof Artalk.setDarkMode === 'function') {
+ Artalk.setDarkMode(isDark);
+ }
+ }, 50);
}
// Listen for system theme changes
@@ -239,7 +269,13 @@ try {
if (!localStorage.getItem('theme')) {
const newTheme = e.matches ? 'dark' : 'light';
document.documentElement.setAttribute('data-theme', newTheme);
- if (window.Artalk) {
+
+ updateThemeIcon(newTheme === 'dark');
+
+ // Notify Artalk
+ if (window.artalk && typeof window.artalk.setDarkMode === 'function') {
+ window.artalk.setDarkMode(newTheme === 'dark');
+ } else if (window.Artalk && typeof Artalk.setDarkMode === 'function') {
Artalk.setDarkMode(newTheme === 'dark');
}
}
@@ -279,6 +315,21 @@ function updateFloatingToolsVisibility() {
// Floating Tools Initialization
function initFloatingTools() {
+ // Initialize Theme Icon based on current theme
+ const currentTheme = document.documentElement.getAttribute('data-theme');
+ const isDark = currentTheme === 'dark';
+ const toggleBtns = document.querySelectorAll('#theme-toggle');
+ toggleBtns.forEach(btn => {
+ const icon = btn.querySelector('i');
+ if (icon) {
+ if (isDark) {
+ icon.className = 'ri-moon-line';
+ } else {
+ icon.className = 'ri-sun-line';
+ }
+ }
+ });
+
// Initial visibility check
updateFloatingToolsVisibility();
diff --git a/themes/Ying/assets/js/mypjax.js b/themes/Ying/assets/js/mypjax.js
index db6b19a5..90a4cbdf 100644
--- a/themes/Ying/assets/js/mypjax.js
+++ b/themes/Ying/assets/js/mypjax.js
@@ -190,7 +190,8 @@ document.addEventListener("pjax:complete", function () {
emoticons = window.siteConfig.artalk.emoticons || emoticons;
}
- Artalk.init({
+ // 保存实例到全局变量 window.artalk
+ window.artalk = Artalk.init({
el: '#Comments', // 绑定元素的 Selector
server: serverUrl, // 后端地址
site: siteName, // 你的站点名
@@ -201,10 +202,11 @@ document.addEventListener("pjax:complete", function () {
darkMode: isDark,
emoticons: emoticons
})
- }
- // 重载评论弹幕
- if (document.querySelector("#Comments") && !isMobile()) {
- loadBarrager()
+
+ // Artalk 初始化完成后，再加载弹幕
+ if (!isMobile() && window.loadBarrager) {
+ window.loadBarrager();
+ }
}
// 重载不蒜子统计
if (typeof window.bsz_fetch === 'function') {
diff --git a/themes/Ying/layouts/partials/artalk.html b/themes/Ying/layouts/partials/artalk.html
index da0d0ccb..0ed51350 100644
--- a/themes/Ying/layouts/partials/artalk.html
+++ b/themes/Ying/layouts/partials/artalk.html
@@ -27,7 +27,8 @@
// 检查 Artalk 是否已定义
if (typeof Artalk !== 'undefined') {
var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
- Artalk.init({
+ // 保存实例到全局变量 window.artalk
+ window.artalk = Artalk.init({
el: '#Comments',
server: '{{ .Site.Params.artalk.server }}',
site: '{{ .Site.Params.artalk.site }}',
diff --git a/themes/Ying/layouts/partials/footer.html b/themes/Ying/layouts/partials/footer.html
index e2225f13..af1b68a3 100644
--- a/themes/Ying/layouts/partials/footer.html
+++ b/themes/Ying/layouts/partials/footer.html
@@ -18,7 +18,7 @@
-
+