blog/themes/Ying/assets/js/main.js

// 判断是否为移动端
function isMobile() {
  if (window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
    return true; // 移动端
  } else {
    return false; // PC端
  }
}

// 文章图片灯箱
window.ViewImage && ViewImage.init('.post-content img');

// Pure JavaScript Back to Top (High Performance)
document.addEventListener('DOMContentLoaded', function() {
    var backToTopButton = document.getElementById('back-to-top');
    if (backToTopButton) {
        var isVisible = false;
        var ticking = false;

        function update() {
            if (window.scrollY > 300) {
                if (!isVisible) {
                    backToTopButton.classList.add('show');
                    isVisible = true;
                }
            } else {
                if (isVisible) {
                    backToTopButton.classList.remove('show');
                    isVisible = false;
                }
            }
            ticking = false;
        }

        window.addEventListener('scroll', function() {
            if (!ticking) {
                window.requestAnimationFrame(update);
                ticking = true;
            }
        }, { passive: true });

        backToTopButton.addEventListener('click', function(e) {
            e.preventDefault();
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    }
});

// loader定时器
$(document).ready(function () {
  setTimeout(function () {
    $("#loader").addClass("hide");
  }, 30000);
});


// 点击进入按钮
$("#closeloader").click(function () {
  $("#loader").addClass("hide");
});
// nav栏样式调整
$('#libabys').first().attr("style", "margin-left: -5px");

$('#libabys').eq(1).attr("style", "margin-left: -5px");
// 友链列表版样式调整
$('.itp-index:odd').attr("style", "float: right;width:48%;");

//文章图片懒加载
if (typeof lazyLoadInit === 'function') {
  lazyLoadInit({
    // coverColor: "white",
    // coverDiv: "<div style='display: flex; justify-content: center; align-items: center; height: 200px; color: #000000;'><span>优世界·一个记录生活点滴的小站</span></div>",
    offsetBottom: 800,
    offsetTopm: 800,
    showTime: 1100
  });
} else {
  console.warn('lazyLoadInit is not defined');
}


// 异步初始化 Artalk 并获取评论数据 (Moved to barrage.js)

// 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...');
        // Optional: Retry logic could be added here if needed, but usually bundle is loaded by now
        return;
    }
    
    // Check if Artalk is already initialized on this container to avoid duplicates
    // But Artalk.init usually handles this or we create a new instance. 
    // Since we want to re-bind to the new DOM after PJAX, we create a new instance.
    
    // Clean up previous instance if needed? Artalk doesn't strictly require explicit destroy if DOM is removed,
    // but it's good practice. For now, we assume simple re-init is fine.

    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 (Avatar, Nickname, Main Content)
            // Note: We already added attributes to AI comment above, but this loop ensures all other comments get it too.
            // Duplicate attributes on AI comment are harmless or we can skip it.
            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'); // Add class if your lazyloader needs it
                }
            });
            
            // Trigger lazy load update
            // Assuming window.lazyLoadInstance is available or using the global function
            if (window.lazyLoadAgain) {
                window.lazyLoadAgain();
            }
        });
        
    } catch (e) {
        console.error('Artalk init failed:', e);
    }
};