Hướng dẫn tải Comment Form sau khi tải trang hoặc tạo Button Click

Một trong những yếu tố gây ảnh hưởng đến tốc độ tải trang đó là khung nhận xét comment form và nội dung nhận xét comments content vì những yếu tố này được kích hoạt tải ngay khi tải trang. 2 yếu tố comment form và comments content được tách biệt nhau do điều kiện bài viết có hay không có nhận xét. Nếu như bài viết không có nhận xét thì chỉ có comment form nhưng bài viết nếu có nhận xét có thêm cả comments content bên cạnh comments form.

Như vậy nếu bài viết có nhận xét thì thời gian tải trang sẽ lâu hơn với bài không có nhận xét vì ngoài load comment form còn load cả comments content mà trong này lại bao gồm script. Chúng ta có thể ngăn comment form và comments content không tải khi tải trang thay vào đó tải sau khi trang tải xong bằng các phương pháp sau đây:

Vào chỉnh sửa mẫu template chọn chuyển đến tiện ích Blog1

1. ÁP DỤNG VỚI BLOG LAYOUT V1 & WIDGET V1 HOẶC ĐÃ NÂNG CẤP BLOG LAYOUT LÊN V2, V3 NHƯNG VẪN GIỮ WIDGET V1

Bước 1: Mở rộng thẻ <b:includable id='comment-form' var='post'> (Bài viết không có nhận xét sẽ load thẻ này) tìm thay thế nội dung bên dưới:

Copy

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

<data:post.friendConnectJs/>

<data:post.cmtfpIframe/>

<script type='text/javascript'>

BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);

</script>

thành nội dung:

Copy

<script>//<![CDATA[

$(window).on('load', function() {

  $('.comment-form').addClass('spinner').addClass('load')

  setTimeout(function() {

    $('.comment-form').append("<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410px' id='comment-editor' name='comment-editor' src='' width='100%'></iframe>");

    $.getScript('https://www.blogger.com/static/v1/jsbin/2567313873-comment_from_post_iframe.js').done(function() {

      BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html', '0')

      $('.comment-form').removeClass('spinner').removeClass('load')

    })

  }, 500)

})

//]]></script>

Bước 2: Làm tương tự như Bước 1 với thẻ <b:includable id='threaded-comment-form' var='post'> (Bài viết có nhận xét sẽ load thẻ này)

Bước 3: Mở rộng thẻ <b:includable id='threaded_comment_js' var='post'> (Bài viết có nhận xét sẽ load thẻ này) thay hết nội dung bên trong thành:

Copy

<script>//<![CDATA[

$('.comments-content').addClass('hidden')

$(window).on('load', function() {

  setTimeout(function() {

    $.getScript('//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js').done(function() {

      $('.comments-content').removeClass('hidden')

    })

  }, 500)

})

//]]></script>

<b:template-script inline='true' name='threaded_comments'/>

<script type='text/javascript'>

  blogger.widgets.blog.initThreadedComments(

  <data:post.commentJso/>,

  <data:post.commentMsgs/>,

  <data:post.commentConfig/>);

</script>

2. ÁP DỤNG VỚI BLOG LAYOUT V2, V3 & WIDGET V2

Bước 1: Mở rộng thẻ <b:includable id='commentForm' var='post'> (Bài viết không có nhận xét sẽ load thẻ này) tìm thay thế nội dung bên dưới:

Copy

<iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight ?: &quot;90px&quot;' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>

<data:post.cmtfpIframe/>

<script type='text/javascript'>

  BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);

</script>

thành nội dung:

Copy

<script>//<![CDATA[

$(window).on('load', function() {

  $('.comment-form').addClass('spinner').addClass('load')

  setTimeout(function() {

    $('.comment-form').append("<iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' id='comment-editor' name='comment-editor' src='' height='93px' width='100%'></iframe>");

    $.getScript('https://www.blogger.com/static/v1/jsbin/2567313873-comment_from_post_iframe.js').done(function() {

      BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html')

      $('.comment-form').removeClass('spinner').removeClass('load')

    })

  }, 500)

})

//]]></script>

Bước 2: Làm tương tự như Bước 1 với thẻ <b:includable id='threadedCommentForm' var='post'> (Bài viết có nhận xét sẽ load thẻ này)

Bước 3: Mở rộng thẻ <b:includable id='threadedCommentJs' var='post'> (Bài viết có nhận xét sẽ load thẻ này) thay hết nội dung bên trong thành:

Copy

<script>//<![CDATA[

$('.comments-content').addClass('hidden')

$(window).on('load', function() {

  setTimeout(function() {

    $.getScript('//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js').done(function() {

      $('.comments-content').removeClass('hidden')

    })

  }, 500)

})

//]]></script>

<b:template-script inline='true' name='threaded_comments'/>

<script type='text/javascript'>

  blogger.widgets.blog.initThreadedComments(

  <data:post.commentJso/>,

  <data:post.commentMsgs/>,

  <data:post.commentConfig/>);

</script>

3. CSS SỬ DỤNG CHUNG

Copy

.comments-content.spinner:before {

  content:'';

  box-sizing:border-box;

  position:absolute;

  top:45%;

  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;

}

.comment-form.load {

  position: relative;

  height:200px;

  width:100%;

}

@keyframes spinner {

  to {

    transform:rotate(360deg);

  }

}

@-webkit-keyframes spinner {

  to {

    -webkit-transform:rotate(360deg);

  }

}

.hidden {

  display:none;

}

*LƯU Ý: Trong mẫu template cần có thư viện link jquery.js nếu chưa có thì thêm trước thẻ </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/> // Có thể sử dụng phiên bản thấp hơn ví dụ 1.7.1

4. SỬ DỤNG BUTTON CLICK

Phần này chỉ áp dụng với bài viết không có nhận xét chúng ta có thể thay thế bằng button click vì suy cho cùng nếu bài đó không có nhận xét thì chưa chắc người đọc sẽ nhận xét, thay vào đó chúng ta sẽ sử dụng button click để load comment form khi người đọc muốn đăng nhận xét. Làm vậy sẽ rút ngắn được thời gian tải trang.

Nếu như bạn đọc ở phần trên bạn sẽ thấy comment form được chia làm 2 thẻ b:includable tách biệt nhau như vậy chúng ta sẽ chỉ thay đổi button click trong phần bài viết không có nhận xét thôi còn bài viết nếu có nhận xét vẫn sẽ giữ nguyên, chúng ta thay lại đoạn script như sau:

Copy

<script>//<![CDATA[

$('#comments .load').click(function() {

  $('.comment-form').addClass('spinner').addClass('load')

  setTimeout(function() {

    $('.comment-form').append("<iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'></iframe>")

    $.getScript('https://www.blogger.com/static/v1/jsbin/2567313873-comment_from_post_iframe.js').done(function() {

      BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html')

      $('#comments .load').addClass('hidden')

      $('.comment-form').removeClass('spinner').removeClass('load')

    })

  }, 500)

})

//]]></script>

Sau đó các bạn đặt button click ngay trên phần comment-form ví dụ:

Copy

<div class='load'><data:messages.postAComment/></div>

Chấm hết bài!!!

Nội dung chính