<!-- 文章列表頁(yè) -->
<a href="/article/spring-boot-guide" rel="external nofollow"  rel="external nofollow" >Spring Boot入門指南</a>
<a href="/article/vue3-composition-api" rel="external nofollow" >Vue3 Composition API詳解</a>

<a href="/article/spring-boot-guide" rel="external nofollow"  rel="external nofollow"  target="_self">Spring Boot入門指南</a>

<!-- 簡(jiǎn)單，但有點(diǎn)丑，而且總覺(jué)得治標(biāo)不治本 -->
<a href="/article/123" rel="external nofollow"  target="_self">查看文章</a>

// 以前的寫法，問(wèn)題多多
document.addEventListener('DOMContentLoaded', function() {
    initLightbox();  // 有時(shí)候DOM還沒(méi)完全準(zhǔn)備好
    initCopyButton(); // 特別是Thymeleaf動(dòng)態(tài)渲染的內(nèi)容
});

// 現(xiàn)在的寫法，更穩(wěn)健
function initPage() {
    // 先檢查關(guān)鍵元素是否存在
    const articleContent = document.querySelector('.article-content');
    if (!articleContent) {
        // 如果元素還不存在，等100毫秒再試
        setTimeout(initPage, 100);
        return;
    }
    
    // 元素存在了，開(kāi)始初始化
    initLightbox();
    initCopyButton();
    initCommentSection();
}

// 多重保險(xiǎn)：多個(gè)事件都觸發(fā)初始化
window.addEventListener('DOMContentLoaded', initPage);
window.addEventListener('load', initPage);

// 處理瀏覽器前進(jìn)/后退的情況
window.addEventListener('pageshow', function(event) {
    if (event.persisted) {  // 頁(yè)面是從緩存加載的
        initPage();
    }
});

// 頁(yè)面初始化管理器
const PageManager = {
    initialized: false,
    
    // 需要初始化的功能列表
    features: [
        { name: 'lightbox', init: initLightbox, selector: '.article-image' },
        { name: 'copyBtn', init: initCopyButtons, selector: 'pre code' },
        { name: 'comments', init: initComments, selector: '#comment-section' }
    ],
    
    // 初始化所有功能
    async initialize() {
        if (this.initialized) return;
        
        console.log('開(kāi)始初始化頁(yè)面功能...');
        
        for (const feature of this.features) {
            // 等待所需元素出現(xiàn)
            await this.waitForElement(feature.selector);
            // 執(zhí)行初始化
            feature.init();
            console.log(`? ${feature.name} 初始化完成`);
        }
        
        this.initialized = true;
        console.log('?? 所有頁(yè)面功能初始化完成！');
    },
    
    // 等待元素出現(xiàn)
    waitForElement(selector, timeout = 3000) {
        return new Promise((resolve, reject) => {
            const startTime = Date.now();
            
            const check = () => {
                // 元素已經(jīng)存在
                if (document.querySelector(selector)) {
                    resolve();
                    return;
                }
                
                // 超時(shí)檢查
                if (Date.now() - startTime > timeout) {
                    console.warn(`?? 等待 ${selector} 超時(shí)`);
                    reject(new Error('等待元素超時(shí)'));
                    return;
                }
                
                // 繼續(xù)等待
                setTimeout(check, 100);
            };
            
            check();
        });
    },
    
    // 重置狀態(tài)（用于頁(yè)面重新加載時(shí)）
    reset() {
        this.initialized = false;
    }
};

// 頁(yè)面顯示時(shí)初始化
window.addEventListener('pageshow', () => {
    PageManager.reset();
    PageManager.initialize();
});

// 也監(jiān)聽(tīng)傳統(tǒng)的加載事件
window.addEventListener('load', () => {
    PageManager.initialize();
});