Beranda » Blogger » Thủ Thuật Blogger » Bài viết ngẫu nhiên đơn giản và tối ưu nhất

Bài viết ngẫu nhiên đơn giản và tối ưu nhất

Trước đây mình có giới thiệu với các bạn tiện ích bài viết ngẫu nhiên nhiều tùy chỉnh cho Blogger / Blogspot. Thì mặc dù tiện ích này khá là hay nhưng nếu bạn nào có dùng thử qua và test nhiều thứ bạn sẽ thấy đôi khi đoạn Javascript đó sẽ không phản hồi được, nhiều khi nó còn gây ra hiện đơ luôn trình duyệt hiện tại đang sử dụng.

Chính vì thế sau một thời gian nhỏ nghiên cứu để tự sửa lại cho đỡ bức xúc về vấn đề này, mình xin giới thiệu đến các bạn tiện ích bài viết ngẫu nhiên đơn giản vả ít chức năng hơn, nhưng hoạt động trơn trư và hiếm khi còn gặp trường hợp không phản hồi dẫn đến đơ trình duyệt nữa.

Tiện ích này thì mình chỉ mới bắt tay vào nghiên cứu, nên có thể trong tương lai mình sẽ cải tiến nó có nhiều tính năng hơn tương tự như tiện ích cũ, nhưng sẽ khắc phục được nhược điểm mà tiện ích cũ mắc phải.

Bài viết ngẫu nhiên đơn giản và tối ưu

Ở bai viết này mình sẽ chia sẻ cho các bạn loại bài viết ngẫu nhiên, cái thứ nhất là chỉ có tiêu đề bài viết không thôi (giống như trang 404 của mình), cái thứ hai là sẽ gồm có ảnh thumbnail và đoạn trích cho các bạn có nhu cầu về cái đẹp.

Chỉ có tiêu đề

Bạn hãy chèn đoạn mã sau đây vào bất cứ chỗ nào mà bạn muốn hiện: widget html, chân trang bài viết,...

<div id='random-post-container'></div>
<script>
//<![CDATA[
// Tùy chỉnh
var homePage = 'http://www.kslzone.net',
    maxResults = 7,
    containerId = 'random-post-container';
// Kết thúc tùy chỉnh
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>

Demo: http://fiddle.jshell.net/kieusonlam/a9L4uq36/show/

Có ảnh thumbnail và đoạn trích

Tương tự như trên đặt đoạn mã sau đây vào nơi mà bạn muốn hiện tiện ích bài viết ngẫu nhiên

<div id='random-post-container'></div>
<script>
// Tùy chỉnh
var homePage = 'http://www.kslzone.net',
 maxResults = 7,
 summaryLength = 170,
 noImageUrl = 'http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png',
 containerId = 'random-post-container';
// Kết thúc tùy chỉnh
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));
 if (window.console && window.console.log) 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&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}

function randomPosts(json) {
 var link, summary, img,
  ct = document.getElementById(containerId),
  entry = shuffleArray(json.feed.entry),
  skeleton = "<ul>";
 for (var i = 0, len = entry.length; i < len; i++) {
  summary = ("summary" in entry[i]) ? (entry[i].summary.$t.replace(/<.*?>/g, "")).substring(0, summaryLength) + '&hellip;' : "";
  img = ("media$thumbnail" in entry[i]) ? entry[i].media$thumbnail.url.replace(/\/s[0-9]+(-c)?/, "/s72-c") : noImageUrl;
  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>';
  skeleton += '<img src="' + img + '" alt="" width="72" height="72">';
  skeleton += '<a href="' + link + '">' + entry[i].title.$t + '</a><br>';
  skeleton += '<span>' + summary + '</span>';
  skeleton += '<span class="clear"></span></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>

Tiếp tục chèn đoạn css sau đây lên trên thẻ ]]></b:skin>

#random-post-container {width:400px}
#random-post-container ul,
#random-post-container li {
  margin:0;
  padding:0;
  list-style:none;
  overflow:hidden;
}
#random-post-container img {
  display:block;
  float:left;
  border:1px solid;
  margin:2px 7px 5px 0;
}
#random-post-container a {
  font-weight:bold;
  font-size:110%;
}
#rancom-post-container .clear {
  display:block;
  clear:both;
}

Demo: http://fiddle.jshell.net/kieusonlam/wzj0ofoc/show/

Có thêm ngày đăng và số nhận xét

CSS thì như cũ, bạn có thể sử dụng lại như bên trên, còn đoạn Javascript thì các bạn hãy sử dụng đoạn này

<div id='random-post-container'></div>
<script>
// Tùy chỉnh
var homePage = 'http://www.kslzone.net',
 maxResults = 7,
 summaryLength = 170,
 noImageUrl = 'http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png',
 containerId = 'random-post-container';
// Kết thúc tùy chỉnh
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));
 if (window.console && window.console.log) 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&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}

function randomPosts(json) {
 var link, summary, img, cmt, date,
  ct = document.getElementById(containerId),
  entry = shuffleArray(json.feed.entry),
  skeleton = "<ul>";
 for (var i = 0, len = entry.length; i < len; i++) {
  summary = ("summary" in entry[i]) ? (entry[i].summary.$t.replace(/<.*?>/g, "")).substring(0, summaryLength) + '&hellip;' : "";
  img = ("media$thumbnail" in entry[i]) ? entry[i].media$thumbnail.url.replace(/\/s[0-9]+(-c)?/, "/s72-c") : noImageUrl;
        cmt = entry[i].thr$total.$t;
        date = entry[i].published.$t;
  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>';
  skeleton += '<img src="' + img + '" alt="" width="72" height="72">';
  skeleton += '<a href="' + link + '">' + entry[i].title.$t + '</a><br>';
  skeleton += '<span>' + summary + '</span>';
        skeleton += '<br/>';
        skeleton += '<span>' + date.substring(8, 10) + '/' + date.substring(5, 7) + '/' + date.substring(0, 4) + ' - ' + cmt + ' nhận xét</span>';
  skeleton += '<span class="clear"></span></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>

Demo: http://jsfiddle.net/kieusonlam/0jcp9ekg/show/

Chú thích tùy chỉnh

Sau đây là những thứ bạn có thể tùy chỉnh bên trong 2 đoạn mã trên

homePage: Địa chỉ url blog của bạn
maxResults: Số bài viết ngẫu nhiên
summaryLength: Độ dài đoạn trích
noImageUrl: Địa chỉ ảnh mặc định của bài viết không có ảnh

sau khi tùy chỉnh xong thì lưu lại.

Lời kết

Đây là tiện ích được viết một cách đơn giản và tối ưu nhất cho phần bài viết ngẫu nhiên, bạn có thể lấy ra nhiều bài viết mà không phải lo đến vấn đề không phản hồi của javascript. Mình sẽ tiếp tục cố cải tiến đoạn javascript này thêm nhiều tính năng hơn và tốt hơn cho các bạn có nhu cầu sử dụng.

P/S: Ban đầu thì mình tính thêm đầy đủ các tính năng rồi mới chia sẻ, nhưng dạo này loay hoay đi tìm việc, với nhiều thứ linh tinh quá nên không có thời gian nhiều sở lại không có thời gian viết bài viết chia sẻ lẹ rồi tính sau. Cám ơn bạn đã quan tâm bài viết.

Belum ada tanggapan untuk "Bài viết ngẫu nhiên đơn giản và tối ưu nhất"

Post a Comment

Labels

Biểu mẫu liên hệ