[Blogger] Hiểu và tích hợp phân trang tải thêm Ajax khi cuộn trang

Khi lướt web nếu như bạn chịu khó để ý thì các trang lớn như facebook, youtube, twitter,...hoặc một số trang báo mạng đều sử dụng phương thức tải thêm bài viết khi cuộn trang. Điều này sẽ giúp người dùng tránh phải chuyển trang nhiều lần để tìm thêm bài viết. Với blogspot ta cũng có thể làm điều đó, trong bài viết này tôi sẽ phân tích cho bạn hiểu cách tích hợp phân trang tải thêm bài viết bằng ajax

Để làm được điều này bắt buộc template của bạn phải tích hợp phân trang mặc định của blogger, này hầu hết template đều có nhưng chưa chắc bạn đã biết nó nằm ở phương trời nào

* Với widget Blog1 v2

Phân trang được định nghĩa bởi 4 thẻ b:includable

1. <b:includable id='homePageLink'/>

<b:includable id='homePageLink'>
    <a class='home-link' expr:href='data:blog.homepageUrl'>
    <data:messages.home/>
  </a>
</b:includable>

2. <b:includable id='nextPageLink'/>

<b:includable id='nextPageLink'>
    <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:messages.olderPosts'>
    <data:messages.olderPosts/>
  </a>
</b:includable>

3. <b:includable id='postPagination'/>

<b:includable id='postPagination'>
    <div class='blog-pager container' id='blog-pager'>
        <b:include cond='data:newerPageUrl' name='previousPageLink' />
        <b:include cond='data:olderPageUrl' name='nextPageLink' />
        <b:include cond='data:view.url != data:blog.homepageUrl' name='homePageLink' />
    </div>
</b:includable>

4. <b:includable id='previousPageLink'/>

<b:includable id='previousPageLink'>
    <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:messages.newerPosts'>
    <data:messages.newerPosts/>
  </a>
</b:includable>

Sau khi định nghĩa xong các thẻ, ta sẽ hiển thị nó. Phân trang chỉ xảy ra ở trang index nên tôi sẽ viết tiếp nội dung vào thẻ <b:includable id='main' var='this'> (một số sẽ là <b:includable id='main'>) như sau

<b:include cond='data:view.isMultipleItems' name='postPagination'/>

Vị trí đặt (luôn bên dưới div có class là blog-posts và không nằm trong vòng lặp b:loop)

* Với widget Blog1 v1

Định nghĩa thẻ <b:includable id='nextprev'>

<b:includable id='nextprev'>
    <div class='blog-pager' id='blog-pager'>
        <b:if cond='data:newerPageUrl'>
            <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
        </b:if>

        <b:if cond='data:olderPageUrl'>
            <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
        </b:if>

        <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

        <b:if cond='data:mobileLinkUrl'>
            <div class='blog-mobile-link'>
                <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
            </div>
        </b:if>

    </div>
    <div class='clear' />
</b:includable>

Gọi trong <b:includable id='main' var='top'>

<b:include name='nextprev'/>

F12 kiểm tra phần tử để tìm class cha trùng lặp trong widget Blog1

Ví dụ của tôi là .post-outer-container

Tích hợp JS Ajax Load More, code trước </body>

<b:if cond='data:view.isMultipleItems'>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
    var o = "",
        n = null,
        a = false; // false tức vẫn còn bài đăng
    o = $("a.blog-pager-older-link").attr("href") // lấy href từ class blog-pager-older-link để get dữ liệu
    if (o) { // nếu còn bài đăng thì bắt đầu làm

        //tạo 1 div loading và chèn trước div phân trang mặc định
        n = $('<div class="ajax-more" style="display:none"><center><div class="spinner"></div></center></div>').insertBefore($("#blog-pager"));
        $("#blog-pager").hide() // ẩn phân trang mặc định

        $(window).scroll(function() { // bắt sự kiện cuộn trang
            var i = $(".post-outer-container:last").offset().top, // lấy tọa độ của bài đăng cuối cùng
                t = $(".post-outer-container:last").outerHeight(), // lấy chiều cao của bài đăng cuối cùng
                d = $(window).height(); // lấy chiều cao của cửa sổ
            if ($(this).scrollTop() > i + t - d) { // nếu cuộn chuột vượt quá bài cuối cùng thì bắt đầu get dữ liệu
                if (!a) { // nếu còn bài đăng thì tiếp tục làm
                    a = true; // gắn cờ nếu hết bài đăng
                    if (o) { // nếu còn bài đăng thì tiếp tục làm
                        n.show(); // hiện spinner loading
                        $.ajax(o, { // get dữ liệu từ href với dữ liệu trả về dạng HTML
                            dataType: "html"
                        }).done(function(i) {
                            var t = $("<div></div>").append(i.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "")), // tạo 1 div append dữ liệu html vừa thu được và loại bỏ các kí tự không cần thiết
                                s = t.find("div.blog-posts").children(); // tìm các thành phần con của div.blog-posts
                            $("div.blog-posts").append(s); // append các thành phần đó vào cuối div.blog-posts
                            if (t.find("a.blog-pager-older-link")) { // nếu vẫn còn bài đăng
                                o = t.find("a.blog-pager-older-link").attr("href") // tiếp tục gán href để get dữ liệu
                            } else {
                                o = ""; // hết bài đăng thì gán lại thành rỗng để kết thúc vòng lặp
                            }
                            n.hide(); // ẩn div loadding
                            a = false; // nếu còn bài đăng thì gán lại thành false
                        })
                    } else {
                        n.hide() // ẩn div loadding
                    }
                }
            }
        });
    }
})
//]]></script>
</b:if> 

Viết CSS cho spinner

.ajax-more{clear:both}
.spinner{border:6px solid #f3f3f3;border-radius:50%;border-top:6px solid #3d4042;width:25px;height:25px;-webkit-animation:spin 1s infinite;animation:spin 1s infinite}
@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

Nếu bạn muốn thay đổi thành ảnh thì sửa code js đoạn n = $('<div class="ajax-more" style="display:none"><center><div class="spinner"></div></center></div>').insertBefore($("#blog-pager"));

Giờ thì lưu mẫu lại và tận hưởng thành quả thôi.

Như vậy qua bài viết này bạn đã biết được cách tích hợp phân trang mặc định của blogger áp dụng cho cả widget v1 và v2, và sử dụng jQuery ajax để tạo phân trang tải thêm bài viết khi cuộn trang mà không cần tải lại trang

Để lại bình luận nếu bạn gặp khó khăn và chúc bạn thành công !