如何合并代码在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
相关产品推荐
相关产品推荐

