Recent comments with load more button sử dụng dữ liệu lấy từ feed comments kết hợp với ajax giúp bạn có thể tải thêm các nhận xét cũ mà không cần tải lại trang. Đây là 1 thủ thuật khá hay giúp bạn có thể dễ dàng kiểm soát bình luận trên trang của mình mà không cần vào trang quản trị
Xem demo
Yêu cầu template đã tích hợp jQuery, bạn có thể đặt code ở bất kì vị trí nào nằm trong cặp thẻ <body>...</body>
Code HTML
<div id="rc">
<h3>New feedbacks</h3>
<div class="_rc"></div>
<div class="_rc-more"><a class="rc-load">Load more</a>
<div class="loader"><span></span><span></span><span></span></div>
</div>
</div>
Code CSS
.rc-content {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
margin: 0 0 .7em;
}
.rc-img {
max-width: 80px;
margin: 0 .5em 0 0;
}
.rc-img img {
height: 40px;
width: 40px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
.rc-user a {
color: #000;
font-weight: bold;
text-decoration: none
}
.rc-user,
.rc-summary {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
}
._rc-more .loader {
display: none
}
.rc-load {
cursor: pointer;
padding: 3px 15px 6px;
border: 1px solid #ddd;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px
}
.rc-load:hover {
background: #f5f5f5
}
.loader span {
margin: 0 3px 0 0;
display: inline-block;
width: 20px;
height: 20px;
background: #000;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
-webkit-animation: loader .8s linear infinite alternate;
-moz-animation: loader .8s linear infinite alternate;
-o-animation: loader .8s linear infinite alternate;
animation: loader .8s linear infinite alternate
}
.loader span:nth-of-type(1) {
-webkit-animation-delay: -.8s;
-moz-animation-delay: -.8s;
-o-animation-delay: -.8s;
animation-delay: -.8s
}
.loader span:nth-of-type(2) {
-webkit-animation-delay: -.5s;
-moz-animation-delay: -.5s;
-o-animation-delay: -.5s;
animation-delay: -.5s
}
.loader span:nth-of-type(3) {
-webkit-animation-delay: -.2s;
-moz-animation-delay: -.2s;
-o-animation-delay: -.2s;
animation-delay: -.2s
}
@-webkit-keyframes loader {
from {
-webkit-transform: scale(0);
transform: scale(0)
}
to {
-webkit-transform: scale(1);
transform: scale(1)
}
}
@-moz-keyframes loader {
from {
-moz-transform: scale(0);
transform: scale(0)
}
to {
-moz-transform: scale(1);
transform: scale(1)
}
}
@-o-keyframes loader {
from {
-o-transform: scale(0);
transform: scale(0)
}
to {
-o-transform: scale(1);
transform: scale(1)
}
}
@keyframes loader {
from {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
transform: scale(0)
}
to {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
}
Code JS
<script>//<![CDATA[
// Recent comments with ajax load more button by Hung1001
var numComments = 10, // number of comments
avatarSize = 36, // max avatarSize
characters = 36; // number of characters
var _countC = 0,_totalC;
function loadComments(e) {
for (var a = 0; a < e.feed.entry.length; a++) {
for (var t = 0; t < e.feed.entry[a].link.length; t++)
if ("alternate" == e.feed.entry[a].link[t].rel) {
var r = e.feed.entry[a].link[t].href;
break
} var n = e.feed.entry[a].author[0].gd$image.src;
if ("https://img1.blogblog.com/img/b16-rounded.gif" !== n && "https://img1.blogblog.com/img/blank.gif" !== n) var s = e.feed.entry[a].author[0].gd$image.src.replace("s512-c", "s" + avatarSize + "-c");
else s = "//lh4.ggpht.com/-ntdKjBQECcg/W1anAMHdApI/AAAAAAAAHAU/33XLL1zWB48qhyaufndHFjWU5VRkFUrHACLcBGAs/s" + avatarSize + "-c/anonymous.png";
if (e.feed.entry[a].author[0].uri) var o = e.feed.entry[a].author[0].uri.$t;
else o = "javascript:void(0)";
var c = e.feed.entry[a].author[0].name.$t,
l = e.feed.entry[a].summary.$t.replace(/(<([^>]+)>)/gi, ""),
i = l;
if (l.length > characters) {
var d = l.substring(0, characters - 3),
u = d.lastIndexOf(" ");
l = d.substring(0, u) + " ..."
}
$("._rc").append('<div class="rc-content"><div class="rc-img"><a href=' + o + "><img src=" + s + ' /></a></div><div class="rc-main"><span class="rc-user"><a href=' + r + ">" + c + '</a></span><span class="rc-summary" title="' + i + '">' + l + "</span></div></div>")
}
}
$(function() {
$.ajax({
url: "/feeds/comments/summary",
type: "get",
data: {
alt: "json",
"max-results": numComments
},
dataType: "jsonp",
jsonpCallback: "loadComments",
success: function(e) {
_totalC = e.feed.openSearch$totalResults.$t;
_countC += e.feed.entry.length;
_totalC <= numComments && $(".rc-load").hide();
$(".rc-load").on("click", function(e) {
e.preventDefault();
var a = $(this);
_countC < _totalC && ($("._rc-more .loader").show(), a.hide(), setTimeout(function() {
$.ajax({
url: "/feeds/comments/summary",
type: "get",
data: {
alt: "json",
"max-results": numComments,
"start-index": _countC + 1
},
dataType: "jsonp",
jsonpCallback: "loadComments",
success: function(e) {
a.show();
$("._rc-more .loader").hide();
_countC += e.feed.entry.length;
_countC == _totalC && a.html("All comments have been loaded !")
}
})
}, 1000))
})
}
})
});
//]]></script>Lưu mẫu và kiểm tra
Tùy chỉnh: bạn tự viết css theo ý thích, nếu có id class hoặc biến trong script nào trùng vui lòng đổi tên để code hoạt động đúng
Chúc thành công !
1. Không vi phạm luật pháp nước CHXHCN Việt Nam
2. Không vi phạm thuần phong mỹ tục Việt Nam
3. Không bàn luận vấn đề liên quan đến tôn giáo, chính trị
4. Không đả kích, chửi bới hay đưa ra những lời nói không phù hợp với mục tiêu của website
5. Không bình luận với mục đích quảng cáo, trao đổi, mua bán
6. Khuyến khích sử dụng Tiếng Việt có dấu, hạn chế sử dụng tiếng lóng, viết tắt
7. Khi cần sự trợ giúp, vui lòng miêu tả chi tiết lỗi và để lại link đính kèm, tránh nói chung chung gây mất thời gian cho đôi bên
Mình đã áp dụng vào blog của mình nhưng khi thiết lập hiện 40 comments thì nó chỉ hiện 12 và có sự trùng lặp nhau (chú ý nội dung dòng 4-5-6 trùng với dòng 1-2-3):
Nhờ bác vào đây kiểm tra xem nó bị gì ạ:
https://www.relaxingworld.org/p/comments.html
Mình chỉ thay thay đổi style CSS, còn code giữa nguyên gốc của bác!
Đã thử đổi tên loadComments2 / _rc nhưng không có gì xảy ra...
Giờ mình đang thử đổi tên từng cái đây nhưng không ăn thua... Chỉnh CSS thì mình còn biết đường, chứ đụng vào mấy cái javascript thì mù tịt bác ạ!😃