Tác giả: Hòa Trần Blogger - đăng vào tháng 6 30, 2020
Demo: All bình luận
Thủ thuật lấy tên bài viết: Trong URL của feeds comment nó chỉ chứa ID của POST đó (id của bài viết mà người comment).
Mình phải viết 1 hàm lấy tên bài viết theo ID đó URL có dạng
/feeds/posts/default/3751699384022733410?alt=json
Thì mới có thế lấy được tên bài viết đó. Toàn bộ code mình Share bên dưới
<style>/*<![CDATA[*/.boxContainer{max-width:700px;margin:auto}.comment{display:flex;align-items:flex-start;border:1px solid #ddd;padding:15px;margin-bottom:20px;border-radius:8px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,0.1);transition:opacity 0.3s ease,transform 0.3s ease;overflow:hidden}.avatar{padding-left:10px}.avatar img{width:60px;height:60px;border-radius:50%;margin-right:15px}.content{flex:1}.content p{margin:0}.content strong{color:#007bff}.content a{color:#007bff;text-decoration:none;display:block;margin-top:10px}.content a:hover{text-decoration:underline}#loadMoreBtn{display:flex;align-items:center;justify-content:center;margin:20px auto;padding:10px 20px;background-color:#007bff;color:#fff;text-decoration:none;border-radius:5px;cursor:pointer;transform:translateY(20px);transition:opacity 0.3s ease,transform 0.3s ease}#loadMoreBtn:hover{background-color:#0056b3}#loadingIndicator{margin-right:10px;border:4px solid transparent;border-top:4px solid #fff;border-radius:50%;width:20px;height:20px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}/*]]>*/</style><div class='boxContainer'><div id="commentsContainer"></div><div id="loadMoreBtn"><span id="loadingIndicator"></span> Load More</div></div><script>//<![CDATA[window.addEventListener('load', function() {const COMMENTS_PER_PAGE = 5;const AVATAR_SIZE = 60;let currentPage = 1;let isLoading = false;function getAuthorAvatar(comment) {const authorAvatar = comment.author[0].gd$image.src;if ("https://img1.blogblog.com/img/b16-rounded.gif" !== authorAvatar && "https://img1.blogblog.com/img/blank.gif" !== authorAvatar) {return authorAvatar.replace("s512-c", `s${AVATAR_SIZE}-c`);} else {return `https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx2Iht9bIxJeLlAVzlUg52VyPDAPmyTYVvKunQ1bkCyERHKAasgMhW4UcK8QF7f4imb2KWNCLgTyFUMWo4jQmb93eNt4HuyEjHs9NWCYaLOr_FhGynguefTCWmKCJhyphenhyphendpzGGNvkTfgcsnA/h120/no-avatar.jpg`;}}function loadComments() {if (isLoading) return;isLoading = true;$('#loadingIndicator').show();const apiUrl = '/feeds/comments/default?alt=json-in-script&max-results=' + COMMENTS_PER_PAGE + '&start-index=' + ((currentPage - 1) * COMMENTS_PER_PAGE + 1);$.ajax({url: apiUrl,type: 'GET',dataType: 'jsonp',success: function(data) {handleComments(data);},error: function(error) {handleError(error);}});}function getPostTitle(postId, callback) {const postUrl = `/feeds/posts/default/${postId}?alt=json`;$.ajax({url: postUrl,type: 'GET',dataType: 'json',success: function(postData) {callback(postData.entry.title.$t);}});}function handleComments(data) {const comments = data.feed.entry;if (comments && comments.length > 0) {for (let i = 0; i < comments.length; i++) {const comment = comments[i];const authorName = comment.author[0].name.$t;const authorAvatar = getAuthorAvatar(comment);const commentContent = comment.content.$t;const commentLink = comment.link[2].href;const authorUrl = comment.author[0].uri.$t;const postIdurl = comment.link[0].href;const match = postIdurl.match(/\/(\d+)\/comments\//);const postId = match ? match[1] : null;getPostTitle(postId, function(postTitle) {const commentElement = $(`<div class="comment"><div class="avatar"><img src="${authorAvatar}" alt="Avatar"></div><div class="content"><p><a target="_blank" href = '${authorUrl}'><strong>${authorName}</strong></a>: ${commentContent}</p><a href="${commentLink}" target="_blank">${postTitle}</a></div></div>`);commentElement.appendTo('#commentsContainer').css({opacity: 1,transform: 'translateY(0)'});});}} else {$('#loadMoreBtn').hide();}isLoading = false;$('#loadingIndicator').hide();}function handleError(error) {console.error('Error loading comments:', error.responseText);isLoading = false;$('#loadingIndicator').hide();}$('#loadMoreBtn').on('click', function() {currentPage++;loadComments();});// Bắt đầu tải commentloadComments();});//]]></script>
Đừng bỏ lỡ.