本文详解如何将 blogger 的作者文章数据与评论 json 数据合并处理，实现按作者维度自动统计其发布的评论数，并在作者列表中实时展示“posts”与“comments”双指标。全程基于原生 blogger feed api，无需后端支持。

在 Blogger（Blogspot）平台中，作者信息通常通过 /feeds/posts/default 获取，而全站评论则需调用 /feeds/comments/default 接口。但两者默认是独立请求、异步加载，若未妥善处理执行时序与数据共享，极易出现「评论数始终为 0」或「author is not defined」等错误——这正是原始代码的核心问题：评论统计逻辑被封装在独立回调中，作者列表生成时无法访问已解析的评论数据。

解决思路很清晰：将评论数据预加载并缓存为全局可访问变量，再在作者列表渲染阶段，对每位作者调用 getCommentCount(authorName) 进行逐个匹配统计。整个流程需严格遵循「先加载评论 → 再加载作者 → 最后合并渲染」的依赖顺序。

以下是完整、可直接部署的整合代码（已优化兼容性与健壮性）：

<link href='https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css' rel='stylesheet'/>
<script crossorigin='anonymous' src='https://kit.fontawesome.com/7dfc182d96.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>.author-image { cursor: pointer; }</style>

<div class="mb-0 mt-12">
  <h4 class="mb-0 text-black dark:text-gray-300">
    <i class="fa-solid fa-user-vneck-hair"></i> Authors and Writers
  </h4>
</div>
<div class="tbt_all_authors-list mt-0 mb-16 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-5"></div>

<script>
  // 【步骤1】全局缓存评论数据
  let commentData = null;

  // 【步骤2】定义评论计数函数（接收 authorName 字符串，返回该作者的评论数）
  function getCommentCount(authorName) {
    if (!commentData || !commentData.feed || !commentData.feed.entry) return 0;

    let count = 0;
    for (let i = 0; i < commentData.feed.entry.length; i++) {
      const entry = commentData.feed.entry[i];
      // 安全取值：防止 author 或 name 为空导致脚本中断
      const commentAuthorName = entry.author?.[0]?.name?.$t?.trim() || '';
      if (commentAuthorName === authorName.trim()) {
        count++;
      }
    }
    return count;
  }

  // 【步骤3】异步加载评论数据（使用 JSONP 方式）
  const commentFeedUrl = 'https://tailwindbt.blogspot.com/feeds/comments/default?alt=json-in-script&max-results=500&callback=handleJsonpData';
  function handleJsonpData(data) {
    commentData = data;
  }
  const script = document.createElement('script');
  script.src = commentFeedUrl;
  document.head.appendChild(script); // 推荐插入 head，避免阻塞 body 渲染

  // 【步骤4】加载作者文章数据，并合并渲染
  const postsFeedUrl = "https://tailwindbt.blogspot.com/feeds/posts/default?alt=json-in-script&callback=?&max-results=500";
  $.getJSON(postsFeedUrl, function(data) {
    const authors = [];

    // 提取所有唯一作者（去重 + 计数）
    $.each(data.feed.entry, function(_, entry) {
      if (!entry.author || !entry.author[0]) return;

      const author = entry.author[0];
      const name = author.name?.$t?.trim() || 'Unknown';
      const image = author.gd$image?.src || 'https://via.placeholder.com/80x80?text=U';
      const profileUrl = author.uri?.$t || '#';
      const about = author.gd$about?.$t || '';

      // 查找是否已存在该作者
      const existing = authors.find(a => a.name === name);
      if (existing) {
        existing.count++;
      } else {
        authors.push({
          name,
          image,
          count: 1,
          about,
          profileUrl
        });
      }
    });

    // 按发文量降序排列
    authors.sort((a, b) => b.count - a.count);

    // 渲染每位作者卡片（含评论数）
    $.each(authors, function(_, author) {
      const commentCount = getCommentCount(author.name);
      const html = `
        <div class="flex bg-white dark:bg-gray-700 dark:text-gray-300 shadow rounded overflow-hidden">
          <a href="${author.profileUrl}" target="_blank" class="author-image flex items-start px-3 py-3 w-full">
            <div 
              class="w-20 h-20 rounded-full object-cover mr-4 shadow flex-shrink-0" 
              style="background-image: url('${author.image}'); background-size: cover; background-position: center;"
            ></div>
            <div class="flex-1 min-w-0">
              <div class="font-semibold text-gray-900 dark:text-gray-200 truncate">${author.name}</div>
              <div class="text-sm text-gray-600 dark:text-gray-400 mt-1">Posts: ${author.count}</div>
              <div class="text-sm text-gray-600 dark:text-gray-400">Comments: ${commentCount}</div>
              ${author.about ? `<div class="text-xs text-gray-500 dark:text-gray-500 mt-1 line-clamp-2">${author.about}</div>` : ''}
            </div>
          </a>
        </div>
      `;
      $('.tbt_all_authors-list').append(html);
    });
  });
</script>

✅ 关键优化说明：

• 安全取值防护：使用可选链 ?. 避免因某条评论缺失 author 或 name 字段导致整个脚本崩溃；
• 加载时机优化：评论脚本插入 ，作者数据使用 $.getJSON（本质是 XMLHttpRequest），二者无阻塞冲突；
• 内存友好：commentData 仅存储一次，getCommentCount() 复用该对象，避免重复解析；
• UI 增强：添加作者简介（gd$about）、占位图兜底、响应式截断（truncate / line-clamp-2），提升专业度。

⚠️ 注意事项：

• Blogger 的 Feed API 默认仅返回最近 500 条评论/文章，如需更全数据，请分页请求（增加 start-index 参数）；
• 若作者昵称含空格、大小写不一致（如 “Iacman” vs “iacman”），建议在 getCommentCount() 中统一 .toLowerCase() 处理；
• 此方案依赖客户端 JavaScript，SEO 不可见；如需搜索引擎收录，建议改用服务端渲染（如 Next.js + Blogger REST API）；
• Blogger 对跨域 JSONP 请求有频率限制，高流量站点建议添加本地缓存层（如 localStorage + 过期时间）。

通过以上整合，你将获得一个真正联动的作者仪表板——每位作者的创作影响力（发文量）与社区参与度（评论量）一目了然，无需维护额外数据库或后端服务。