Thứ Bảy, 22 tháng 4, 2023

Hiển thị danh sách bài đăng theo nhãn cụ thể cho trang trên blog

Đây là đoạn mã hoàn chỉnh để hiển thị danh sách bài đăng mới nhất trong một nhãn cụ thể trên Blogspot, bao gồm cả tiêu đề, đường dẫn và hình ảnh thu nhỏ.

<style>
.recent-posts {
  list-style: none;
  margin: 0;
  padding: 0;
}

.recent-posts li {
  margin-bottom: 20px;
  display: flex;
}

.recent-posts img {
  margin-right: 10px;
  max-width: 100px;
  height: auto;
}
</style>

<h2>Recent Posts by Label</h2>
<ul class="recent-posts"></ul>

<script type="text/javascript">
function recentPostsList(json) {
  var list = document.querySelector('.recent-posts');

  for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    var entryTitle = entry.title.$t;
    var entryUrl = '';
    var entryImage = '';
    var links = entry.link || [];

    for (var j = 0; j < links.length; j++) {
      var link = links[j];

      if (link.rel === 'alternate') {
        entryUrl = link.href;
        break;
      }
    }

    var media = entry.media$thumbnail || {};
    entryImage = media.url;

    var item = `
      <li>
        <img src="${entryImage}" alt="${entryTitle}">
        <div>
          <a href="${entryUrl}">${entryTitle}</a>
        </div>
      </li>
    `;
    list.innerHTML += item;
  }
}
</script>

<script src="https://YOUR-BLOG-NAME.blogspot.com/feeds/posts/summary/-/YOUR-LABEL-NAME?max-results=5&alt=json-in-script&callback=recentPostsList"></script>

Bạn hãy thay YOUR-BLOG-NAMEYOUR-LABEL-NAME với tên của blog và nhãn tương ứng của bạn.

Không có nhận xét nào:

Đăng nhận xét