{{ define "main" }}

<div class="site--main site--main__gears">
    <h1 class="post--single__title">{{.Title}}</h1>
    <h2 class="post--single__subtitle">{{ .Params.subtitle }}</h2>
    <div class="template--linksWrap">
        <ul class="link-items">
            {{ range .Params.links }}
            <li class="link-item">
                <a class="link-item-inner effect-apollo" href="{{ .link }}" title="Just a blog" target="_blank">
                    <span class="sitename"><strong>{{ .title }}</strong>{{ .description }}</span>
                </a>
            </li>
            {{ end }}
        </ul>
    </div>
    <h1 class="post--single__title">好友文章</h1>
    <h2 class="post--single__subtitle"></h2>
    <div class="articleList" id="articleList"></div>
<button id="load-more">加载更多</button>
<style>
    .nav-links .load-more {
        border: 1px solid var(--farallon-border-color);
        cursor: pointer;
        position: relative;
        padding: 5px 30px;
        height: 40px;
        border-radius: 8px;
        font-size: 14px;
        font-family: LXGWWenKai;
        border-style: solid;
        color: var(--farallon-text-gray);
        background-color: var(--farallon-background-gray);
    }
    
    .nav-links .load-more:hover {
        border-color: var(--farallon-hover-color);
        color: var(--farallon-hover-color);
        background-color: var(--farallon-background-gray);
    }  
    
    </style> 
<script>
document.addEventListener('DOMContentLoaded', async () => {
    const jsonData = await fetchJsonData('https://cdn.jkjoy.cn/rss/rss.json');
    if (!jsonData) {
        console.error('Failed to fetch JSON data.');
        return;
    }
    const articles = jsonData;

    // 对文章按时间排序（最新的排在前面）
    articles.sort((a, b) => new Date(b.time) - new Date(a.time));

    // 初始化分页变量
    let currentPage = 1;
    const itemsPerPage = 30;

    // 加载第一页文章
    loadArticles(currentPage, itemsPerPage, articles);

    // 设置“加载更多”按钮点击事件
    const loadMoreButton = document.getElementById('load-more');
    loadMoreButton.addEventListener('click', () => {
        currentPage++;
        loadArticles(currentPage, itemsPerPage, articles);
    });
});

async function fetchJsonData(url) {
    try {
        const response = await fetch(url);
        if (response.ok) {
            return await response.json();
        } else {
            console.error('HTTP error:', response.status, response.statusText);
        }
    } catch (error) {
        console.error('Fetch error:', error);
    }
    return null;
}

function loadArticles(page, perPage, articles) {
    const startIndex = (page - 1) * perPage;
    const endIndex = page * perPage;
    const articleListElem = document.getElementById('articleList');
    
    articles.slice(startIndex, endIndex).forEach(article => {
        const articleElem = createArticleElement(article);
        articleListElem.appendChild(articleElem);
    });
}

function createArticleElement(article) {
    // 格式化发布时间
    const date = new Date(article.time);
    const formattedDate = new Intl.DateTimeFormat('zh-CN', {
        year: 'numeric', 
        month: '2-digit', 
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
    }).format(date);

    const div = document.createElement('div');
    div.className = 'post--item';

    const contentDiv = document.createElement('div');
    contentDiv.className = 'content';

    const link = document.createElement('a');
    link.href = article.link;
    link.target = '_blank';
    const title = document.createElement('h2');
    title.className = 'post--title';
    title.textContent = article.title;
    link.appendChild(title);

    const descriptionDiv = document.createElement('div');
    descriptionDiv.className = 'description';
    descriptionDiv.textContent = article.description;

    const metaDiv = document.createElement('div');
    metaDiv.className = 'meta';

    const iconImg = document.createElement('img');
    iconImg.src = article.icon;
    iconImg.width = 16;
    iconImg.height = 16;
    iconImg.alt = 'Icon';
    iconImg.className = 'icon';

    const siteName = document.createElement('span');
    siteName.textContent = article.site_name;

    const timeIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    timeIcon.className = 'icon';
    timeIcon.setAttribute('viewBox', '0 0 1024 1024');
    timeIcon.setAttribute('width', '16');
    timeIcon.setAttribute('height', '16');
    timeIcon.innerHTML = `<path d="M512 97.52381c228.912762 0 414.47619 185.563429 414.47619 414.47619s-185.563429 414.47619-414.47619 414.47619S97.52381 740.912762 97.52381 512 283.087238 97.52381 512 97.52381z m0 73.142857C323.486476 170.666667 170.666667 323.486476 170.666667 512s152.81981 341.333333 341.333333 341.333333 341.333333-152.81981 341.333333-341.333333S700.513524 170.666667 512 170.666667z m36.571429 89.697523v229.86362h160.865523v73.142857H512a36.571429 36.571429 0 0 1-36.571429-36.571429V260.388571h73.142858z"></path>`;

    const timeText = document.createElement('time');
    timeText.textContent = formattedDate;

    metaDiv.appendChild(iconImg);
    metaDiv.appendChild(siteName);
    metaDiv.appendChild(timeIcon);
    metaDiv.appendChild(timeText);

    contentDiv.appendChild(link);
    contentDiv.appendChild(descriptionDiv);
    contentDiv.appendChild(metaDiv);

    div.appendChild(contentDiv);

    return div;
}
</script>
    <div class="graph u-marginBottom30">
        {{ .Content }}
    </div>
</div>

{{ end }}