Code load toàn bộ comment có phân trang

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

<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 comments
        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>`);
            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>