fixed bug

2026-01-31 19:24:22 +08:00
1 parent 7b945786ed
commit 54b18039e3
@@ -0,0 +1,93 @@
+// Global Artalk Initialization Function (Supports PJAX)
+window.initArtalk = function() {
+    if (!document.querySelector("#Comments")) return;
+    
+    // Check if configuration exists
+    if (!window.artalkConfig) {
+        console.warn('window.artalkConfig is not defined. Skipping Artalk init.');
+        return;
+    }
+
+    // Check if Artalk library is loaded
+    if (typeof Artalk === 'undefined') {
+        console.warn('Artalk library is not loaded yet. Waiting for bundle...');
+        return;
+    }
+    
+    try {
+        var artalk = Artalk.init(window.artalkConfig);
+        window.artalk = artalk; // Expose to window for other scripts
+
+        // Handle list-loaded event for lazy loading avatars and animations
+        artalk.on('list-loaded', function() {
+            // Restore AI Comment if configured
+            if (window.artalkConfig.aiComment) {
+                var ai = window.artalkConfig.aiComment;
+                var listBody = document.querySelector('.atk-list .atk-list-body');
+                if (listBody && !listBody.querySelector('.atk-ai-comment')) {
+                    var aiCommentHtml = `
+                        <div class="atk-comment-wrap atk-comment atk-ai-comment" id="atk-comment-ai">
+                            <div class="atk-avatar" uk-scrollspy="cls: uk-animation-scale-up; delay: 200">
+                                <img src="${ai.avatar}" alt="${ai.name}">
+                            </div>
+                            <div class="atk-main" uk-scrollspy="cls: uk-animation-slide-right-small; delay: 300">
+                                <div class="atk-header">
+                                    <span class="atk-nick" uk-scrollspy="cls: uk-animation-slide-top-small; delay: 350">${ai.name}</span>
+                                    <span class="atk-badge">AI</span>
+                                    <span class="atk-date">${ai.date}</span>
+                                </div>
+                                <div class="atk-body">
+                                    <div class="atk-content">${ai.content}</div>
+                                </div>
+                            </div>
+                        </div>
+                    `;
+                    listBody.insertAdjacentHTML('afterbegin', aiCommentHtml);
+                    
+                    // Hide "No Comment" placeholder if it exists
+                    var noComment = document.querySelector('.atk-list-no-comment');
+                    if (noComment) {
+                        noComment.style.display = 'none';
+                    }
+                }
+            }
+
+            // Add staggered animation to the comment list
+            var list = document.querySelector('.atk-list');
+            if (list) {
+                list.setAttribute('uk-scrollspy', 'target: > .atk-comment-wrap; cls: uk-animation-slide-bottom-small; delay: 50');
+            }
+
+            // Apply granular animations to inner elements
+            document.querySelectorAll('.atk-comment-wrap:not(.atk-ai-comment)').forEach(function(wrap) {
+                var avatar = wrap.querySelector('.atk-avatar');
+                if (avatar) avatar.setAttribute('uk-scrollspy', 'cls: uk-animation-scale-up; delay: 200');
+                
+                var main = wrap.querySelector('.atk-main');
+                if (main) main.setAttribute('uk-scrollspy', 'cls: uk-animation-slide-right-small; delay: 300');
+                
+                var nick = wrap.querySelector('.atk-nick');
+                if (nick) nick.setAttribute('uk-scrollspy', 'cls: uk-animation-slide-top-small; delay: 350');
+            });
+
+            // Find all avatars in the comment list
+            var avatars = document.querySelectorAll('.atk-list .atk-avatar img');
+            avatars.forEach(function(img) {
+                var src = img.getAttribute('src');
+                if (src) {
+                    img.setAttribute('data-lazy-src', src);
+                    img.removeAttribute('src');
+                    img.classList.add('lazyload');
+                }
+            });
+            
+            // Trigger lazy load update
+            if (window.lazyLoadAgain) {
+                window.lazyLoadAgain();
+            }
+        });
+        
+    } catch (e) {
+        console.error('Artalk init failed:', e);
+    }
+};