fixed 昼夜切换 bug

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"] {
+/* --- Dark Mode Overrides (Fixed Syntax) --- */
-    .artalk {
+[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 {
+[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 {
+[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 {
+[data-theme="dark"] .atk-main-editor {
     background: transparent !important;
     border: 1px solid var(--frame-dark-color) !important;
-    }
+}
 
-    .atk-textarea {
+[data-theme="dark"] .atk-textarea {
     color: var(--text-content-dark-color) !important;
     background: transparent !important;
-    }
+}
 
-    .artalk .atk-main-editor input.atk-nick,
+[data-theme="dark"] .artalk .atk-main-editor input.atk-nick,
-    .artalk .atk-main-editor input.atk-email,
+[data-theme="dark"] .artalk .atk-main-editor input.atk-email,
-    .artalk .atk-main-editor input.atk-link {
+[data-theme="dark"] .artalk .atk-main-editor input.atk-link {
     color: var(--text-content-dark-color) !important;
-    }
+}
 
-    .atk-ua {
+[data-theme="dark"] .atk-ua {
     color: #666 !important;
     background: var(--background-dark-color) !important;
-    }
+}
 
-    .atk-text, .atk-list-no-comment, .atk-copyright, .atk-copyright a, .atk-comment .atk-main .atk-footer .atk-actions span:hover {
+[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-pinned-badge {
+[data-theme="dark"] .atk-pinned-badge {
     color: #e5e5e5 !important;
     background: #332D2F !important; /* 与深色边框呼应 */
-    }
+}
 
-    .atk-badge {
+[data-theme="dark"] .atk-badge {
     color: #e5e5e5 !important;
     background: #444 !important;
-    }
+}
 
-    .atk-reply-to {
+[data-theme="dark"] .atk-reply-to {
     border-left: 3px solid #242021 !important;
-    }
+}
 
-    .atk-send-btn {
+[data-theme="dark"] .atk-send-btn {
     background: #332D2F !important; /* 深色实心背景 */
     color: #e5e5e5 !important;
     border: 1px solid rgba(255,255,255,0.1) !important;
-    }
+}
 
-    .atk-send-btn:hover {
+[data-theme="dark"] .atk-send-btn:hover {
     background: #444 !important;
     color: #fff !important;
-    }
+}
 
-    .atk-main-editor > .atk-bottom .atk-state-btn {
+[data-theme="dark"] .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 {
+[data-theme="dark"] .atk-main-editor > .atk-bottom .atk-state-btn .atk-text-wrap {
     color: #666;
-    }
+}
 
-    /* Blockquote Dark Mode */
+/* Blockquote Dark Mode */
-    .atk-content blockquote {
+[data-theme="dark"] .atk-content blockquote {
     background-color: #252526; /* 更深的背景 */
     border-left-color: #444; /* 边框颜色与主题呼应 */
     color: #b0b0b0; /* 柔和的灰白文字 */
     box-shadow: none; /* 暗色模式去除阴影或减弱 */
-    }
+}
 
-    .atk-content blockquote::before {
+[data-theme="dark"] .atk-content blockquote::before {
     color: rgba(255,255,255,0.05); /* 暗色模式下的装饰引号 */
-    }
+}
 
-    /* Emoji Switcher Dark Mode */
+/* Emoji Switcher Dark Mode */
-    .atk-grp-switcher span {
+[data-theme="dark"] .atk-grp-switcher span {
     color: var(--text-content-dark-color) !important;
-    }
+}
 
-    /* Loading State (Dark Mode) */
+/* Loading State (Dark Mode) */
-    .atk-loading {
+[data-theme="dark"] .atk-loading {
     background: rgba(30, 30, 30, 0.8) !important; /* 与白昼模式保持一致的透明度 */
     box-shadow: none !important;
     color: #e5e5e5 !important;
-    }
+}
 
-    .atk-loading-spinner svg circle {
+[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) --- */

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切换后)，尝试重新获取容器
+            if (this.isDestroyed) return;
-            // (注意：this.container 是 DOM 引用，如果页面重绘，旧引用可能失效)
+
+            // 如果容器不在文档中(PJAX切换后)，停止播放
             if (!document.body.contains(this.container)) {
-                console.warn('[Barrage] 容器失效，尝试重新获取...');
+                console.warn('[Barrage] 容器失效，停止播放');
-                const newContainer = document.querySelector('.barrager');
+                return;
-                if (newContainer) {
-                    this.container = newContainer;
-                    console.log('[Barrage] 容器重新获取成功，继续播放');
-                } else {
-                    console.warn('[Barrage] 容器彻底丢失，停止播放');
-                    return; // 真的没了再停止
-                }
             }
 
             // 发射逻辑
@@ -286,14 +283,17 @@
         }
     }
     
+    // 暴露给全局，供 mypjax.js 调用
+    window.loadBarrager = loadBarrager;
+
     // 初始化监听
     document.addEventListener('DOMContentLoaded', function() {
         loadBarrager(); // 页面首次加载时启动弹幕
     });
 
-    document.addEventListener('pjax:complete', function() {
+    // 移除内部的 pjax:complete 监听，统一由 mypjax.js 控制调用时机
-        // PJAX 跳转后重新加载弹幕
+    // document.addEventListener('pjax:complete', function() {
-        loadBarrager(); 
+    //    loadBarrager(); 
-    });
+    // });
 
 })();

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
+    // Update Icon
-    if (window.Artalk) {
+    updateThemeIcon(isDark);
-        Artalk.setDarkMode(newTheme === 'dark');
+    
+    // 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();
 

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
         })
+
+        // Artalk 初始化完成后，再加载弹幕
+        if (!isMobile() && window.loadBarrager) {
+            window.loadBarrager();
         }
-    // 重载评论弹幕
-    if (document.querySelector("#Comments") && !isMobile()) {
-            loadBarrager()
     }
     // 重载不蒜子统计
     if (typeof window.bsz_fetch === 'function') {

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 }}',

themes/Ying/layouts/partials/footer.html

@@ -18,7 +18,7 @@
     <i class="ri-search-line"></i>
   </a>
   <a href="javascript:;" id="theme-toggle" title="切换主题">
-    <i class="ri-palette-line"></i>
+    <i class="ri-sun-line"></i>
   </a>
   <a href="#Comments" id="to-comments" title="跳转评论">
     <i class="ri-chat-2-line"></i>