Bài 5 Thêm nút loadmore

[blog]
Tiếp theo chúng ta thêm nút xem thêm loadmore bằng Ajax nhé, xem thêm bài viết mà không cần tải lại trang.

Đầu tiên các bạn thêm CSS vào trong thẻ <b:skin>

/* Loadmore css */

#blog-pager{float:left;width:100%;text-align:center;overflow:hidden;margin:30px 0;padding:0 15px}

.load-more{position:relative;display:inline-block;height:50px;background-color:#fc5356;font-size:15px;color:#fff;font-weight:500;line-height:50px;cursor:pointer;padding:0 40px;margin:0;border-bottom:2px solid rgba(0,0,0,0.1);border-radius:6px}

.load-more:hover{background-color:#fc5356}

.no-more.load-more{background-color:#e0e0e0;color:#000}

#blog-pager .loading,#blog-pager .no-more{display:none}

#blog-pager .no-more.show{display:inline-block}

.loader{position:relative;overflow:hidden;display:block;height:50px;margin:0}

.loader:after{content:'';position:absolute;top:50%;left:50%;width:28px;height:28px;margin:-16px 0 0 -16px;border:2px solid #fc5356;border-top-color:#e1e8ed;border-right-color:#e1e8ed;border-radius:100%;animation:spinner 1s infinite linear;transform-origin:center}

@keyframes spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}

.post-animated{-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-fill-mode:both;animation-fill-mode:both}

@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,5px,0)}to{opacity:1;transform:translate3d(0,0,0)}}

.post-fadeInUp{animation-name:fadeInUp}

Tiếp theo các bạn tìm postPagination ở vị trí thứ 2 như hình và xóa hết nội dung bên trong nó sửa lại như hình sau

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

    <span class='blog-pager-older-link load-more' expr:data-load='data:olderPageUrl' id='load-more-link'>Xem thêm</span>

    <span class='loading'><span class='loader' /></span>

    <span class='no-more load-more'>Đã xem hết</span>

</b:if>

Tiếp theo thêm Ajax, các bạn copy dán trước </boby>

<script>

    //<![CDATA[

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

        $("#load-more-link").each(function() {

            var e = $(this).data("load");

            e && $("#load-more-link").show(), $("#load-more-link").on("click", function(t) {

                $("#load-more-link").hide(), $.ajax({

                    url: e,

                    success: function(t) {

                        var o = $(t).find(".Blog .blog-posts");

                        o.find(".col-sm-6").addClass("post-animated post-fadeInUp"), $(".Blog .blog-posts").append(o.html()), (e = $(t).find("#load-more-link").data("load")) ? $("#load-more-link").show() : ($("#load-more-link").hide(), $("#blog-pager .no-more").addClass("show"))

                    },

                    beforeSend: function() {

                        $("#blog-pager .loading").show()

                    },

                    complete: function() {

                        $("#blog-pager .loading").hide()

                    }

                }), t.preventDefault()

            })

        })

    })

    //]]>

</script>

Các bạn lưu lại và kiểm tra kết quả.

Để nút loadmore hoạt động ở các trang còn lại như search, label các bạn sửa như sau.

Ví dụ trang /search?max-results=6
Trang Label các bạn tìm html của tiện ích Label và sửa link như sau

      <a class='label-name' expr:href='data:label.url + "?max-results=6"'>

        <data:label.name/>

        <b:if cond='data:this.showFreqNumbers'>

          <span class='label-count'><data:label.count/></span>

        </b:if>

      </a>

Sau khi thêm ?max-results=6 như vậy thì nút tiện ích mới hoạt động nhé. Giống như phân trang vậy đó.

Tương tự các liên kết label khác các bạn thêm ?max-results=6 phí sau

ví dụ /search/label/tin-tuc?max-results=6

[/blog]