最近,我为我的博客或 blogspot 网站创建了一个简单的代码来显示作者的数据,例如作者姓名、URL、图像及其发布的帖子数量。
然后我尝试显示作者的评论数。通过这个url
https://tailwindbt.blogspot.com/feeds/comments/default?alt=json-in-script&max-results=500&callback=handleJsonpData
我们可以得到一个博主网站的所有评论。在这里我们可以获取所有评论的名称、评论消息等等。
所以我尝试在作者的名字旁边显示评论数量。我已经写了这段代码,但它不起作用。我的博客网站有三位作者,其中任何一位都有一些评论。
我的代码有两个部分。我想结合这两个代码来显示作者的评论数量(如果作者有任何评论)。
这是获得评论的第一部分。这里我手动申请了一个名字,并检查该名字是否有注释,并显示编号。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="comment-count"></div>
<div id="iacman-comment-count"></div>
<script>
function displayCommentCount(data) {
var totalCommentCount = 0;
var iacmanCommentCount = 0;
if ('entry' in data.feed) {
totalCommentCount = data.feed.entry.length;
for (var i = 0; i < data.feed.entry.length; i++) {
var authorName = data.feed.entry[i].author[0].name.$t;
if (authorName === 'Iacman') {
iacmanCommentCount++;
}
}
}
document.getElementById('comment-count').innerHTML = '<h2>Total Comments: ' + totalCommentCount + '</h2>';
document.getElementById('iacman-comment-count').innerHTML = '<h2>Comments by Iacman: ' + iacmanCommentCount + '</h2>';
}
function handleJsonpData(data) {
displayCommentCount(data);
}
var script = document.createElement('script');
script.src = 'https://tailwindbt.blogspot.com/feeds/comments/default?alt=json-in-script&max-results=500&callback=handleJsonpData';
document.body.appendChild(script);
</script>
这是获取博客作者详细信息的第二部分。
<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 feedURL = "https://tailwindbt.blogspot.com/feeds/posts/default?alt=json-in-script&callback=?&max-results=500";
$.getJSON(feedURL, function(data) {
let authors = [];
$.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; // Extract the author profile URL
let authorExists = false;
let authorIndex;
$.each(authors, function(index, author) {
if (author.name === authorName) {
authorExists = true;
authorIndex = index;
}
});
if (authorExists) {
authors[authorIndex].count++;
} else {
authors.push({ name: authorName, image: authorImage, count: 1, profileUrl: authorProfileUrl });
}
}
});
authors.sort(function(a, b) {
return b.count - a.count;
});
$.each(authors, 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.count + ' </div>' +
'</div>' +
'</a>' +
'</div>';
$('.tbt_all_authors-list').append(html);
});
});
</script>
我想结合这两个代码来找到作者的评论号。如果作者有任何评论,它应该自动显示数量。如果作者有任何评论,我不知道如何组合这两个代码来显示作者的评论数量。有人请帮我找出答案。我尝试了很多方法,但没有成功。
您以某种方式在 html 元素中使用了超出该范围的 sfwCommentCount 变量,这就是它不起作用的原因
<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 feedURL = "https://tailwindbt.blogspot.com/feeds/posts/default?alt=json-in-script&callback=?&max-results=10";
let authors = [];
$.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 authorAbout = "";
if (entry.author[0].gd$about) {
authorAbout = entry.author[0].gd$about.$t;
}
let authorProfileUrl = entry.author[0].uri.$t; // Extract the author profile URL
let authorExists = false;
let authorIndex;
$.each(authors, function (index, author) {
if (author.name === authorName) {
authorExists = true;
authorIndex = index;
}
});
if (authorExists) {
authors[authorIndex].count++;
} else {
authors.push({
name: authorName,
image: authorImage,
count: 1,
about: authorAbout,
profileUrl: authorProfileUrl,
comment: 0,
});
}
}
});
authors.sort(function (a, b) {
return b.count - a.count;
});
$.each(authors, 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.count +
" </div>" +
`<div class="text-gray-700 dark:text-gray-400" id="${author.name}-comment">Comments: ` +
author.comment +
" </div>" +
"</div>" +
"</a>" +
"</div>";
$(".tbt_all_authors-list").append(html);
});
});
function displayCommentCount(data) {
if ("entry" in data.feed) {
totalCommentCount = data.feed.entry.length;
for (var i = 0; i < data.feed.entry.length; i++) {
var authorName = data.feed.entry[i].author[0].name.$t;
console.log(authors.filter((author) => author.name === authorName).length > 0);
if (authors.filter((author) => author.name === authorName).length > 0) {
authors.forEach((author) => {
if (author.name === authorName) author.comment++;
});
}
}
}
authors.forEach((author) => {
// $(`#${author.name}-comment`)[0].innerText =`Comments: ${author.comment}`;
document.getElementById(`${author.name}-comment`).innerText = `Comments: ${author.comment}`;
});
}
function handleJsonpData(data) {
displayCommentCount(data);
}
var script = document.createElement("script");
script.src =
"https://tailwindbt.blogspot.com/feeds/comments/default?alt=json-in-script&max-results=10&callback=handleJsonpData";
document.body.appendChild(script);
</script>
代码中的主要问题是您尝试在displayCommentCount函数中访问author.name,但author没有在该函数的范围内定义。作者在 $.getJSON 回调函数中定义,不可全局访问。
要解决此问题,您需要更新 displayCommentCount 函数以接受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>
var commentData;
function getCommentCount(authorName) {
var sfwCommentCount = 0;
if ('entry' in commentData.feed) {
for (var i = 0; i < commentData.feed.entry.length; i++) {
var commentAuthorName = commentData.feed.entry[i].author[0].name.$t;
if (commentAuthorName === authorName) {
sfwCommentCount++;
}
}
}
return sfwCommentCount;
}
function handleJsonpData(data) {
commentData = data;
}
var script = document.createElement('script');
script.src = 'https://tailwindbt.blogspot.com/feeds/comments/default?alt=json-in-script&max-results=500&callback=handleJsonpData';
document.body.appendChild(script);
let feedURL = "https://tailwindbt.blogspot.com/feeds/posts/default?alt=json-in-script&callback=?&max-results=500";
$.getJSON(feedURL, function(data) {
let authors = [];
$.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 authorAbout = '';
if (entry.author[0].gd$about) {
authorAbout = entry.author[0].gd$about.$t;
}
let authorProfileUrl = entry.author[0].uri.$t; // Extract the author profile URL
let authorExists = false;
let authorIndex;
$.each(authors, function(index, author) {
if (author.name === authorName) {
authorExists = true;
authorIndex = index;
}
});
if (authorExists) {
authors[authorIndex].count++;
} else {
authors.push({ name: authorName, image: authorImage, count: 1, about: authorAbout, profileUrl: authorProfileUrl });
}
}
});
authors.sort(function(a, b) {
return b.count - a.count;
});
$.each(authors, function(index, author) {
let authorCommentCount = getCommentCount(author.name);
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.count + ' </div>' +
'<div class="text-gray-700 dark:text-gray-400">Comments: ' + authorCommentCount + ' </div>' +
'</div>' +
'</a>' +
'</div>';
$('.tbt_all_authors-list').append(html);
});
});
</script>