Mặc định, phần comment của blogger chỉ có 1 cấp mà thôi. Có nghĩa là cho dù bạn reply bao nhiêu lần đi nữa thì trên phần comment cũng chỉ hiển thị có hai cấp mà thôi. Điều này hơi có bất tiện là nếu có ai đó phản hồi lên blog của bạn, rồi bạn trả lời lại và cũng chính người đó phản hồi tiếp sẽ không thể phân biệt được cấp comment nào vừa trao đổi.
Hoặc như blog của các bạn sử dựng các mẫu theme bên ngoài, nhưng có thiết kế hay phân cấp comment hơi lộn xộn và khó nhìn thì bạn cũng có thể tham khảo bài này để nâng cấp lên nhé
{tocify} $title={Nội Dung Bài}
Cách làm như sau với 3 bước chính
Bước 1: Mở thêm một thể mới b:includable trong widget blog1
Thẻ này nằm trong thẻ b:includable tên <b:includable id='threadedComments' var='post'>, các bạn thay thế bằng thẻ
Bước 3: Chèn script trước thẻ đóng </body>
Đoạn script này mình viết bằng jquery cho nên theme cần có thư viện jquery
-Phần css cho giao diện bình luận, bạn tự design theo sở thích của bạn, lưu ý thêm một class .hidden với display:none; nha các bạn ( phần dành cho nâng cao nên bạn có thể bỏ qua nếu không rành nhé)
Hoặc như blog của các bạn sử dựng các mẫu theme bên ngoài, nhưng có thiết kế hay phân cấp comment hơi lộn xộn và khó nhìn thì bạn cũng có thể tham khảo bài này để nâng cấp lên nhé
{tocify} $title={Nội Dung Bài}
Hình mẫu khung comment 3 cấp khác nhau
 |
