Tác giả: Hòa Trần Blogger - đăng vào tháng 5 31, 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[*/#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>
Đừng bỏ lỡ.