dellevin/BaiTu-homepage
1
0
Fork 0
generated from dellevin/template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

我的网站优化

Browse Source
This commit is contained in:
DelLevin-Home
2026-05-18 14:36:19 +08:00
parent 40278c5d84
commit 47396b88f0
21 changed files with 810 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
static/js/blog_posts.js
View File

@@ -19,6 +19,7 @@
const blogPostsClose = document.getElementById('blog-posts-close');
const blogPostsList = document.querySelector('.blog-posts-list');
const blogPostsFullBody = document.querySelector('#blog-posts-full-modal .guestbook-body');
const previewBody = blogPostsPreview ? blogPostsPreview.querySelector('.preview-body') : null;
// 初始化
function init() {
@@ -32,6 +33,20 @@
// 页面加载时自动加载数据（用于 Hover 预览）
loadBlogPosts(true);
// 监听预览面板滚动事件实现触底加载
if (previewBody) {
previewBody.addEventListener('scroll', handleScroll);
}
}
// 处理滚动事件
function handleScroll(e) {
const { scrollTop, scrollHeight, clientHeight } = e.target;
// 距离底部 50px 时触发加载
if (scrollHeight - scrollTop - clientHeight < 50) {
loadMoreBlogPosts();
}
}
// 打开完整弹窗
@@ -65,7 +80,7 @@
}
try {
const response = await fetch(`${BLOG_API_URL}?page=${currentPage}&pageSize=${PAGE_SIZE}&showContent=false&showDigest=excerpt&limit=30`, {
const response = await fetch(`${BLOG_API_URL}?page=${currentPage}&pageSize=${PAGE_SIZE}&showContent=false&showDigest=excerpt&limit=60`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
@@ -105,27 +120,35 @@
// 渲染文章列表
function renderPosts(posts, isReset = false, totalCount = 0) {
let html = '';
// 预览面板 HTML（无底部分页按钮，使用无限滚动）
let previewHtml = '';
// 全屏弹窗 HTML（保留底部分页按钮）
let fullHtml = '';
if (!posts || posts.length === 0) {
html = '<div class="guestbook-empty">暂无文章</div>';
const emptyHtml = '<div class="guestbook-empty">暂无文章</div>';
previewHtml = emptyHtml;
fullHtml = emptyHtml;
} else {
html = '<div class="blog-posts-container">';
posts.forEach(post => {
html += renderPostItem(post);
});
html += '</div>';
// 只有在还有更多数据时才显示加载更多按钮
const containerHtml = '<div class="blog-posts-container">' +
posts.map(post => renderPostItem(post)).join('') +
'</div>';
previewHtml = containerHtml;
if (!hasMore) {
previewHtml += `<div class="load-complete">已显示全部</div>`;
}
fullHtml = containerHtml;
if (hasMore) {
html += `<button class="load-more-btn" onclick="window.loadMoreBlogPosts()">点击加载更多</button>`;
fullHtml += `<button class="load-more-btn" onclick="window.loadMoreBlogPosts()">点击加载更多</button>`;
} else {
html += `<div class="load-complete">已显示全部</div>`;
fullHtml += `<div class="load-complete">已显示全部</div>`;
}
}
if (blogPostsList) blogPostsList.innerHTML = html;
if (blogPostsFullBody) blogPostsFullBody.innerHTML = html;
if (blogPostsList) blogPostsList.innerHTML = previewHtml;
if (blogPostsFullBody) blogPostsFullBody.innerHTML = fullHtml;
// 更新预览面板标题显示总数
const previewHeader = document.querySelector('#blog-posts-preview .preview-header h3');
@@ -188,9 +211,13 @@
const date = new Date(post.created * 1000);
const dateStr = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
const category = post.categories && post.categories.length > 0 ? post.categories[0].name : '未分类';
const digest = post.digest || '';
let html = `<div class="blog-post-item" onclick="window.open('${post.permalink}', '_blank')">`;
html += `<div class="blog-post-title">${escapeHtml(post.title)}</div>`;
if (digest) {
html += `<div class="blog-post-digest">${escapeHtml(digest)}</div>`;
}
html += `<div class="blog-post-meta">`;
html += `<span>${dateStr}</span>`;
html += `<span class="blog-post-category">${escapeHtml(category)}</span>`;