| Mẫu khung comment đã phân thành 3 cấp rõ ràng so với 2 cấp mặc định |
Thực hiện
Cách làm như sau với 3 bước chính
Bước 1: Mở thêm một thể mới b:includable trong widget blog1
<b:includable id='commentsContent' var='post'>Bước 2: Tìm và thay thế thẻ
<div class='comment-thread toplevel-thread'>
<ol id='top-ra'>
<b:loop values='data:post.comments' var='firstlevel'>
<b:if cond='!data:firstlevel.inReplyTo'>
<li class='comment hidden' expr:id='"c" + data:firstlevel.id'>
<div class='avatar-image-container'>
<b:if cond='data:firstlevel.authorPhoto.url'>
<img expr:alt='data:firstlevel.author' expr:src='resizeImage(data:firstlevel.authorPhoto.url, 40, "1:1")'/>
<b:else/>
<img expr:alt='data:firstlevel.author' src='https://lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SA=s40'/>
</b:if>
</div>
<div class='comment-block'>
<div class='comment-header'>
<cite class='user'><a expr:href='data:firstlevel.authorUrl' expr:title='data:firstlevel.author' rel='noopener nofollow' target='_blank'><data:firstlevel.author/></a></cite>
<span class='datetime secondary-text'>
<a expr:href='data:firstlevel.url' expr:title='data:firstlevel.timestamp' rel='nofollow' target='_self'><data:firstlevel.timestamp/></a>
</span>
</div>
<p class='comment-content'><data:firstlevel.body/></p>
<span class='comment-actions secondary-text'>
<a class='comment-reply' expr:data-comment-id='data:firstlevel.id' expr:href='"#" + data:firstlevel.id' rel='nofollow' target='_self' title='Trả lời'>Trả lời</a>
<span expr:class='"item-control " + data:firstlevel.adminClass'><a expr:href='data:firstlevel.deleteUrl' expr:title='data:messages.deleteComment' rel='nofollow' target='_self'>Xóa</a></span>
</span>
</div>
<div class='comment-replies'>
<div class='comment-thread secondlevel-thread' expr:id='"c" + data:firstlevel.id + "-rt"'>
<ol class='thread-chrome thread-expanded' expr:id='"c" + data:firstlevel.id + "-ra"'>
<b:loop values='data:post.comments' var='secondlevel'>
<b:if cond='data:secondlevel.inReplyTo == data:firstlevel.id'>
<li class='comment' expr:id='"c" + data:secondlevel.id'>
<div class='avatar-image-container'>
<b:if cond='data:secondlevel.authorPhoto.url'>
<img expr:alt='data:secondlevel.author' expr:src='resizeImage(data:secondlevel.authorPhoto.url, 35, "1:1")'/>
<b:else/>
<img expr:alt='data:secondlevel.author' src='https://lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SA=s35'/>
</b:if>
</div>
<div class='comment-block'>
<div class='comment-header'>
<cite class='user'><a expr:href='data:secondlevel.authorUrl' expr:title='data:secondlevel.author' rel='noopener nofollow' target='_blank'><data:secondlevel.author/></a></cite>
<span class='datetime secondary-text'><a expr:href='data:secondlevel.url' expr:title='data:secondlevel.timestamp' rel='nofollow' target='_self'><data:secondlevel.timestamp/></a></span>
</div>
<p class='comment-content'><data:secondlevel.body/></p>
<span class='comment-actions secondary-text'>
<a class='comment-reply' expr:data-comment-id='data:secondlevel.id' expr:href='"#" + data:secondlevel.id' rel='nofollow' target='_self' title='Trả lời'>Trả lời</a>
<span expr:class='"item-control " + data:secondlevel.adminClass'><a expr:href='data:secondlevel.deleteUrl' expr:title='data:messages.deleteComment' rel='nofollow' target='_self'>Xóa</a></span>
</span>
</div>
<div class='comment-replies'>
<div class='comment-thread thirdlevel-thread' expr:id='"c" + data:secondlevel.id + "-rt"'>
<ol class='thread-chrome thread-expanded' expr:id='"c" + data:secondlevel.id + "-ra"'>
<b:loop values='data:post.comments' var='thirdlevel'>
<b:if cond='data:thirdlevel.inReplyTo == data:secondlevel.id'>
<li class='comment' expr:id='"c" + data:thirdlevel.id'>
<div class='avatar-image-container'>
<b:if cond='data:thirdlevel.authorPhoto.url'>
<img expr:alt='data:thirdlevel.author' expr:src='resizeImage(data:thirdlevel.authorPhoto.url, 35, "1:1")'/>
<b:else/>
<img expr:alt='data:thirdlevel.author' src='https://lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SA=s35'/>
</b:if>
</div>
<div class='comment-block'>
<div class='comment-header'>
<cite class='user'><a expr:href='data:thirdlevel.authorUrl' expr:title='data:thirdlevel.author' rel='noopener nofollow' target='_blank'><data:thirdlevel.author/></a></cite>
<span class='datetime secondary-text'><a expr:href='data:thirdlevel.url' expr:title='data:thirdlevel.timestamp' rel='nofollow' target='_self'><data:thirdlevel.timestamp/></a></span>
</div>
<p class='comment-content'><data:thirdlevel.body/></p>
<span class='comment-actions secondary-text'>
<span expr:class='"item-control " + data:thirdlevel.adminClass'><a expr:href='data:thirdlevel.deleteUrl' expr:title='data:messages.deleteComment' rel='nofollow' target='_self'>Xóa</a></span>
</span>
</div>
</li>
</b:if>
</b:loop>
</ol>
</div>
</div>
<div class='comment-replybox-single' expr:id='"c" + data:secondlevel.id + "-ce"'/>
</li>
</b:if>
</b:loop>
</ol>
</div>
</div>
<div class='comment-replybox-single' expr:id='"c" + data:firstlevel.id + "-ce"'/>
</li>
</b:if>
</b:loop>
</ol>
<div class='comment-replybox-thread' id='top-ce'/>
<div class='loadmore hidden' expr:data-post-id='data:post.id'><a expr:title='data:messages.showMore' href='#loadmore' rel='nofollow' target='_self'><data:messages.showMore/></a></div>
<div class='continue' id='top-continue'><a class='comment-reply' expr:href='data:post.commentFormIframeSrc' rel='nofollow' target='_self' title='Thêm nhận xét'>Thêm nhận xét</a></div>
</div>
</b:includable>
<data:post.commentHtml/>
Thẻ này nằm trong thẻ b:includable tên <b:includable id='threadedComments' var='post'>, các bạn thay thế bằng thẻ
<b:include data='post' name='commentsContent'/>
Bước 3: Chèn script trước thẻ đóng </body>
Đoạn script này mình viết bằng jquery cho nên theme cần có thư viện jquery
<script>//<![CDATA[Đến đây bạn chỉ việc lưu lại là xong nhé
$(function() {
var url = window.location.href,
str = $('.toplevel-thread>ol>li'),
l = '',
id = '',
li = '',
m = 10, // Số bình luận hiển thị chính
n = str.length,
k = 0,
p = 0
// Gọi iframe khi click vào nút reply
$('.comment a.comment-reply').click(function(e) {
l = $('#comment-editor').attr('src')
$('.calcel-reply').remove()
$('.comment-actions').removeAttr('style')
$('#top-continue.continue').hide()
var $this = $(this),
id = $this.attr('data-comment-id')
l = l + '&parentID=' + id
li = $this.parent().parent().parent().attr('id')
$('#comment-editor').attr('src', l)
$this.parent().hide()
$('#comment-editor').appendTo($('#' + li + '>.comment-replybox-single'))
$('#' + li + '>.comment-replybox-single').append('<div class="calcel-reply"><button class="theme-button green" type="button">Hủy</button></div>')
$('.calcel-reply').click(function() {
$(this).remove()
$('.comment-actions,#top-continue.continue').removeAttr('style')
$('#comment-editor').appendTo($('.comment-form'))
})
})
// Gọi iframe khi click vào nút Thêm nhận xét dưới cùng
$('#top-continue.continue>a.comment-reply').click(function(e) {
e.preventDefault()
$(this).parent().hide()
$('.calcel-reply').remove()
$('.comment-actions').removeAttr('style')
$('#comment-editor').appendTo($(this).parent().next())
$('.comment-replybox-thread').append('<div class="calcel-reply"><button class="theme-button green" type="button">Hủy</button></div>')
$('.calcel-reply').click(function() {
$(this).remove()
$('.comment-actions,#top-continue.continue').removeAttr('style')
$('#comment-editor').appendTo($('.comment-form'))
})
})
// Xử lý địa chỉ trình duyệt nếu có liên kết đến bình luận
if (url.indexOf('?showComment') != -1) {
if (url.indexOf('#c') != -1) {
var li = '#' + url.substring(url.indexOf('#c') + 1, url.length)
if ($(li).parents('.comment-thread').hasClass('thirdlevel-thread')) {
k = $(li).parents('li').parents('li').index()
} else if ($(li).parents('.comment-thread').hasClass('secondlevel-thread')) {
k = $(li).parents('li').index()
} else {
k = $(li).index()
}
if (k >= m) {
for (var i = 0; i < k + 1; i++) {
$(str[i]).removeClass('hidden')
}
} else {
for (var i = 0; i < m; i++) {
$(str[i]).removeClass('hidden')
}
}
if (k < n) {
$('#comments .loadmore').removeClass('hidden')
}
} else {
for (var i = 0; i < m; i++) {
$(str[i]).removeClass('hidden')
}
if (n > m) {
$('#comments .loadmore').removeClass('hidden')
}
}
} else {
for (var i = 0; i < m; i++) {
$(str[i]).removeClass('hidden')
}
if (n > m) {
$('#comments .loadmore').removeClass('hidden')
}
}
// Hiển thị thêm bình luận chính
$('#comments .loadmore>a').click(function() {
p = $('.toplevel-thread>ol>li.comment.hidden').length
k = n - p
if (p == 0) {
$(this).parent().addClass('hidden')
} else {
for (var i = k; i < k + m; i++) {
$(str[i]).removeClass('hidden')
}
}
})
})
//]]></script>
 |
| Phần bình luận đã phân cấp mới nhất |
Những lưu ý khác
-Bạn có thể phân nhiều hơn 3 cấp, tuy nhiên theo mình cứ để 3 cấp là được rồi-Phần css cho giao diện bình luận, bạn tự design theo sở thích của bạn, lưu ý thêm một class .hidden với display:none; nha các bạn ( phần dành cho nâng cao nên bạn có thể bỏ qua nếu không rành nhé)
Tags:
cach-phan-cap-khung-comment
meo-hay-blogger
tao-comment-thanh-nhieu-cap-cho-blogspot
thu-thuat-blogger
ok
Trả lờiXóaokok
XóaCám ơn bạn đã để lại bình luận nhé. ))
Xóa