63 lines
2.5 KiB
JavaScript
63 lines
2.5 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function () {
|
|
const container = document.getElementById('articles-container');
|
|
let start = 0;
|
|
const batchSize = 20; // 每次加载的卡片数量
|
|
|
|
function loadMoreArticles() {
|
|
fetch('./all.json')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const articles = data.article_data.slice(start, start + batchSize);
|
|
articles.forEach(article => {
|
|
const card = document.createElement('div');
|
|
card.className = 'card';
|
|
|
|
const title = document.createElement('div');
|
|
title.className = 'card-title';
|
|
title.innerText = article.title;
|
|
card.appendChild(title);
|
|
|
|
title.onclick = () => {
|
|
window.open(article.link, '_blank');
|
|
};
|
|
|
|
const author = document.createElement('div');
|
|
author.className = 'card-author';
|
|
const authorImg = document.createElement('img');
|
|
authorImg.src = article.avatar;
|
|
author.appendChild(authorImg);
|
|
author.appendChild(document.createTextNode(article.author));
|
|
card.appendChild(author);
|
|
|
|
const date = document.createElement('div');
|
|
date.className = 'card-date';
|
|
const dateImg = document.createElement('img');
|
|
dateImg.src = './static/img/rili.png'; // 替换为实际的图标路径
|
|
date.appendChild(dateImg);
|
|
date.appendChild(document.createTextNode(article.created.substring(0, 10)));
|
|
card.appendChild(date);
|
|
|
|
const bgImg = document.createElement('img');
|
|
bgImg.className = 'card-bg';
|
|
bgImg.src = article.avatar;
|
|
card.appendChild(bgImg);
|
|
|
|
container.appendChild(card);
|
|
});
|
|
|
|
start += batchSize;
|
|
|
|
if (start >= data.article_data.length) {
|
|
// 如果加载完所有卡片，隐藏加载更多按钮
|
|
document.getElementById('load-more-btn').style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
|
|
// 初始加载
|
|
loadMoreArticles();
|
|
|
|
// 加载更多按钮点击事件
|
|
document.getElementById('load-more-btn').addEventListener('click', loadMoreArticles);
|
|
});
|