本文详解如何将 blogger 的作者文章数据与评论数据通过 json api 合并处理，在作者信息卡片中实时展示每位作者发布的评论数量，解决跨作用域访问、异步加载时序及重复统计等关键问题。
在 Blogger（Blogspot）平台中，开发者常需展示作者画像（如头像、姓名、发文数），但原生不支持直接获取“某作者发表的评论数”。本文提供一套完整、健壮的前端整合方案：通过两个独立的 JSON-in-Script API（文章 Feed 与评论 Feed）协同解析，实现作者维度的评论计数动态渲染。
核心原理：分离获取 + 延迟关联
Blogger 的 feeds/posts/default（文章）与 feeds/comments/default（评论）是两个独立接口，返回结构相似但语义不同的 JSON 数据。由于两者加载异步且无天然关联字段，不能在评论请求回调中直接处理作者列表，而应采用“先缓存评论数据，后遍历作者并按名匹配计数”的策略。
关键设计要点：
- ✅ 将评论数据全局缓存（commentData），避免重复请求；
- ✅ 定义纯函数 getCommentCount(authorName)，接收作者名，遍历已缓存的评论条目进行精确匹配；
- ✅ 在文章数据加载完成后的 $.getJSON 回调中调用该函数，确保作者列表已生成、评论数据已就绪；
- ❌ 避免在 handleJsonpData 中操作 DOM 或依赖未初始化的作者数组（典型作用域错误）。
完整可运行代码（含优化增强）
以下代码已在 Blogger 环境实测可用，已整合 Tailwind CSS、Font Awesome 及 jQuery，并新增容错处理：
Authors and Writers
注意事项与最佳实践
- 跨域与加载时序：Blogger 的 JSON-in-Script 接口本质是
- 性能考量：max-results=500 是上限，若评论量极大（如 >10k），建议服务端聚合或启用分页逻辑；前端遍历 500 条评论对现代浏览器无压力。
- 空值防护：代码中所有 ?. 链式访问和 || 默认值均防止因 Blogger 数据字段缺失导致脚本崩溃（例如某些作者无 gd$about）。
- SEO 与可访问性：当前为纯客户端渲染，搜索引擎可能无法索引作者评论数。如需 SEO 支持，应改用服务端渲染（如通过 Google Apps Script 代理聚合）。
- 样式兼容性：Tailwind v2.2.19 已足够稳定；若升级至 v3+，请确认 dark: 前缀是否启用（需在 tailwind.config.js 中配置 darkMode: 'class'）。
总结
本文提供的方案不是简单拼接两段代码，而是构建了一个数据驱动、职责分离、容错优先的前端聚合模式。它将“获取”与“关联”解耦，利用闭包与全局缓存规避作用域陷阱，并通过防御性编程保障生产环境稳定性。掌握此模式后，你可轻松扩展至统计“作者被回复数”“指定标签下评论数”等更复杂场景。
