Blogger JSON Feed API - Random Posts when click

Random Posts when click là một thủ thuật khá hay giúp người dùng có thể tiếp cận nhiều hơn các bài viết mà không cần chuyển trang nhiều lần, đồng thời dữ liệu cũng được tải sau khi người dùng click nên hoàn toàn không ảnh hưởng đến tốc độ tải trang
Xem demo

Mỗi lần click dữ liệu sẽ được tải và làm mới nên người dùng có thể bấm bao giờ chán thì thôi, cùng thuật toán random không trùng lặp giúp thủ thuật logic hơn

1. Viết CSS (lưu ý chưa responsive)

.btn-random {
  outline: 0;
  background: #fff;
  border: 1px solid #eee;
  padding: 6px 12px 7px;
  -webkit-border-radius: 100px;
     -moz-border-radius: 100px;
          border-radius: 100px;
  cursor: pointer;
  -webkit-transition: background 0.3s;
  -o-transition: background 0.3s;
  -moz-transition: background 0.3s;
  transition: background 0.3s;
}
.btn-random:hover {
  background: #f8f8f8;
}
.random-posts {
  margin: 20px 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -ms-flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
}
.random-posts .item {
  width: 32%;
  margin-right: 2%;
  margin-bottom: 20px;
}
.random-posts .item:nth-of-type(3n) {
  margin-right: 0;
}
.random-posts .item .thumb {
  overflow: hidden;
  height: 160px;
}
.random-posts .item .thumb img {
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
       box-sizing: border-box;
  border: 1px solid #f6f6f6;
}
.random-posts .item .thumb img:hover {
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  -o-transition: transform 0.3s ease;
  -o-transition: -o-transform 0.3s ease;
  -moz-transition: transform 0.3s ease, -moz-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease, -moz-transform 0.3s ease, -o-transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  -webkit-transform: scale(1.1) rotate(-1.3deg);
      -ms-transform: scale(1.1) rotate(-1.3deg);
          -moz-transform: scale(1.1) rotate(-1.3deg);
            -o-transform: scale(1.1) rotate(-1.3deg);
       transform: scale(1.1) rotate(-1.3deg);
}
.random-posts .item .content {
  margin-top: 10px;
}
.random-posts .item .content a {
  color: #333;
  font-weight: 600;
  font-size: 16px;
}
.random-posts .item .content a:hover {
  text-decoration: underline;
}

2. Code Markup

Bạn định vị trí đặt button và div hiển thị bài đăng, do đây là dữ liệu feed nên bạn có thể đặt ở bất cứ trang nào kể cả trang 404. Ở đây tôi dùng cho trang bài viết

<b:if cond='data:view.isPost'>
<center><button class='btn-random' type='button'>Find more posts</button></center>
<div class='random-posts'/>
</b:if>

3. JS

JS đặt trước thẻ đóng </body>, lưu ý nếu bạn dùng cho data:view nào thì nên áp thẻ điều kiện để tối ưu code. Ở đây tôi dùng cho trang bài viết và JS không yêu cầu jQuery

<b:if cond='data:view.isPost'>
<script type='text/javascript'>//<![CDATA[
document.getElementsByClassName("btn-random")[0].addEventListener("click", e => {
  document.getElementsByClassName("random-posts")[0].innerHTML = "";
  fetch(`/feeds/posts/summary?alt=json&max-results=0`).then(response => response.json()).then(data => {
    let totalPost = data.feed.openSearch$totalResults.$t;
    let nums = [],
      gen_nums = [];
    for (let x = 0; x < totalPost; x++) {
      nums.push(x + 1)
    };
    var in_array = (array, el) => {
      for (let i = 0; i < array.length; i++)
        if (array[i] == el) return true;
      return false;
    }
    var get_rand = array => {
      let rand = array[Math.floor(Math.random() * array.length)];
      if (!in_array(gen_nums, rand)) {
        gen_nums.push(rand);
        return rand;
      }
      return get_rand(array);
    }
    for (var v = 0; v < 6; v++) {
      for (var w = 1; w <= 1; w++) {
        fetch(`/feeds/posts/summary?alt=json&max-results=1&start-index=${get_rand(nums)}`).then(res => res.json()).then(json => {
          let title, href, thumb;
          for (let n = 0; n < json.feed.entry.length; n++) {
            for (let s = 0; s < json.feed.entry[n].link.length; s++) {
              if (json.feed.entry[n].link[s].rel === "alternate") {
                href = json.feed.entry[n].link[s].href;
                break;
              }
            }
            title = json.feed.entry[n].title.$t;
            if ("media$thumbnail" in json.feed.entry[n]) {
              thumb = json.feed.entry[n].media$thumbnail.url.replace("s72-c", "s260");
            } else {
              thumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXvoeWlnXfuDDxD0LIWf1tODuI3Wti5c3N2v73T19xj9fNAM45q8OWvY4cL-rRcVe0NisWEk9lZ0v4uuDUX4b54sx0uFOgNBRC6Gfoj7nUJaCh-JsZLVa-G-Nt0j5OrQ5vOfcCLsG-HqI/s1600-r/nth.png"
            }
            document.getElementsByClassName("random-posts")[0].innerHTML += `<div class="item"><div class="thumb"><a href="${href}"><img src="${thumb}"/></a></div><div class="content"><a href="${href}">${title}</a></div></div>`;
          }
        }).catch(e => console.error(e))
      }
    }
  }).catch(error => console.error(error))
  e.currentTarget.innerHTML = "Continue find more posts";
}, {
  once: false
});
//]]></script>
</b:if>

Lưu mẫu lại và kiểm tra kết quả

Kết luận: Nếu bạn đã đọc bài random posts trước đó của tôi thì bài này cũng không có gì mới, chỉ là chuyển sang dùng fetch API cho khỏi phụ thuộc vào jQuery thôi và bạn cũng thấy chúng không khác nhau là bao

Để lại bình luận nếu bạn gặp khó khăn và chúc thành công !