mirror of https://github.com/jkjoy/hugoblog.git
Compare commits
No commits in common. "b621350a7a6baab006978e9bf797756e0b44ec17" and "3557998189362562044141e0961d5d4957123105" have entirely different histories.
b621350a7a
...
3557998189
|
|
@ -1,8 +0,0 @@
|
||||||
---
|
|
||||||
title: 鼓捣朋友圈文章
|
|
||||||
date: 2024-07-29T10:00:10+0800
|
|
||||||
feature:
|
|
||||||
---
|
|
||||||
之前是使用`hexo-circle-of-friends`来获取友情链接中的好友文章.
|
|
||||||
|
|
||||||
如今使用[折腾博客 之 通过Freshrss API实现朋友文章] (https://www.imsun.org/archives/1654.html)
|
|
||||||
|
|
@ -14,152 +14,6 @@
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</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">
|
<div class="graph u-marginBottom30">
|
||||||
{{ .Content }}
|
{{ .Content }}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue