Hướng dẫn tạo bài viết liên quan mới nhất tích hợp nút tải thêm

Cách chèn các bài viết liên quan mới nhất bên dưới nội dung bài viết có nhiều ưu điểm hơn dạng bài viết liên quan ngẫu nhiên, ngoài ra còn tích hợp nút tải thêm bài viết rất hữu ích đem lại sự tương tác cao hơn từ người đọc.

Những ưu điểm khi chèn các bài viết liên quan mới nhất tích hợp nút tải thêm:

• Không tải feeds khi tải trang thay vào đó khi kéo thanh cuộn xuống hết nội dung bài viết mới bắt đầu tải feeds hiển thị.
• Dạng bài liên quan mới nhất không phải tải nhiều số lượng bài viết thay vì phải tải hết tổng số bài sau đó lọc ra lấy các bài ngẫu nhiên thay vào đó chỉ tải số lượng bài mới nhất.
• Sử dụng phương thức Ajax tải feeds nên không bị Pagespeed cảnh báo.
• Lọc bài viết trùng với URL của trang hiện tại
• Hình ảnh reponsive đáp ứng kích thước màn hình
• Tích hợp nút tải thêm khi click sẽ tải thêm số lượng bài tiếp theo thay vì truy cập trang tìm kiếm Nhãn

Phương pháp thực hiện

1. Trong tiện ích Blog1 thêm một thẻ <b:includable id='relatedPosts' var='post'>...</b:includable> cùng với các thẻ b:includable mặc định

Copy

<b:includable id='relatedPosts' var='post'>

<div id='related-posts'>

<h3>

  <b:loop values='data:post.labels.length - 1' var='label'>

    <a expr:href='data:post.labels[label].url.canonical' title='Bài cùng chuyên mục'>Bài cùng chuyên mục</a>

  </b:loop>

</h3>

<ul class='box_category spinner load'/>

<button arial-label='Xem thêm' class='load-posts hidden' type='button'>Xem thêm</button>

<input id='numposts' type='hidden' value='0'/>

<input id='allposts' type='hidden' value=''/>

<div class='loadposts spinner hidden'/>

<script>

var labelname= &quot;<b:loop values='data:post.labels.length - 1' var='label'><b:eval expr='data:post.labels[label].name'/></b:loop>&quot;;

//<![CDATA[

function getPosts(e) {

  if (e.feed.entry) {

    for (var t = 0; t < e.feed.entry.length; t++) {

      for (var a = 0; a < e.feed.entry[t].link.length; a++)

        if ("alternate" == e.feed.entry[t].link[a].rel) {

          var s = e.feed.entry[t].link[a].href;

          break

        }

      var i, d = e.feed.entry[t].title.$t,

        p = e.feed.entry[t].published.$t;

      try {

        i = e.feed.entry[t].media$thumbnail.url.replace("s72-c", "s320")

      } catch (e) {

        i = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0or4Lg0RFsBYU41b0cy-GLbUjZYpdXY43WyctKgJnpf-ctmiUpfDB7YgTEKcJ0jvoZb5Ok26Zigr5wA5LRFYyul3vvM47jcwux5h0_xYS6dNInRxJYE27H7o28IlSexbIf6ohKq7BWvn9/s1600/safe_image.png"

      }

      var w = e.feed.entry[t].media$thumbnail.url,

        w200 = w.replace("s72-c", "w200-h112-p-k-no-nu"),

        w320 = w.replace("s72-c", "w320-h180-p-k-no-nu"),

        w400 = w.replace("s72-c", "w400-h225-p-k-no-nu"),

        w640 = w.replace("s72-c", "w640-h360-p-k-no-nu"),

        w1600 = w.replace("s72-c", "w1600-h900-p-k-no-nu");

      var x = $("link[rel='canonical']").attr("href");

      if (x === s) {

        $('#related-posts ul').append('<li class="current"><div class="post-thumb"><a href=' + s + ' title="' + d + '"><img alt="' + d + '" src=' + i + '  sizes="(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)" srcset="' + w200 + " 200w, " + w320 + " 320w, " + w400 + " 400w, " + w640 + " 640w, " + w1600 + ' 1600w"/></a></div><div class="post-title"><a href=' + s + ' title="' + d + '">' + d + '</a></div></li>')

      } else {

        $('#related-posts ul').append('<li><div class="post-thumb"><a href=' + s + ' title="' + d + '"><img alt="' + d + '" src=' + i + '  sizes="(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)" srcset="' + w200 + " 200w, " + w320 + " 320w, " + w400 + " 400w, " + w640 + " 640w, " + w1600 + ' 1600w"/></a></div><div class="post-title"><a href=' + s + ' title="' + d + '">' + d + '</a></div></li>')

      }

    }

  }

}

var content = false;

$(document).on('scroll', function() {

  if ($(this).scrollTop() >= $('#related-posts').position().top) {

    if (!content) {

      content = true;

      var numposts = 6; // Số bài hiển thị

      $.ajax({

        type: 'GET',

        url: '/feeds/posts/summary/-/' + labelname,

        data: {

          'max-results': numposts,

          'alt': 'json'

        },

        dataType: 'jsonp',

        jsonp: 'callback',

        jsonpCallback: 'getPosts',

        success: function(e) {

          $("#related-posts ul").removeClass("spinner").removeClass("load")

          var totalposts = e.feed.openSearch$totalResults.$t

          $('#allposts').attr('value', totalposts)

          if (totalposts > numposts) {

            $('.load-posts').removeClass('hidden')

            $('.load-posts').click(function() {

              $('.loadposts').removeClass('hidden')

              var items = Number($('#numposts').val());

              items = items + numposts;

              if (items < totalposts) {

                $('.load-posts').addClass('hidden')

                $('#numposts').val(items);

                setTimeout(function() {

                  $.ajax({

                    type: 'GET',

                    url: '/feeds/posts/summary/-/' + labelname,

                    data: {

                      'max-results': numposts,

                      'start-index': items + 1,

                      'alt': 'json'

                    },

                    dataType: 'jsonp',

                    jsonp: 'callback',

                    jsonpCallback: 'getPosts',

                    success: function() {

                      var lastposts = items + numposts;

                      if (lastposts < totalposts) {

                        $('.load-posts').removeClass('hidden')

                        $('.loadposts').addClass('hidden')

                      } else {

                        $('.loadposts,.load-post').addClass('hidden')

                      }

                    }

                  })

                }, 500)

              } else {

                $('.load-posts,.loadposts').addClass('hidden')

              }

            })

          } else {

            $('.load-posts').addClass('hidden')

          }

        }

      })

    }

  }

})

//]]></script>

</div>

</b:includable>

Nếu widget Blog1 version='1' có thể thay vòng lặp của Nhãn thành như sau:

Copy

<b:loop values='data:post.labels' var='label'>

  <b:if cond='data:label.isLast == &quot;true&quot;'>

    <a expr:href='data:label.url.canonical' title='Bài cùng chuyên mục'>Bài cùng chuyên mục</a>

  </b:if>  

</b:loop>



var labelname= &quot;<b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast == &quot;true&quot;'><data:label.name/></b:if></b:loop>&quot;;

Đoạn script này sử dụng jquery nên trong template phải có link thư viện jquery.js, kiểm tra nếu chưa có thì thêm trước thẻ </head> hoặc ngay trên đoạn script ở trên nếu chỉ muốn sử dụng link cho đoạn script này.

Copy

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

2. Thêm thẻ <b:include cond='data:view.isPost' data='post' name='relatedPosts'/> vào vị trí hiển thị trong nội dung bài viết, chèn ngay dưới thẻ <data.post.body/> (nội dung bài viết) hoặc phía trên nhận xét. Trong thẻ <b:includable id='main' var='top'> trên cùng của widget có đoạn như sau:

Copy

<b:loop values='data:posts' var='post'>

....



<b:include data='post' name='post'/>

<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>



...



</b:loop>

Sửa thành

Copy

<b:loop values='data:posts' var='post'>

....



  <b:include data='post' name='post'/>

  <b:include cond='data:view.isPost' data='post' name='relatedPosts'/>

  <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>



...



</b:loop>

3. Viết css cho bố cục hiển thị các bài viết liên quan

Phần này các bạn tự viết theo sở thích của mình, bố cục html của các bài viết liên quan có dạng sau:

Copy

