Sử dụng ajax get url tạo phân trang số thứ tự Blogspot

Ưu điểm của phương pháp sử dụng ajax get url không cần đến nguồn cấp dữ liệu feeds, đặc biệt hữu ích với những Blog chặn nguồn cấp hay đặt Blog ở chế độ riêng tư. Một ưu điểm khác đó thời gian get url nhanh hơn so với get feeds do đó tốc độ tải trang nhanh hơn

Tuy nhiên nhược điểm của phương pháp này cần tìm kiếm element của post cụ thể khi get url tìm class chính của mỗi post và từ mỗi post đó tìm class hiển thị ngày tháng bằng định dạng iso8601

Như hình minh họa, class chính của mỗi post "post", class lấy dữ liệu ngày tháng "post_date", và "blog-pager" là id hiển thị phân trang.

Một điểm rất quan trọng cần lưu ý khi tạo phân trang bằng phương pháp này đó là các bài đăng bắt buộc phải có thẻ ngắt nhảy "" thì khi get url mới lấy được tổng số post chính xác. Cho nên nếu Blog bạn đã có thẻ ngắt nhảy "" của mỗi bài đăng thì hãy làm còn không nếu vẫn áp dụng phải sửa lại bài đăng thêm dấu ngắt nhảy bên dưới vài dòng mở đầu bài đăng.

Các bước thực hiện

Bước 1: Vào chỉnh sửa Chủ đề chọn chuyển đến tiện ích Blog1

Bước 2: Tìm thẻ <b:includable id='main'> hoặc <b:includable id='main' var=top>

<b:includable id='main'>



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

  <nav class='page-numbers nav-pagination' id='blog-pager'/>

</b:if>

</b:includable>

Tiếp theo tìm đến element hiển thị ngày tháng thêm đoạn sau:

expr:data-date='data:post.date.iso8601'

Ví dụ:

<span class='post_date' expr:data-date='data:post.date.iso8601'><data:post.date/></span>

Nếu theme bạn không sử dụng element ngày tháng thì thêm đoạn code trên và thêm style="display:none"

<span class='post_date' expr:data-date='data:post.date.iso8601' style="display:none"><data:post.date/></span>

Bước 3: Chèn scritpt trước thẻ đóng </body>

Đoạn script lấy dữ liệu hiển thị phân trang chèn trước thẻ đóng </body>, yêu cầu theme có thư viện jquery

<script>

  var data={

    view:{

      isHomepage:&quot;<b:if cond='data:view.isHomepage'>true</b:if>&quot;,

      isSearch:&quot;<b:if cond='data:view.isSearch and !data:view.search.label and !data:view.search.query'>true</b:if>&quot;,

      isLabelSearch:&quot;<b:if cond='data:view.search.label'>true</b:if>&quot;,

      isSearchQuery:&quot;<b:if cond='data:view.search.query'>true</b:if>&quot;    

    },

    blog:{

      pageName:&quot;<b:if cond='data:blog.pageName'><data:blog.pageName/></b:if>&quot;,

    },messages:{

      home:&quot;<data:messages.home/>&quot;

    }

  }

//<![CDATA[

    var pages={

      num:{

        posts:10, // Hiển thị số bài mỗi trang

        pages:4, // Hiển thị số trang

        max:200 // Số bài viết tối đa có thể thay bằng số khác ví dụ 1000 nhưng lớn hơn tổng số bài đăng trên blog

      },element:{

        id:'#blog-pager', // id hiển thị phân trang

        parent:'.Blog .post', // class của mỗi post

        child:'.post_date' // class của ngày tháng trong post

      },messages:{

        next:'<svg height="18px" viewBox="0 0 608 1280" width="18px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g transform="translate(608 0) scale(-1 1)"><path d="M595 288q0 13-10 23L192 704l393 393q10 10 10 23t-10 23l-50 50q-10 10-23 10t-23-10L23 727q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23z"></path></g></svg>',

        prev:'<svg height="18px" viewBox="0 0 608 1280" width="18px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M595 288q0 13-10 23L192 704l393 393q10 10 10 23t-10 23l-50 50q-10 10-23 10t-23-10L23 727q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23z"></path></svg>',

        page:'Trang',

        nextpage:'Trang kế',

        prevpage:'Trang trước'

      }

    }

