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>
Bài viết: Code load toàn bộ comment có Loadmore được viết bởi admin trang Giaodien.blog
Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.
Để lại nguồn có nghĩa là bạn tôn trọng tác giả.
Động lực để mình chia sẻ nhiều bài viết hay.