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
vào
22 thg 9, 2018
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 đó:
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:
Trong đoạn script ở trên có hai chỗ bạn cần lưu ý
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>
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.
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!!!
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
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
