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[*/#commentsContainer{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}#pagination{text-align:center;margin-top:45px}.pagination{display:flex;justify-content:center;margin-top:20px}.pagination-link{display:inline-block;width:30px;height:30px;line-height:30px;text-align:center;margin:0 4px;border:1px solid #e44d26;border-radius:4px;color:#e44d26;text-decoration:none;cursor:pointer;transition:background-color 0.3s ease,color 0.3s ease}.pagination-link:hover{background-color:#e44d26;color:#fff}.pagination-link.active{background-color:#e44d26;color:#fff}.pagination-link svg,.pagination-link svg{width:20px;height:20px;fill:#e44d26;stroke:#e44d26;transition:fill 0.3s ease,stroke 0.3s ease;padding-top:5px}.pagination-link:hover svg{fill:#fff;stroke:#fff}/*]]>*/</style<div class="boxContainer"><div id="commentsContainer"></div><div id="pagination"></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;const defaultAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx2Iht9bIxJeLlAVzlUg52VyPDAPmyTYVvKunQ1bkCyERHKAasgMhW4UcK8QF7f4imb2KWNCLgTyFUMWo4jQmb93eNt4HuyEjHs9NWCYaLOr_FhGynguefTCWmKCJhyphenhyphendpzGGNvkTfgcsnA/h120/no-avatar.jpg';return (authorAvatar !== "https://img1.blogblog.com/img/b16-rounded.gif" && authorAvatar !== "https://img1.blogblog.com/img/blank.gif") ? authorAvatar.replace("s512-c", `s${AVATAR_SIZE}-c`) : `${defaultAvatar}${AVATAR_SIZE}-c`;}function updatePagination(totalPages) {const maxVisiblePages = 5;let paginationHTML = '';const startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));const endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);function addPaginationLink(page) {paginationHTML += `<span class="pagination-link ${currentPage === page ? 'active' : ''}" data-page="${page}">${page}</span> `;}if (currentPage > 1) {paginationHTML += '<span class="pagination-link" data-page="1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160zm352-160l-160 160c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L301.3 256 438.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0z"/></svg></span> ';}if (startPage > 1) {addPaginationLink(1);if (startPage > 2) {paginationHTML += '<span>...</span> ';}}for (let i = startPage; i <= endPage; i++) {addPaginationLink(i);}if (endPage < totalPages) {if (endPage < totalPages - 1) {paginationHTML += '<span>...</span> ';}addPaginationLink(totalPages);}if (currentPage < totalPages) {paginationHTML += `<span class="pagination-link" data-page="${totalPages}"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z"/></svg></span>`;}$('#pagination').html(paginationHTML);$('.pagination-link').on('click', function() {currentPage = parseInt($(this).data('page'));loadComments();});}function loadComments() {if (isLoading) return;isLoading = true;$('#loadingIndicator').show();const startIndex = (currentPage - 1) * COMMENTS_PER_PAGE + 1;const apiUrl = `/feeds/comments/default?alt=json-in-script&max-results=${COMMENTS_PER_PAGE}&start-index=${startIndex}`;$.ajax({url: apiUrl,type: 'GET',dataType: 'jsonp',success: handleComments,error: handleError});}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;const totalComments = parseInt(data.feed.openSearch$totalResults.$t);const totalPages = Math.ceil(totalComments / COMMENTS_PER_PAGE);if (comments && comments.length > 0) {const commentsContainer = $('#commentsContainer');commentsContainer.empty(); // Clear existing commentsfor (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>`);commentsContainer.append(commentElement.hide().fadeIn());});}updatePagination(totalPages);} else {$('#loadMoreBtn').hide();}isLoading = false;$('#loadingIndicator').hide();}function handleError(error) {console.error('Error loading comments:', error.responseText);isLoading = false;$('#loadingIndicator').hide();}loadComments(); // Bắt đầu tải comment khi trang được tải});//]]></script>
Bài viết: Code load toàn bộ comment có phân trang đượ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.