Saya harus mengatakan bahwa
widget random post itu sangat buruk dalam hal performa. Kerja mereka sangat lambat dan membuang-buang tenaga, karena mereka bekerja dengan cara memanggil
feedumpan posting berukuran sangat besar! Kemudian mereka hanya akan menampilkannya sebagian saja secara acak:
<script src='/feeds/posts/default?alt=json-in-script&max-results=99999&callback=randomPosts'></script>
Bagi Anda para pemakai mungkin tidak pernah tahu mengenai ini, tetapi sebenarnya setiap pemakai widget
random post —termasuk juga
widget artikel terkait— tanpa sadar telah menerima beban begitu besar. Ketika Anda membuka halaman tunggal dimana terdapat widget
random post di dalamnya, pada saat yang bersamaan Anda juga sebenarnya sedang membuka
semua posting yang telah Anda terbitkan dalam satu waktu. Mengapa? Karena parameter
max-results
pada
feedumpan menunjukkan angka
99999
yang artinya bahwa semua
feedumpan posting akan “diusahakan” untuk dipanggil (
diusahakan, karena jumlah posting yang kita terbitkan tidak mungkin mencapai angka sebesar itu).
Mengacak Indeks Permulaan
Saya menyadari terdapat sebuah peluang untuk menciptakan widget
random post yang lebih ringan dan cepat dimuat. Dibandingkan memuat semua posting dan memilah beberapa posting secara acak untuk ditampilkan, akan lebih baik jika kita mengacak nilai
start-index
pada
feedumpan sehingga kita bisa memuat posting dari urutan sembarang:
function randomPosts(json) {
}
var startIndex = Math.round(Math.random() * 9999);
document.write('<scr' + 'ipt src="/feeds/posts/summary?alt=json-in-script&start-index=' + startIndex + '&max-results=7&callback=randomPosts"></scr' + 'ipt>');
Ada satu masalah kecil yang mungkin akan mengganggu. Jika angka acak yang tercipta nilainya lebih besar dari total posting blog Anda saat ini, maka widget
random post ini tidak akan bekerja. Oleh karena itu kita harus
membatasi angka acak yang tercipta, yaitu tidak boleh kurang dari
1
dan tidak boleh lebih dari “total posting dikurangi jumlah posting yang ingin ditampilkan”.
Untuk mendapatkan jumlah posting secara keseluruhan kita bisa mengambilnya melalui objek
json.feed.openSearch$totalResults.$t
:
var homePage = 'http://nama_blog.blogspot.com',
maxResults = 7;
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function createRandomPostsStartIndex(json) {
var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
}
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');
Muat ulang widget Anda berkali-kali. Seharusnya Anda akan melihat pesan
log indeks pemanggilan posting yang berubah-ubah seperti ini:
Kita akan menggunakan angka acak itu sebagai angka pemulai pada parameter
start-index
seperti ini:
function createRandomPostsStartIndex(json) {
var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}
Pada bagian akhir
URLUniform Resource Locator feedumpan terdapat parameter
callback=randomPosts
.
randomPosts di sini merupakan fungsi utama yang akan kita buat untuk mengubah
JSON Blogger menjadi widget:JavaScript Object Notationfunction randomPosts(json) {
var link, ct = document.getElementById('random-post-container'),
entry = json.feed.entry,
skeleton = "<ul>";
for (var i = 0, len = entry.length; i < len; i++) {
for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
}
skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
}
ct.innerHTML = skeleton + '</ul>';
}
Sentuhan akhir, acak urutan posting yang ditampilkan menggunakan
fungsi ini sehingga daftar posting yang ditampilkan nantinya akan semakin acak urutannya:
function shuffleArray(arr) {
var i = arr.length, j, temp;
if (i === 0) return false;
while (--i) {
j = Math.floor(Math.random() * (i + 1));
temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
}
function randomPosts(json) {
var link, ct = document.getElementById('random-post-container'),
entry = shuffleArray(json.feed.entry),
skeleton = "<ul>";
for (var i = 0, len = entry.length; i < len; i++) {
for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
}
skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
}
ct.innerHTML = skeleton + '</ul>';
}
Hasil Akhir
1code-line:7-12code-line:7-23code-line:7-34code-line:7-45code-line:7-56code-line:7-67code-line:7-78code-line:7-89code-line:7-910code-line:7-1011code-line:7-1112code-line:7-1213code-line:7-1314code-line:7-1415code-line:7-1516code-line:7-1617code-line:7-1718code-line:7-1819code-line:7-1920code-line:7-2021code-line:7-2122code-line:7-2223code-line:7-2324code-line:7-2425code-line:7-2526code-line:7-2627code-line:7-2728code-line:7-2829code-line:7-2930code-line:7-3031code-line:7-3132code-line:7-3233code-line:7-3334code-line:7-3435code-line:7-3536code-line:7-3637code-line:7-3738code-line:7-3839code-line:7-3940code-line:7-4041code-line:7-4142code-line:7-4243code-line:7-4344code-line:7-4445code-line:7-4546code-line:7-4647code-line:7-4748code-line:7-48<div id='random-post-container'>Memuat...</div>
<script>
var homePage = 'http://nama_blog.blogspot.com',
maxResults = 7,
containerId = 'random-post-container';
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function shuffleArray(arr) {
var i = arr.length, j, temp;
if (i === 0) return false;
while (--i) {
j = Math.floor(Math.random() * (i + 1));
temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
}
function createRandomPostsStartIndex(json) {
var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}
function randomPosts(json) {
var link, ct = document.getElementById(containerId),
entry = shuffleArray(json.feed.entry),
skeleton = "<ul>";
for (var i = 0, len = entry.length; i < len; i++) {
for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
}
skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
}
ct.innerHTML = skeleton + '</ul>';
}
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');
</script>
Ketika Posting Acak Dikirim Secara Langsung oleh Server
Dalam sebuah
forum Saya pernah menemukan seseorang yang mencoba menyarankan
Blogger untuk menyertakakan parameter
orderby
baru berupa
random
dan
popular
. Saya pikir ini adalah ide yang bagus. Karena berdasarkan dokumentasi, kalau tidak salah hanya ada dua macam nilai untuk parameter
orderby
, yaitu
published
dan
updated
:
http://nama_blog.blogspot.com/feeds/posts/summary?orderby=published
http://nama_blog.blogspot.com/feeds/posts/summary?orderby=updated
Jika suatu saat
Blogger merealisasikan masukan dari pengguna ini, maka kita tidak perlu lagi menerapkan
hack semacam ini. Cukup dengan membuat widget
recent post biasa, kita bisa mengubah parameter URL
feedumpan dari
orderby=published
menjadi
orderby=random
untuk menciptakan widget
random post atau
orderby=popular
untuk menciptakan widget posting populer. Tapi kasus ini masih dalam tahap “seandainya”.