From 3d2312ae63e26dcc832a9058dd3acbd4278c450e Mon Sep 17 00:00:00 2001 From: Vaica <94612053+zqlit@users.noreply.github.com> Date: Fri, 30 Jan 2026 19:22:18 +0800 Subject: [PATCH] =?UTF-8?q?fixed=20=E8=AF=84=E8=AE=BAbug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2026-01-30-hugo-album-waterfall/index.md | 6 +++- themes/Ying/assets/js/barrage.js | 31 +++++++++++++------ 2 files changed, 26 insertions(+), 11 deletions(-) diff --git a/content/post/2026-01-30-hugo-album-waterfall/index.md b/content/post/2026-01-30-hugo-album-waterfall/index.md index 5bcfb87f..9607ef7e 100644 --- a/content/post/2026-01-30-hugo-album-waterfall/index.md +++ b/content/post/2026-01-30-hugo-album-waterfall/index.md @@ -1,6 +1,8 @@ --- +layout: post title: 给Hugo博客添加瀑布流相册功能 date: 2026-01-30T13:00:00+08:00 +updated: 2026-01-30T13:00:00+08:00 draft: false author: 小赵同学 categories: @@ -11,8 +13,10 @@ tags: - CSS - 瀑布流 - 相册 +gemini_comment: +location: +show_theme: 1 top_img: https://picsum.photos/800/400 -allowComment: true --- 前两天逛博客,偶然看到了 [immmmm](https://immmmm.com/album/) 大佬的相册页面,觉得那种瀑布流的布局方式展示照片很有感觉,错落有致。 diff --git a/themes/Ying/assets/js/barrage.js b/themes/Ying/assets/js/barrage.js index 21dfa96a..dae35b9e 100644 --- a/themes/Ying/assets/js/barrage.js +++ b/themes/Ying/assets/js/barrage.js @@ -7,6 +7,18 @@ return new Promise((resolve) => { let isResolved = false; + // 安全获取评论列表的辅助函数 + const safeGetComments = () => { + if (!window.artalk) return null; + if (typeof window.artalk.getComments === 'function') return window.artalk.getComments(); + if (typeof window.artalk.getCommentList === 'function') return window.artalk.getCommentList(); + // 尝试访问内部数据 (Artalk v2 hack) + if (window.artalk.ctx && window.artalk.ctx.get('list') && typeof window.artalk.ctx.get('list').getComments === 'function') { + return window.artalk.ctx.get('list').getComments(); + } + return null; + }; + const tryResolve = (data, source) => { if (isResolved) return; @@ -24,8 +36,9 @@ }; // 1. 立即检查 - if (window.artalk && typeof window.artalk.getComments === 'function') { - tryResolve(window.artalk.getComments(), 'immediate'); + const immediateData = safeGetComments(); + if (immediateData) { + tryResolve(immediateData, 'immediate'); } else { console.log('[Barrage] Artalk 实例未就绪 (Immediate)'); } @@ -36,8 +49,8 @@ if (window.artalk && typeof window.artalk.on === 'function') { window.artalk.on('list-loaded', (data) => { console.log('[Barrage] list-loaded 事件触发'); - // 优先使用事件传递的数据(如果有),否则调用 getComments - const comments = (Array.isArray(data) && data.length > 0) ? data : window.artalk.getComments(); + // 优先使用事件传递的数据(如果有),否则尝试主动获取 + const comments = (Array.isArray(data) && data.length > 0) ? data : (safeGetComments() || []); tryResolve(comments, 'event'); }); } @@ -50,12 +63,10 @@ return; } pollCount++; - if (window.artalk && typeof window.artalk.getComments === 'function') { - // 仅在有数据时才 resolve,避免轮询到空数据提前结束 - const data = window.artalk.getComments(); - if (Array.isArray(data) && data.length > 0) { - tryResolve(data, `poll-${pollCount}`); - } + + const pollData = safeGetComments(); + if (pollData && Array.isArray(pollData) && pollData.length > 0) { + tryResolve(pollData, `poll-${pollCount}`); } }, 500);