index.html

---
layout: default
# 自定义首页 - 列出 weekly 集合的文章
---

<!-- 排序选项栏 -->
<div class="d-flex gap-2 align-items-center">
    <small class="text-muted">排序：</small>
    <div class="btn-group btn-group-sm" role="group" aria-label="排序方式">
        <button type="button" class="btn btn-outline-secondary sort-btn" data-sort="newest" aria-pressed="false">最新</button>
        <button type="button" class="btn btn-outline-secondary sort-btn" data-sort="oldest" aria-pressed="true">最早</button>
    </div>
</div>

<div id="post-list" class="flex-grow-1 px-xl-1">
    {% assign sorted_weekly = site.weekly | sort: 'date' %}
    {% for post in sorted_weekly %}
    <article class="card-wrapper card" data-date="{{ post.date | date: '%s' }}">
        <a href="{{ post.url | relative_url }}" class="post-preview row g-0 flex-md-row-reverse">
            <div class="col-md-12">
                <div class="card-body d-flex flex-column">
                    <h1 class="card-title my-2 mt-md-0">{{ post.title }}</h1>
                    <div class="card-text content mt-0 mb-3">
                        <p>{{ post.description }}</p>
                    </div>
                    <div class="post-meta flex-grow-1 d-flex align-items-end">
                        <div class="me-auto">
                            <i class="far fa-calendar fa-fw me-1"></i>
                            <time>{{ post.date | date: "%Y-%m-%d" }}</time>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </article>
    {% endfor %}
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const postList = document.getElementById('post-list');
        const sortButtons = Array.from(document.querySelectorAll('.sort-btn'));
        const STORAGE_KEY = 'githubweekly-sort';

        function setActiveButton(sortType) {
            sortButtons.forEach(btn => {
                const isActive = btn.dataset.sort === sortType;
                if (isActive) {
                    btn.classList.add('active');
                    btn.setAttribute('aria-pressed', 'true');
                } else {
                    btn.classList.remove('active');
                    btn.setAttribute('aria-pressed', 'false');
                }
            });
        }

        function applySort(sortType) {
            const articles = Array.from(postList.querySelectorAll('article'));
            articles.sort((a, b) => {
                const dateA = parseInt(a.dataset.date, 10);
                const dateB = parseInt(b.dataset.date, 10);
                return sortType === 'newest' ? dateB - dateA : dateA - dateB;
            });
            // 重新排列 DOM 元素（使用 DocumentFragment 减少重排）
            const frag = document.createDocumentFragment();
            articles.forEach(article => frag.appendChild(article));
            postList.appendChild(frag);
        }

        // 初始化：优先使用 localStorage，否则默认按最早排序
        const saved = localStorage.getItem(STORAGE_KEY);
        const initialValue = saved || 'oldest';
        setActiveButton(initialValue);
        applySort(initialValue);

        sortButtons.forEach(btn => {
            btn.setAttribute('aria-controls', 'post-list');
            btn.addEventListener('click', function () {
                const sortType = this.dataset.sort;
                localStorage.setItem(STORAGE_KEY, sortType);
                applySort(sortType);
                setActiveButton(sortType);
            });
        });
    });
</script>