
本文详解如何将 blogger 的文章作者数据与评论数据合并,通过 json api 调用实现每位作者的专属评论数统计,并在作者列表中实时展示“posts”与“comments”双指标。
在 Blogger(Blogspot)平台中,作者信息通常从 posts/default?alt=json-in-script 接口获取,而全站评论则需调用 comments/default?alt=json-in-script 接口。但二者默认独立、无关联,若想为每位作者精准展示其撰写的评论数量(而非仅文章数),关键在于:跨数据源匹配作者姓名,并确保评论数据在作者渲染前已就绪。
以下是一个完整、可直接部署的解决方案,已针对异步加载时序、作用域隔离与性能做优化:
✅ 核心设计思路
- 分步加载,全局缓存:先异步加载评论数据并存入全局变量 commentData,避免重复请求;
- 函数化复用逻辑:封装 getCommentCount(authorName) 函数,支持任意作者名查重;
- 作者去重 + 评论计数一体化:在遍历文章作者时,对每个唯一作者即时调用统计函数;
- 结构清晰,开箱即用:整合 Tailwind CSS、Font Awesome 及 jQuery,适配深色模式。
? 完整实现代码(含注释)
Authors and Writers
⚠️ 注意事项与最佳实践
- 命名一致性:Blogger 中作者名必须完全一致(包括空格、大小写)才能匹配成功。建议在后台统一作者名称格式;
- 性能优化:max-results=500 适用于中小型博客;若评论量极大(>1000),可考虑分页拉取或服务端聚合;
- 错误防御:代码已加入 gd$image?.src、author[0]?.name?.$t 等可选链判断,避免因字段缺失导致脚本中断;
- 深色模式兼容:Tailwind 类名(如 dark:bg-gray-700)已启用,确保在系统或浏览器深色主题下正常显示;
- 替代方案提示:若未来需更高性能或 SEO 友好,推荐将此逻辑迁移至服务端(如 Cloudflare Workers + Blogger REST API),规避前端 JSONP 限制。
✅ 效果验证
部署后,每位作者卡片将稳定显示:
- ✅ 头像(来自 Blogger 作者资料)
- ✅ 姓名(超链接至作者主页)
- ✅ 发布文章总数(来自 posts feed)
- ✅ 该作者所发评论总数(来自 comments feed)
无需手动维护、无需刷新页面,数据随 Blogger 后台更新自动同步——真正实现「一处配置,全局生效」的作者影响力可视化。









