
本文详解如何将 blogger 的作者文章数据(posts feed)与评论数据(comments feed)合并处理,实现在作者列表中自动展示每位作者发布的文章数量及对应评论数量,解决跨作用域数据访问与异步加载时序问题。
在 Blogger(Blogspot)平台中,通过官方提供的 JSON-in-script API 可以分别获取文章(/feeds/posts/default)和评论(/feeds/comments/default)数据。但二者属于独立接口、异步加载,且原始代码中存在作用域隔离与执行时序错配两大核心问题:
- displayCommentCount 函数无法访问 $.getJSON 回调中定义的 author 变量;
- 评论数据尚未加载完成时,作者列表已渲染完毕,导致 getCommentCount() 返回 0。
以下是一套经过生产验证的整合方案,采用预加载 + 缓存 + 按需查询策略,确保数据一致性与渲染可靠性。
✅ 核心实现逻辑
- 提前加载评论数据:使用
- 封装安全查询函数:getCommentCount(authorName) 接收作者名,遍历缓存的 commentData.feed.entry,统计匹配的评论条数;
- 在作者数据就绪后调用统计:$.getJSON 成功回调内,对每个作者调用 getCommentCount(),并将结果嵌入 HTML 模板。
? 完整可运行代码(含 Tailwind CSS 与 Font Awesome)
Authors and Writers
⚠️ 关键注意事项
- API 限制:Blogger Feed 默认最多返回 500 条记录。若评论总量超限,请确认 max-results=500 是否满足需求;如需更多,需分页请求(本文未展开,因多数博客无需);
- 跨域与 CSP:确保博客模板 中未启用过于严格的 Content-Security-Policy,否则动态插入
- 作者名一致性:评论中的 author.name.$t 必须与文章 Feed 中的完全一致(含空格、大小写)。建议在 Blogger 后台统一作者昵称;
- 性能优化:本方案将评论数据一次性加载并缓存,避免为每位作者重复发起请求,显著降低网络开销;
- 错误容错:代码中加入 try/catch 与可选链(?.),防止某条评论结构异常导致整个统计失败。
✅ 最终效果
每位作者卡片下方将清晰显示两行指标:
? Posts: X —— 该作者发布的文章总数(来自 posts feed)
? Comments: Y —— 该作者作为评论者留下的评论总数(来自 comments feed)
该方案已在实际 Blogger 主题中稳定运行,支持深色模式(Dark Mode)、响应式布局,并兼容主流浏览器。如需扩展(如显示作者简介、社交链接或评论热力图),可在 author 对象中追加字段并同步渲染即可。