//]]></script>

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

  <script>//<![CDATA[

    var serviceUrl=''

    if(data.view.isHomepage=='true'||data.view.isSearch=='true'){serviceUrl='/search?max-results='+pages.num.max}

    if(data.view.isLabelSearch=='true'){serviceUrl='/search/label/'+data.blog.pageName+'?max-results='+pages.num.max}

    if(data.view.isSearchQuery=='true'){serviceUrl='/search?q='+data.blog.searchqueryescaped+'&max-results='+pages.num.max}

    $.get(serviceUrl,function(e){

      var a=$(e).find(pages.element.parent)

      if(a.length){

        var url=window.location.href,

        b=Math.ceil(a.length/10),d='',m='',n='',html='',q=0,s=0,t=1,page_start=0,page_end=0

        if(url.indexOf('&page=')!=-1){

          var u=url.substring(url.indexOf('&page=')+6,url.length),j=Number(u)

          if(!isNaN(j)){n=u

          }else if(u.indexOf('&')!=-1){n=u.substring(0,u.indexOf('&'))

          }else if(u.indexOf('#')!=-1){n=u.substring(0,u.indexOf('#'))}

        }else{n=1}

        var page_num=parseInt(pages.num.pages/2)

        if(page_num==pages.num.pages-page_num) pages.num.pages=page_num*2+1

        page_start=n-page_num

        if(page_start<1) page_start=1

        page_end=page_start+pages.num.pages-1

        if(page_end>b) page_end=b

        if(n>1){

          if(n==2){

            if(data.view.isSearch=='true'){

              html+='<a class="page-number" href='+data.blog.homepageUrl+' rel="prev" title="'+data.messages.home+'">'+pages.messages.prev+'</a>'

            }else if(data.view.isLabelSearch=='true'){

              html+='<a class="page-number" href="/search/label/'+data.blog.pageName+'?max-results='+pages.num.posts+'" rel="prev" title="'+pages.messages.prevpage+'">'+pages.messages.prev+'</a>'

            }else if(data.view.isSearchQuery=='true'){

              html+='<a class="page-number" href="/search?q='+data.blog.searchqueryescaped+'&max-results='+pages.num.posts+'" rel="prev" title="'+pages.messages.prevpage+'">'+pages.messages.prev+'</a>'

            }

          }else{

            t=(n*pages.num.posts-1)-(pages.num.posts*2)

            d=$(a[t]).find(pages.element.child).attr('data-date').replace('+','%2B')

            q=n-1

            s=q*pages.num.posts

            if(data.view.isSearch=='true'){

              html+='<a class="page-number" href="/search?updated-max='+d+'&max-results='+pages.num.posts+'&start='+s+'&page='+q+'" title="'+pages.messages.prevpage+'">'+pages.messages.prev+'</a>'

            }else if(data.view.isLabelSearch=='true'){

              html+='<a class="page-number" href="/search/label/'+data.blog.pageName+'?updated-max='+d+'&max-results='+pages.num.posts+'&start='+s+'&page='+q+'" title="'+pages.messages.prevpage+'">'+pages.messages.prev+'</a>'

            }else if(data.view.isSearchQuery=='true'){

              html+='<a class="page-number" href="/search?q='+data.blog.searchqueryescaped+'?updated-max='+d+'&max-results='+pages.num.posts+'&start='+s+'&page='+q+'" title="'+pages.messages.prevpage+'">'+pages.messages.prev+'</a>'

            }

          }

        }

        for(var g=page_start;g<=page_end;g++){

         s=(g-1)*pages.num.posts

         if(g==1&&n==1){

            if(data.view.isHomepage=='true'){

              html+='<a class="page-number current" href='+data.blog.homepageUrl+' title="'+pages.messages.page+' '+g+'">'+g+'</a>'

            }else if(data.view.isSearch=='true'){

              html+='<a class="page-number current" href='+data.blog.homepageUrl+' title="'+pages.messages.page+' '+g+'">'+g+'</a>'

            }else if(data.view.isLabelSearch=='true'){

              html+='<a class="page-number current" href="/search/label/'+data.blog.pageName+'?max-results='+pages.num.posts+'" title="'+pages.messages.page+' '+g+'">'+g+'</a>'

            }else if(data.view.isSearchQuery=='true'){

              html+='<a class="page-number current" href="/search?q='+data.blog.searchqueryescaped+'&max-results='+pages.num.posts+'" title="'+pages.messages.page+' '+g+'">'+g+'</a>'

            }

          }else if(g==1){

            if(data.view.isHomepage=='true'){

              html+='<a class="page-number" href='+data.blog.homepageUrl+' title="'+pages.messages.page+' '+g+'">'+g+'</a>'

            }else if(data.view.isSearch=='true'){

              html+='<a class="page-number" href='+data.blog.homepageUrl+' title="'+pages.messages.page+' '+g+'">'+g+'</a>'

            }else if(data.view.isLabelSearch=='true'){

              html+='<a class="page-number" href="/search/label/'+data.blog.pageName+'?max-results='+pages.num.posts+'" title="'+pages.messages.page+' '+g+'">'+g+'</a>'

            }else if(data.view.isSearchQuery=='true'){

              html+='<a class="page-number" href="/search?q='+data.blog.searchqueryescaped+'&max-results='+pages.num.posts+'" title="'+pages.messages.page+' '+g+'">'+g+'</a>'

            }

          }else if(g==n){

            var f=g-1

            t=(f*pages.num.posts-1)

            d=$(a[t]).find(pages.element.child).attr('data-date').replace('+','%2B')

            if(data.view.isHomepage=='true'){

              html+='<a class="page-number current" href="/search?updated-max='+d+'&start='+s+'&max-results='+pages.num.posts+'&page='+g+'" title="'+pages.messages.page+' '+g+'">'+g+'</a>'

            }else if(data.view.isSearch=='true'){

              html+='<a class="page-number current" href="/search?updated-max='+d+'&max-results='+pages.num.posts+'&start='+s+'&page='+g+'" title="'+pages.messages.page+' '+g+'">'+g+'</a>'

            }else if(data.view.isLabelSearch=='true'){

              html+='<a class="page-number current" href="/search/label/'+data.blog.pageName+'?updated-max='+d+'&max-results='+pages.num.posts+'&start='+s+'&page='+q+'" title="Trang '+g+'">'+g+'</a>'

            }else if(data.view.isSearchQuery=='true'){

              html+='<a class="page-number current" href="/search?q='+data.blog.searchqueryescaped+'&updated-max='+d+'&max-results='+pages.num.posts+'&start='+s+'&page='+q+'" title="'+pages.messages.page+' '+g+'">'+g+'</a>'

            }

          }else{

            var f=g-1

            t=(f*pages.num.posts-1)

            d=$(a[t]).find(pages.element.child).attr('data-date').replace('+','%2B')

            if(data.view.isHomepage=='true'){

              html+='<a class="page-number" href="/search?updated-max='+d+'&max-results='+pages.num.posts+'&start='+s+'&page='+g+'" title="'+pages.messages.page+' '+g+'">'+g+'</a>'

            }else if(data.view.isSearch=='true'){

              html+='<a class="page-number" href="/search?updated-max='+d+'&max-results='+pages.num.posts+'&start='+s+'&page='+g+'" title="'+pages.messages.page+' '+g+'">'+g+'</a>'

            }else if(data.view.isLabelSearch=='true'){

              html+='<a class="page-number" href="/search/label/'+data.blog.pageName+'?updated-max='+d+'&max-results='+pages.num.posts+'&start='+s+'&page='+g+'" title="'+pages.messages.page+' '+g+'">'+g+'</a>'

            }else if(data.view.isSearchQuery=='true'){

              html+='<a class="page-number" href="/search?q='+data.blog.searchqueryescaped+'&updated-max='+d+'&max-results='+pages.num.posts+'&start='+s+'&page='+g+'" title="'+pages.messages.page+' '+g+'">'+g+'</a>'

            }

          }

        }

        if(n<b){

          q=parseInt(n)+1

          t=(n*pages.num.posts-1)

          s=q*pages.num.posts

          d=$(a[t]).find(pages.element.child).attr('data-date').replace('+','%2B')

          if(data.view.isHomepage=='true'){

            html+='<a class="page-number" href="/search?updated-max='+d+'&max-results='+pages.num.posts+'&start='+s+'&page='+q+'" rel="next" title="'+pages.messages.nextpage+'">'+pages.messages.next+'</a>'

          }else if(data.view.isSearch=='true'){

            html+='<a class="page-number" href="/search?updated-max='+d+'&max-results='+pages.num.posts+'&start='+s+'&page='+q+'" rel="next" title="'+pages.messages.nextpage+'">'+pages.messages.next+'</a>'

          }else if(data.view.isLabelSearch=='true'){

            html+='<a class="page-number" href="/search/label/'+data.blog.pageName+'?updated-max='+d+'&max-results='+pages.num.posts+'&start='+s+'&page='+q+'" rel="next" title="'+pages.messages.nextpage+'">'+pages.messages.next+'</a>'

          }else if(data.view.isSearchQuery=='true'){

            html+='<a class="page-number" href="/search?q='+data.blog.searchqueryescaped+'&updated-max='+d+'&max-results='+pages.num.posts+'&start='+s+'&page='+q+'" rel="next" title="'+pages.messages.nextpage+'">'+pages.messages.next+'</a>'

          }

        }

        var page_=document.querySelector(pages.element.id)

        if(page_){page_.innerHTML=html}

      }

    })

  //]]></script>

</b:if>

Các bạn cài đặt theo chú thích trong script mình ghi bên trong, giao diện hiển thị phân trang các bạn tự design hoặc tham khảo bài viết trước của mình.

Bài cùng chuyên mục

Bài cùng tác giả