<div id="related-posts">

  <h3>...</h3>

  <ul class="box_category">

    <li><div class="post-thumb"><a href="https://www.vietblogdao.com/2018/11/danh-sach-cac-phim-tat-su-dung-trong-windows-10.html" title="Danh sách các phím tắt sử dụng trong Windows 10"><img alt="Danh sách các phím tắt sử dụng trong Windows 10" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVdNd2smsg5pMGGVGvZ8ongWc9Nby0pZ7nxGbCxdFY3ZBgBzA8E5nadq8LXCQaaQBy5LQCTnWFKTlJJBxLGatd-dl3wJQnh6Qn6xUM4cXGQse1RHirAPQBef8WfI01sg19DRm9AHrgx7xi/s320/win-10-keyboard-2.png" sizes="(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)" srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVdNd2smsg5pMGGVGvZ8ongWc9Nby0pZ7nxGbCxdFY3ZBgBzA8E5nadq8LXCQaaQBy5LQCTnWFKTlJJBxLGatd-dl3wJQnh6Qn6xUM4cXGQse1RHirAPQBef8WfI01sg19DRm9AHrgx7xi/w200-h112-p-k-no-nu/win-10-keyboard-2.png 200w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVdNd2smsg5pMGGVGvZ8ongWc9Nby0pZ7nxGbCxdFY3ZBgBzA8E5nadq8LXCQaaQBy5LQCTnWFKTlJJBxLGatd-dl3wJQnh6Qn6xUM4cXGQse1RHirAPQBef8WfI01sg19DRm9AHrgx7xi/w320-h180-p-k-no-nu/win-10-keyboard-2.png 320w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVdNd2smsg5pMGGVGvZ8ongWc9Nby0pZ7nxGbCxdFY3ZBgBzA8E5nadq8LXCQaaQBy5LQCTnWFKTlJJBxLGatd-dl3wJQnh6Qn6xUM4cXGQse1RHirAPQBef8WfI01sg19DRm9AHrgx7xi/w400-h225-p-k-no-nu/win-10-keyboard-2.png 400w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVdNd2smsg5pMGGVGvZ8ongWc9Nby0pZ7nxGbCxdFY3ZBgBzA8E5nadq8LXCQaaQBy5LQCTnWFKTlJJBxLGatd-dl3wJQnh6Qn6xUM4cXGQse1RHirAPQBef8WfI01sg19DRm9AHrgx7xi/w640-h360-p-k-no-nu/win-10-keyboard-2.png 640w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVdNd2smsg5pMGGVGvZ8ongWc9Nby0pZ7nxGbCxdFY3ZBgBzA8E5nadq8LXCQaaQBy5LQCTnWFKTlJJBxLGatd-dl3wJQnh6Qn6xUM4cXGQse1RHirAPQBef8WfI01sg19DRm9AHrgx7xi/w1600-h900-p-k-no-nu/win-10-keyboard-2.png 1600w"></a></div><div class="post-title"><a href="https://www.vietblogdao.com/2018/11/danh-sach-cac-phim-tat-su-dung-trong-windows-10.html" title="Danh sách các phím tắt sử dụng trong Windows 10">Danh sách các phím tắt sử dụng trong Windows 10</a></div></li>

    <li>...</li>

    <li>...</li>

    <li>...</li>

    <li>...</li>

    <li>...</li>

  </ul>

  <button arial-label="Xem thêm" class="load-posts" type="button">Xem thêm</button>

  <input id="numposts" type="hidden" value="0">

  <input id="allposts" type="hidden" value="60">

  <div class="loadposts spinner hidden"></div>

  <script>...</script>

</div>



#related-posts {



}

#related-posts ul {



}

#related-posts ul li {



}

#related-posts .current {

 // Nếu bài viết trùng với URL trang hiện tại

}

#related-posts ul li a{



}

#related-posts .post-thumb{



}

#related-posts .post-title{



}

.load-posts {

    position: relative;

    background: #f0f1f5;

    border: solid 1px #f0f1f5;

    transition: border-color .3s;

    border-radius: 3px;

    outline: 0;

    padding: 0 30px 0 10px;

    font-size: 15px;

    color: #3c4043;

    line-height: 30px;

    cursor: pointer;

}

.load-posts:hover {

    border-color: #0af;

    transition:border-color .3s;

}

.load-posts:after {

  font-family:FontAwesome;

  content:'\f107';

  font-size:18px;

  font-style:normal;

  font-weight:normal;

  position:absolute;

  right:10px;

}

box_category.load {

  height:400px;

  position:relative;

}

.box_category.spinner:before {

  content:'';

  box-sizing:border-box;

  position:absolute;

  top:50%;

  left:50%;

  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;

}

@keyframes spinner {

  to {

    transform:rotate(360deg);

  }

}

@-webkit-keyframes spinner {

  to {

    -webkit-transform:rotate(360deg);

  }

}

Các bạn xem demo ngay dưới nội dung bài viết này. Nếu chưa biết thiết kế bố cục dạng grid, tham khảo bài viết Hướng dẫn thiết kế bố cục bài viết dạng grid cho widget

Nội dung chính