Cách phân cấp khung comment thành nhiều cấp trên blogspot

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}


Hình mẫu khung comment 3 cấp khác nhau


Mẫu khung comment đã phân thành 3  cấp
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'>
  <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='&quot;c&quot; + 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, &quot;1:1&quot;)'/>
              <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='&quot;#&quot; + data:firstlevel.id' rel='nofollow' target='_self' title='Trả lời'>Trả lời</a>
                <span expr:class='&quot;item-control &quot; + 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='&quot;c&quot; + data:firstlevel.id + &quot;-rt&quot;'>
                <ol class='thread-chrome thread-expanded' expr:id='&quot;c&quot; + data:firstlevel.id + &quot;-ra&quot;'>
                  <b:loop values='data:post.comments' var='secondlevel'>
                    <b:if cond='data:secondlevel.inReplyTo == data:firstlevel.id'>
                      <li class='comment' expr:id='&quot;c&quot; + 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, &quot;1:1&quot;)'/>
                          <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='&quot;#&quot; + data:secondlevel.id' rel='nofollow' target='_self' title='Trả lời'>Trả lời</a>
                            <span expr:class='&quot;item-control &quot; + 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='&quot;c&quot; + data:secondlevel.id + &quot;-rt&quot;'>
                            <ol class='thread-chrome thread-expanded' expr:id='&quot;c&quot; + data:secondlevel.id + &quot;-ra&quot;'>
                              <b:loop values='data:post.comments' var='thirdlevel'>
                                <b:if cond='data:thirdlevel.inReplyTo == data:secondlevel.id'>
                                  <li class='comment' expr:id='&quot;c&quot; + 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, &quot;1:1&quot;)'/>
                                      <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='&quot;item-control &quot; + 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='&quot;c&quot; + data:secondlevel.id + &quot;-ce&quot;'/>
                      </li>
                    </b:if>
                  </b:loop>
                </ol>
              </div>
            </div>
            <div class='comment-replybox-single' expr:id='&quot;c&quot; + data:firstlevel.id + &quot;-ce&quot;'/>
          </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>
Bước 2:  Tìm và thay thế thẻ   
   <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[
$(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>
Đến đây bạn chỉ việc lưu lại là xong nhé

Mục bình luận đã phân cấp
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é)

3 Nhận xét

✪★ Chèn link ảnh/video trực tiếp vào khung bình luận để hiển thị hình ảnh hay video cho phần nội dung.
✪★ Nếu tải file mẫu không được, vui lòng để lại nhận xét vào khung bình luận bên dưới để được hỗ trợ nhé .

Mới hơn Cũ hơn