archive.php

<?php
/**
 * 归档页面模板
 *
 * @package custom
 */
if (!defined('__TYPECHO_ROOT_DIR__')) exit;
?>

<?php
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$perPage = 10;
$content = getArchiveTimelineMoments(100, $page, $perPage);

if ($page > 1) {
    echo $content;
    exit;
}
?>

<?php $this->need('header.php'); ?>

<main>

    <style>
        /* 归档时间轴样式 */
        .moments-container {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            font-size: 1rem;
        }

        .moments-group {
            display: flex;
            flex-direction: row;
        }

        .moments-date {
            width: 5em;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 0.2em;
            font-size: .7rem;
        }

        .mg-day {
            font-weight: bold;
            font-size: 1rem;
        }
        
        .moment-body {
            background-color: var(--color-link);
            border-radius: 4px;
            text-align: justify;
            padding: .5rem;
            font-size: 0.7em;
            width: 100%;
        }

        .moment-body:hover {
            background-color: var(--color-link-hover);
        }

        .moment-body a {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            text-overflow: ellipsis;
            text-decoration: none;
            word-wrap: break-word;
            word-break: break-all;
        }
    </style>

    <section class="content-container">
        <div class="archive-views">
            <div id="timeline-view" class="archive-view active">
                <div id="posts-container">
                    <?php echo $content; ?>
                </div>
                <div id="load-more-data" data-next-page-url="<?php
                    $currentUrl = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
                    $parsed = parse_url($currentUrl);
                    $query = isset($parsed['query']) ? $parsed['query'] : '';
                    parse_str($query, $params);
                    $params['page'] = 2;
                    $nextUrl = $parsed['scheme'] . '://' . $parsed['host'] . $parsed['path'] . '?' . http_build_query($params);
                    echo htmlspecialchars($nextUrl);
                ?>"></div>
            </div>
        </div>
    </section>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const postsContainer = document.getElementById('posts-container');
            const loadMoreData = document.getElementById('load-more-data');

            if (!postsContainer || !loadMoreData) return;

            let nextPageUrl = loadMoreData.dataset.nextPageUrl;
            let isLoading = false;
            let hasMore = true;
            let loader = null;
            let sentinel = null;
            let currentPage = 2;
            const baseUrl = window.location.origin + window.location.pathname;

            const createSentinel = () => {
                const sentinel = document.createElement('div');
                sentinel.className = 'scroll-sentinel';
                sentinel.style.height = '1px';
                postsContainer.appendChild(sentinel);
                return sentinel;
            };

            const loadMorePosts = async () => {
                if (isLoading || !hasMore || !nextPageUrl) return;
                isLoading = true;

                // 移除可能存在的旧loader
                if (loader && loader.parentNode) {
                    postsContainer.removeChild(loader);
                }

                // 创建新的加载指示器
                loader = document.createElement('div');
                loader.className = 'loader';
                loader.textContent = '加载中...';
                postsContainer.appendChild(loader);

                try {
                    const response = await fetch(nextPageUrl, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    });

                    if (!response.ok) throw new Error(`HTTP错误! 状态码: ${response.status}`);

                    const html = await response.text();

                    // 安全移除loader
                    if (loader && loader.parentNode) {
                        postsContainer.removeChild(loader);
                    }

                    // 检查是否为空内容（最后一页）
                    if (html.trim() === '') {
                        showNoMoreContent();
                        return;
                    }

                    // 正常处理新内容
                    observer.unobserve(sentinel);
                    if (sentinel.parentNode) postsContainer.removeChild(sentinel);

                    appendNewPosts(html);
                    updateNextPageUrl();

                    // 创建新的哨兵元素
                    sentinel = createSentinel();
                    observer.observe(sentinel);

                } catch (error) {
                    console.error('加载失败:', error);

                    // 安全移除loader
                    if (loader && loader.parentNode) {
                        postsContainer.removeChild(loader);
                    }

                    // 只在网络错误时显示错误提示，而不是"没有更多内容"
                    const errorMsg = document.createElement('div');
                    errorMsg.className = 'load-error';
                    errorMsg.textContent = '加载失败，请重试';
                    errorMsg.style.cssText = 'text-align: center; padding: 20px; color: #999;';
                    postsContainer.appendChild(errorMsg);

                    // 重置加载状态，允许重试
                    hasMore = true;
                    nextPageUrl = loadMoreData.dataset.nextPageUrl;

                } finally {
                    isLoading = false;
                }
            };

            const appendNewPosts = (html) => {
                const momentsContainer = postsContainer.querySelector('.moments-container');
                if (momentsContainer) {
                    const tempDiv = document.createElement('div');
                    tempDiv.innerHTML = html;

                    // 检查第一个元素是否是年份标题，如果是且已存在，则移除
                    const firstChild = tempDiv.firstElementChild;
                    if (firstChild && firstChild.tagName === 'DIV' && firstChild.textContent.includes('年')) {
                        const yearText = firstChild.textContent.trim();
                        const existingYears = momentsContainer.querySelectorAll('div');
                        let yearExists = false;
                        for (let div of existingYears) {
                            if (div.textContent.trim() === yearText) {
                                yearExists = true;
                                break;
                            }
                        }
                        if (yearExists) {
                            tempDiv.removeChild(firstChild);
                        }
                    }

                    momentsContainer.insertAdjacentHTML('beforeend', tempDiv.innerHTML);
                }
            };

            const updateNextPageUrl = () => {
                currentPage++;
                nextPageUrl = baseUrl + '?page=' + currentPage;
                loadMoreData.dataset.nextPageUrl = nextPageUrl;
            };

            const showNoMoreContent = () => {
                hasMore = false;
                observer.disconnect();
                const noMore = document.createElement('div');
                noMore.className = 'no-more-posts';
                noMore.textContent = '已加载全部内容';
                postsContainer.appendChild(noMore);
            };

            sentinel = createSentinel();
            const observer = new IntersectionObserver((entries) => {
                if (entries[0].isIntersecting && !isLoading && hasMore) {
                    loadMorePosts();
                }
            }, {
                threshold: 0.1
            });

            observer.observe(sentinel);

            if (postsContainer.offsetHeight < window.innerHeight * 1.5) {
                loadMorePosts();
            }
        });
    </script>
</main>

<?php $this->need('footer.php'); ?>