88 lines
3.4 KiB
JavaScript
88 lines
3.4 KiB
JavaScript
function initializeCardSection(containerId, mainKeyword, initialKeywords = []) {
|
||
let selectedKeywords = initialKeywords;
|
||
|
||
// 初始化默认展示
|
||
updateCardSection(containerId, selectedKeywords, mainKeyword);
|
||
|
||
// 导航按钮点击事件处理
|
||
const buttons = document.querySelectorAll('.tab-btn');
|
||
buttons.forEach(button => {
|
||
button.addEventListener('click', function () {
|
||
const keyword = this.getAttribute('data-keyword');
|
||
|
||
// 如果已经选中，取消选中并移除关键词
|
||
if (this.classList.contains('active')) {
|
||
this.classList.remove('active');
|
||
selectedKeywords = selectedKeywords.filter(k => k !== keyword);
|
||
} else {
|
||
// 否则选中并添加关键词
|
||
this.classList.add('active');
|
||
selectedKeywords.push(keyword);
|
||
}
|
||
|
||
// 更新卡片内容
|
||
updateCardSection(containerId, selectedKeywords, mainKeyword);
|
||
});
|
||
});
|
||
}
|
||
|
||
function updateCardSection(containerId, keywords, mainKeyword) {
|
||
const container = document.getElementById(containerId);
|
||
container.classList.add('fade-hide'); // 隐藏当前卡片，增加动画效果
|
||
|
||
setTimeout(() => {
|
||
fetch('/index.json')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
const filteredArticles = filterArticles(data, keywords, mainKeyword);
|
||
container.innerHTML = ''; // 清空现有内容
|
||
renderArticles(containerId, filteredArticles);
|
||
container.classList.remove('fade-hide');
|
||
container.classList.add('fade-show');
|
||
})
|
||
.catch(error => console.error('Error updating articles:', error));
|
||
}, 300); // 短暂延迟以配合动画效果
|
||
}
|
||
|
||
function filterArticles(data, keywords, mainKeyword) {
|
||
// 确保所有文章都包含mainKeyword，且排除 /card/ 内容
|
||
return data.filter(article => {
|
||
const containsMainKeyword = article.title.includes(mainKeyword) || article.content.includes(mainKeyword);
|
||
const containsSelectedKeywords = keywords.every(keyword =>
|
||
article.title.includes(keyword) || article.content.includes(keyword)
|
||
);
|
||
return containsMainKeyword && containsSelectedKeywords && !article.permalink.includes('/card/');
|
||
});
|
||
}
|
||
|
||
function renderArticles(containerId, articles) {
|
||
const articlesContainer = document.getElementById(containerId);
|
||
|
||
articles.forEach(article => {
|
||
const card = document.createElement('div');
|
||
card.className = 'card';
|
||
card.onclick = () => window.location.href = article.permalink;
|
||
|
||
const title = document.createElement('div');
|
||
title.className = 'card-title';
|
||
title.textContent = article.title.length > 30
|
||
? article.title.slice(0, 27) + "..."
|
||
: article.title;
|
||
|
||
const summary = document.createElement('div');
|
||
summary.className = 'summary';
|
||
summary.textContent = article.summary.length > 60
|
||
? article.summary.slice(0, 57) + "..."
|
||
: article.summary;
|
||
|
||
card.appendChild(title);
|
||
card.appendChild(summary);
|
||
|
||
articlesContainer.appendChild(card);
|
||
});
|
||
|
||
articlesContainer.style.display = 'grid';
|
||
articlesContainer.style.gridTemplateColumns = 'repeat(3, 1fr)';
|
||
articlesContainer.style.gap = '16px';
|
||
}
|