Tìm hiểu về phương pháp click tải thêm bài viết trong Blogger

Các bạn cài đặt và sử dụng Blogger làm trang web cũng đều biết trong Blogger không có phân trang đánh số thứ tự và cũng không có tùy chọn tự động tải thêm bài viết khi click vào button hay scroll thanh cuộn đến bài cuối.

Blogger chỉ có duy nhất liên kết văn bản đến bài đăng cũ hơn hay bài đăng mới hơn và liên kết thường được đặt hiển thị dưới chân bài viết nếu liên kết hiển thị ở nhóm trang chỉ mục nó sẽ mở đến trang các bài viết mới hơn hoặc cũ hơn, còn nếu hiển thị trong bài viết nó sẽ mở đến trang bài viết được xuất bản trước hoặc sau trang bài viết hiện tại, và các bạn lưu ý chỉ áp dụng với bài đăng chứ không áp dụng với trang tĩnh có nghĩa chỉ dùng cho post chứ không phải page.

Từ một thẻ data cho liên kết đến bài đăng cũ và mới hơn nhưng tùy theo loại trang và nhóm trang cũng khác nhau chứ không giống nhau tùy thuộc vào trang hiện tại.

Chẳng hạn, tại trang chủ khi bạn cài đặt hiển thị tối đa không quá 500 bài đăng với điều kiện trong bài viết có chèn jumb break thì liên kết đến trang các bài đăng tiếp theo (cũ hơn) sẽ bắt đầu từ thời gian xuất bản bài cuối cùng của trang chủ kèm theo tối đa số bài đăng mà bạn cài đặt hiển thị.

Ví dụ bạn cài đặt hiển thị trang chủ 10 posts => Thời gian sẽ được lấy bắt đầu từ bài thứ 10 kèm theo tho điều kiện 10 bài tiếp theo, ta có link sau:

/search?updated-max=[2020-03-19T22:36:00-07:00]&max-results=[10]

Trường hợp với trang label search lại khác vì nó cũng thuộc nhóm trang chỉ mục nhưng lại được phân loại vào nhóm trang search cho nên mặc định nó luôn là 20 posts với điều kiện trong bài viết có chèn jumb break, liên kết đến trang các bài đăng tiếp theo (cũ hơn) cũng sẽ bắt đầu từ thời gian xuất bản bài cuối cùng của trang hiện tại kèm theo tối đa 20 posts, ta có link sau:

/search/label/thu-thuat-blogspot?updated-max=[2019-01-19T17:36:00%2B07:00]&max-results=[20]&start=[20]&by-date=[false]

Điểm đặc biệt ở chỗ nếu trang hiện tại thuộc nhóm trang search trong liên kết có kèm theo các tham só start để chỉ trang tiếp theo sẽ bắt đầu sau bài đăng cuối cùng của trang hiện tại và by-date để chỉ nếu cài đặt hiện thị theo bài đăng hoặc ngày đăng.

Trường hợp nếu trang hiện tại là trang bài viết (item) thì liên kết sẽ là URL của bài đăng được xuất bản trước hoặc sau bài đăng của trang hiện tại.

+ Thẻ data cho liên kết bài đăng cũ hơn: data:olderPageUrl
+ Thẻ data cho liên kết bài đăng cũ hơn: data:newerPageUrl

Viết đầy đủ cho liên kết dạng sau:

<b:if cond='data:olderPageUrl'>

  <a expr:href='data:olderPageUrl.canonical' expr:title='data:messages.olderPosts'><data:messages.olderPosts/></a>

</b:if>

<b:if cond='data:newerPageUrl'>

  <a expr:href='data:newerPageUrl' expr:title='data:messages.newerPosts'><data:messages.newerPosts/></a>

</b:if>

Theo tiêu đề của bài đăng này mình chỉ sử dụng liên kết đến bài đăng cũ hơn sử dụng phương pháp click vào liên kết tự động lấy các bài đăng tiếp theo hiển thị bên dưới và áp dụng cho nhóm trang chỉ mục

Khi chưa áp dụng phương pháp click vào liên kết tự động tải thêm bài viết, lúc đó khi click vào liên kết trang sẽ chuyển hướng đến trang các bài đăng cũ hơn. Thay vào đó nếu áp dụng khi click vào sẽ tự động hiển thị luôn các bài đăng của trang cũ hơn thay vì trang phải chuyển hướng.

Sử dụng phương pháp jquery get url trực tiếp thêm vài dòng code bạn sẽ áp dụng được phương pháp click tải thêm bài viết trong Blogger

Mô tả cách làm

Giả sử khi click vào liên kết trang sẽ chuyển hướng đến trang hiển thị 20 post tiếp theo thay vào đó chúng ta sẽ code lấy 20 posts đó hiện thị luôn tại trang hiện tại và tương tự nếu click vào liên kết lại tiếp tục lấy các posts của trang đó hiển thị tiếp theo tại trang hiện tại.

Hình minh họa

Minh họa với trang chủ hiển thị mặc định 7 posts với các element được sắp xếp như sau:

<div class="blog-posts">

  <div class="post">...</div>

  <div class="post">...</div>

  <div class="post">...</div>

  <div class="post">...</div>

  <div class="post">...</div>

  <div class="post">...</div>

  <div class="post">...</div>

<div>

<div class="blog-pager">

  <a href="/search?updated-max=2019-08-08T13:15:00%2B07:00&amp;max-results=7" title="Tải thêm">Tải thêm</a>

</div>

Khi viết code sẽ sử dụng liên kết Tải thêm để get, tại trang get này lọc lấy các posts đề append tiếp theo và cũng lấy liên kết Tải thêm của trang tiếp theo đó thay thế vào liên kết Tải thêm cho trang hiện tại, cứ như thế cho đến khi tải hết các bài đăng.

Chúng ta có đoạn code sau đây:

<b:if cond='data:view.isMultipleItems and !data:view.isArchive'>

  <script>//<![CDATA[

    window.addEventListener('load',function(){

      var a='.blog-posts',b='.post',c='.blog-pager>a',

      d=document.querySelector(c),e=d.getAttribute('href')

      function f(){setTimeout(function(){d.innerHTML='Không tìm thấy kết quả nào';d.classList.add('disabled')},500)}

      function m(){setTimeout(function(){d.innerHTML='Tải thêm'},500)}

      function n(v){

        v.preventDefault()

        this.innerHTML='Đang tải...'

        if(e!=''){

          $.get(e,function(g){

            var h=$(g).find(b)

            if(h.length){

              var i=document.createElement('div'),j=$(i).append(g),k=j.find(c)

              if(k.length)(e=k.attr('href'),d.setAttribute('href',e))

              else e=''

              var l=j.find(a).children(b)

              $(a).append(l)

              m()

            }else f()             

          },'html')

        }else f()

      }

      d.addEventListener('click',n)

    })

  //]]></script>

</b:if>

Một số bài viết tham khảo

• Tạo các hàm function để load tệp css và js từ nguồn bên ngoài
• Thêm thuộc tính lazy loading trì hoản tải ảnh và iframe cho trang blogspot
• Cách thêm lượt xem bài viết vào Blogger bằng dịch vụ Google Firebase - update 2019
• Cách đặt điều kiện css, js cho các loại tiện ích blogspot