Header ads

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é





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>


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




Bình Luận Của Bạn

0 Comments