Tạo phân trang tải thêm các bài viết khi scroll và click theo kích thước màn hình

Phân trang tự động tải thêm các bài viết cho Blog không còn mới mẻ gì, hiện nay rất nhiều Blog đang áp dụng. Ưu điểm của phương pháp này không phải chuyển hướng trang sang một trang khác do đó rút ngắn được thời gian chờ tải. Có hai cách tự động tải thêm các bài viết đó là khi kéo thanh cuộn xuống dưới hoặc khi click vào button.

Tùy theo thiết kế của mỗi Blog mà áp dụng theo mỗi cách khác nhau hoặc có thể kết hợp cả hai cách theo kích thước màn hình. Lấy ví dụ với bố cục trang như sau:

Trên màn hình có kích thước lớn hơn 800px

A    B
C

Trên màn hình có kích thước bé hơn 800px

A
B
C

Trong đó:

• A: Bố cục bên trái hiển thị các bài viết
• B: Bố cục bên phải hiển thị các tiện ích
• C: Chân trang

Như vậy khi màn hình có kích thước bé hơn 800px thì B sẽ nằm dưới A, lúc này cần sử dụng button lick tải thêm các bài viết thay vì tự động khi kéo thanh cuộn xuống chân trang. Phương pháp làm như sau:

Trong chỉnh sửa HTML của Chủ đề chọn chuyển đến tiện ích Blog1, tại đây bạn kiểm tra widget có version bao nhiêu? Nếu là version='1' thì tìm cặp thẻ tag <b:includable id='nextprev'>...</b:includable>  còn version='2' thì tìm cặp thẻ tag <b:includable id='postPagination'>...</b:includable>

Các bạn mở rộng thẻ tag này ra thay toàn bộ nội dung bên trong như sau:

Copy

    <div class='blog-pager hidden'>

      <a class='older-link' expr:href='data:olderPageUrl' expr:title='data:messages.loadMorePosts'></a>

    </div>

    <script>

     var loadposts_message = "<data:messages.loadMorePosts/>";

     //<![CDATA[

     $(window).on('load', function() {

       var mq = window.matchMedia('(max-width: 800px)')

       if (mq.matches) {

         ! function(i) {

           var a = "",

             o = null,

             n = ".blog-posts",

             d = !1,

             t = (i(window), i(document), /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi);

           function p() {

             d || (d = !0, a ? (o.find('.paper-spinner').addClass('spinner').addClass('load'),o.find('.button').addClass('hidden'), i.ajax(a, {

               dataType: "html"

             }).done(function(e) {

               var p = i("<div></div>").append(e.replace(t, "")),

                 r = p.find("a.older-link");

               r ? a = r.attr("href") : (a = "", o.addClass('hidden'))

               var s, l = p.find(n).children('.post')

               i(n).append(l), o.find('.paper-spinner').removeClass('spinner').removeClass('load'),o.find('.button').removeClass('hidden'), d = !1

             })) : o.addClass('hidden'))

           }

           i(document).ready(function() {

             if ("item" != _WidgetManager._GetAllData().blog.pageType && (a = i("a.older-link").attr("href"))) {

               var n = i('<div class="paper-spinner"></div><button class="button">'+ loadposts_message +'</button>')

               n.click(p);

               (o = i('<div id="loadposts"></div>')).append(n), o.append(d), o.insertBefore(i(".blog-pager"))

             }

           })

         }(jQuery)

       } else {

         (function(a) {

           function h() {

             g || (g = !0, d ? (b.find("a").hide(), b.find(".paper-spinner").addClass('spinner').addClass('load'), a.ajax(d, {

               dataType: "html"

             }).done(function(c) {

               var c = a("<div></div>").append(c.replace(j, "")),

                 e = c.find("a.older-link");

               e ? d = e.attr("href") : (d = "", b.addClass('hidden'))

               c = c.find(i).children()

               a(i).append(c);

               b.find(".paper-spinner").removeClass('spinner').removeClass('load')

               b.find("a").show()

               g = !1

             })) : b.addClass('hidden'))

           }

           function k() {

             var a = Math.max(f.height(), l.height(), document.documentElement.clientHeight),

               b = f.scrollTop() + f.height()

             250 > a - b && h()

           }

           var d = "",

             b = null,

             i = ".blog-posts",

             g = !1,

             f = a(window),

             l = a(document),

             j = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;

           a(document).ready(function() {

             if ("item" != _WidgetManager._GetAllData().blog.pageType && (d = a("a.older-link").attr("href"))) {

               var e = a('<div class="paper-spinner">')

               f.scroll(k)

               b = a('<div id="loading"></div>')

               b.append(e)

               b.insertBefore(a(".blog-pager"))

             }

           })

         })(jQuery)

       }

     })

    //]]></script>

Trong đoạn script ở trên có hai chỗ bạn cần lưu ý

• 800px: Khi A và B được thiết lập rộng 100%
• 250: Độ cao tính từ trang trang trở lên

Tùy vào mỗi template có thiết kế khác nhau nên bạn lưu ý thay đổi cho phù hợp, tiếp theo thêm css chèn trước thẻ đóng ]]></b:skin>

Copy

#loading {

    position: relative;

    text-align: center;

    clear: both;

}

#loadposts .button {

    background: transparent;

    border: 0;

    outline: 0;

    padding: 0;

    text-transform: uppercase;

    color: rgb(136,136,136);

    cursor: pointer;

}

#loadposts {

    float: left;

    margin-top: 15px;

    clear: both;

    position: relative;

    width: 100%;

}

.hidden {

    display: none;

}

#loading .paper-spinner.load, #loadposts .paper-spinner.load {

    height: 150px;

}

#loading .spinner:before, #loadposts .spinner:before {

    content: '';

    box-sizing: border-box;

    position: absolute;

    top: 42%;

    left: 47%;

    width: 36px;

    height: 36px;

    border-radius: 50%;

    border: 3px solid hsl(0,0%,53.3%);

    border-right-color: transparent;

    animation: spinner .9s linear infinite;

    -webkit-animation: spinner .9s ease-in-out infinite;

}

@keyframes spinner {

  to {

  transform:rotate(360deg);

}

}

@-webkit-keyframes spinner {

  to {

    -webkit-transform:rotate(360deg);

  }

}

Lưu ý: Đoạn script ở trên có sử dụng jquery nên cần link.jquery.js chèn trước thẻ đóng </head>, bạn kiểm tra nếu chưa có thì thêm vào.

Copy

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

Trong trường hợp nếu có rồi mà version cũ cũng được không nhất thiết phải là 3.3.1. Chấm hết bài!!!

Nội dung chính