You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何合并代码在Blogger自动显示作者评论数及文章数据

解决方案:整合Blogger作者信息与评论数统计

下面是整合后的完整代码,既保留作者头像、主页链接、文章数,又自动匹配每位作者的评论数:

<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>
// 存储作者数据的全局变量
let authorsList = [];

// 第一步:获取作者文章数据
function fetchAuthorsPosts() {
  let feedURL = "https://tailwindbt.blogspot.com/feeds/posts/default?alt=json-in-script&callback=?&max-results=500";
  $.getJSON(feedURL, function(data) {
    $.each(data.feed.entry, function(index, entry) {
      if (entry.author) {
        let authorName = entry.author[0].name.$t;
        let authorImage = entry.author[0].gd$image.src;
        let authorProfileUrl = entry.author[0].uri.$t;
        let authorExists = false;
        let authorIndex;
        
        $.each(authorsList, function(idx, author) {
          if (author.name === authorName) {
            authorExists = true;
            authorIndex = idx;
          }
        });
        
        if (authorExists) {
          authorsList[authorIndex].postCount++;
        } else {
          authorsList.push({ 
            name: authorName, 
            image: authorImage, 
            postCount: 1, 
            profileUrl: authorProfileUrl,
            commentCount: 0 // 初始化评论数为0
          });
        }
      }
    });
    // 作者按文章数排序后,再获取评论数据
    authorsList.sort(function(a, b) {
      return b.postCount - a.postCount;
    });
    fetchAuthorsComments();
  });
}

// 第二步:获取评论数据并匹配作者
function fetchAuthorsComments() {
  function handleCommentData(data) {
    if ('entry' in data.feed) {
      $.each(data.feed.entry, function(index, entry) {
        let commentAuthor = entry.author[0].name.$t;
        // 找到对应的作者并累加评论数
        $.each(authorsList, function(idx, author) {
          if (author.name === commentAuthor) {
            authorsList[idx].commentCount++;
          }
        });
      });
      // 所有数据准备完成,渲染作者卡片
      renderAuthorCards();
    }
  }
  
  // 动态加载评论JSONP
  var script = document.createElement('script');
  script.src = 'https://tailwindbt.blogspot.com/feeds/comments/default?alt=json-in-script&max-results=500&callback=handleCommentData';
  document.body.appendChild(script);
}

// 第三步:渲染作者卡片(包含文章数和评论数)
function renderAuthorCards() {
  $.each(authorsList, function(index, author) {
    let html = '<div class="flex bg-white dark:bg-gray-700 dark:text-gray-300 shadow rounded">' +
      '<a href="' + author.profileUrl + '" target="_blank" class="author-image flex items-start px-3 py-3">' +
      '<div class="w-20 h-20 rounded-full object-cover mr-4 shadow" style="background-image: url(' + author.image + '); background-repeat: no-repeat; background-position: center; background-size: cover;"></div>' +
      '<div class="">' +
      '<div class="flex items-center justify-between">' +
      '<div class="text-md font-semibold text-gray-900 dark:text-gray-300 mt-3">' + author.name + '</div>' +
      '</div>' +
      '<div class="text-gray-700 dark:text-gray-400">Posts: ' + author.postCount + '</div>' +
      '<div class="text-gray-700 dark:text-gray-400 mt-1">Comments: ' + author.commentCount + '</div>' +
      '</div>' +
      '</a>' +
      '</div>';
    $('.tbt_all_authors-list').append(html);
  });
}

// 启动流程
fetchAuthorsPosts();
</script>

关键修改说明:

  • 统一资源引入:移除重复的jQuery引用,避免版本冲突
  • 全局数据存储:用authorsList统一存储作者的所有信息,包括文章数、评论数、头像、主页链接
  • 分阶段请求:先获取作者文章数据并初始化评论数,再获取评论数据匹配作者累加评论数
  • 延迟渲染:等两类数据都准备完成后再渲染卡片,确保评论数能正确显示
  • 字段拆分:将原count字段改为postCount,新增commentCount字段,清晰区分两类统计数据

内容的提问来源于stack exchange,提问作者Md. Ibrahim

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.14 00:54:58