Daftar Label pada Gawai Pos Populer Blogger

Cara menampilkan daftar label pada gawai pos populer dengan atau tanpa JavaScript.

Data standar dalam sebuah gawai pos populer sangat terbatas dan maksimal hanya mampu menampilkan properti pos berupa judul, tautan, deskripsi dan keluku. Idealnya, kita harusnya bisa menggunakan metode ini untuk menampilkan daftar label pada setiap item pos dalam sebuah gawai:

<b:widget id='PopularPosts1' type='PopularPosts'>
  <ul>
    <b:loop values='data:posts' var='post'>
      <li>
        …
        …
        <b:if cond='data:post.labels'>
          <p>
            <b:loop values='data:post.labels' var='label'>
              <data:label.name/>
            </b:loop>
          </p>
        </b:if>
      </li>
    </b:loop>
  </ul>
</b:widget>

Tapi cara tersebut tidak berhasil karena data label ternyata tidak ada. Kadang Saya juga berpikiran untuk menampilkan data tanggal publikasi pos tapi data tersebut ternyata juga tidak ada. Satu-satunya data minimal yang bisa Saya ambil saat ini hanya ID pos. Dan data tersebut sebenarnya sudah cukup sebagai modal untuk menampilkan tanggal publikasi dan daftar label dari pos… dengan JavaScript.

Dengan menambahkan ID pos pada tautan umpan, maka umpan yang dikembalikan akan berupa item pos. Di dalam respons umpan tersebut, kita bisa memperoleh data-data seperti judul, deskripsi, tanggal publikasi dan daftar label:

/feeds/posts/summary/196279938761919••••?alt=json

Sehingga kita bisa membuat fungsi untuk menampilkan daftar label pada gawai pos populer seperti ini:

<b:widget id='PopularPosts1' type='PopularPosts'>
  <script>
  //<![CDATA[
  function popularPostsLabels(json) {
      if (json && json.entry && json.entry.category) {
          let out = [];
          json.entry.category.forEach(category => {
              out.push('<a href="/search/label/' + encodeURIComponent(category.term) + '" rel="tag">' + category.term + '</a>');
          });
          out.length && document.write('<p>' + out.join(', ') + '</p>');
      }
  }
  //]]>
  </script>
  <ul>
    <b:loop values='data:posts' var='post'>
      <li>
        …
        …
        <script expr:src='"/feeds/posts/summary/" + data:post.id + "?alt=json&amp;callback=popularPostsLabels"'/>
      </li>
    </b:loop>
  </ul>
</b:widget>

Kode di atas masih menggunakan document.write() sebagai cara yang sudah tidak direkomendasikan lagi karena dapat memicu parsing spekulatif. Untuk menjadikan kode tampak lebih bersih dan aman, atau jika kalian ingin menyimpan skrip pemanggil data label pada berkas JavaScript eksternal, kalian bisa menyimpan ID pos pada atribut HTML, misalnya dengan menyimpannya pada atribut data-post-id seperti ini:

<li expr:data-post-id='data:post.id'>

Kemudian, untuk menampilkan daftar label dapat dilakukan dengan cara seperti ini:

let items = document.querySelectorAll('#PopularPosts1 li[data-post-id]');

items.length && items.forEach(item => {
    let p = document.createElement('p');
    fetch('/feeds/posts/summary/' + item.dataset.postId + '?alt=json')
        .then(response => response.json())
        .then(json => {
            if (json && json.entry && json.entry.category) {
                let out = [];
                json.entry.category.forEach(category => {
                    out.push('<a href="/search/label/' + encodeURIComponent(category.term) + '" rel="tag">' + category.term + '</a>');
                });
                if (out.length) {
                    p.innerHTML = out.join(', ');
                    item.appendChild(p);
                }
            }
        });
});

0 Komentar

Belum ada komentar.






Semua kode HTML akan dihapus kecuali kode-kode HTML yang dituliskan sebagai contoh. Gunakan sintaks Markdown untuk memberi gaya pada komentar.


Batal