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

Hướng dẫn thêm phân trang bằng số thứ tự vào Blogger bằng phương pháp ajax get url - Blogger Page Navigation và cách cấu hình hiển thị số bài đăng của mỗi trang

Ư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

blogger page navigation

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

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

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 "<!--more-->" 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 "<!--more-->" 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.

Thêm đánh giá

Trở thành người đầu tiên bình luận cho bài viết này!