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.

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

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>
//<![CDATA[
// 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>
//<![CDATA[
// 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.

11 bình luận

  1. avatar Nặc danh says

    10:53 Ngày 04 tháng 09 năm 2014

    Bạn cho mình hỏi là mình thấy một số trang web khi mình click vào xem bài viết thì:
    1. Mở bài viết đồng thời mở tab mới tới 1 trang mới họ chỉ định sẵn.
    2. Giữ nguyên tab hiện tại và mở bài viết mình muốn xem ở tab mới.
    Bạn chỉ giúp mình với nhé.
    Cám ơn bạn.

  2. avatar says

    20:58 Ngày 15 tháng 03 năm 2015

    Bài Viết Ngẫu Nhiên Có Ảnh, Trích Dẫn, Ngày Đăng Và Nhận Xét
    http://vnminhtriet.blogspot.com/2015/03/bai-viet-ngau-nhien-co-anh-trich-dan.html

  3. avatar says

    09:09 Ngày 04 tháng 12 năm 2015

    cậu ơi cho mình hỏi giờ mình muốn thêm hiệu ứng rê chuột vào hình ảnh cũng có thể click dc thì thêm đoạn mã nào nữa cậu nhỉ
    vì cái của cậu chỉ có click dc ở tiêu đề thôi :)
    thank cậu nhiều

  4. avatar says

    10:10 Ngày 06 tháng 12 năm 2015

    Cậu tìm đoạn này
    <img src="' + img + '" alt="" width="72" height="72">
    thay bằng
    <a href="' + link + '"><img src="' + img + '" alt="" width="72" height="72"></a>
    là ok.

  5. avatar says

    11:10 Ngày 06 tháng 12 năm 2015

    cám ơn cậu nhiều nha
    cậu nhiệt tình quá :)

  6. avatar says

    13:47 Ngày 04 tháng 02 năm 2016

    cảm ơn bạn đã hướng dẫn, cái code của bạn nó load nhanh hơn của bạn nào đó, mình quên rồi.
    blog của mình đây: http://www.ngaydeptuoi.com/
    mọi người quan tâm thì ghé qua xem 1 lần nhé. cảm ơn Ad nhiều

  7. avatar says

    21:06 Ngày 31 tháng 07 năm 2016

    Làm thế nào để thay đổi độ rộng của nó khi mình đưa vào widget cột trái thì bị to quá mà đưa vào giữa thì nhỏ quá.

  8. avatar says

    14:13 Ngày 01 tháng 08 năm 2016

    Bạn để lại link demo mình mới biết vấn đề nó nằm ở đâu được nhé.

  9. avatar says

    15:59 Ngày 17 tháng 08 năm 2016

    Hi bạn
    Mình đặt đoạn mã trên đặt trong temp, preview phát là báo lỗi tùm lum,( lỗi ký tự &,; ... ) . Trang mình : http://nhuygialai.com
    Rãnh rỗi nhờ bạn xem giúp nhé.
    Cám ơn nhiều

  10. avatar says

    15:03 Ngày 18 tháng 08 năm 2016

    Bác thử lại code nhé, trong Blogger muốn xài kí tự &,; thì phải bỏ toàn bộ script trong CDATA. Mình thêm vào code trên rồi.

  11. avatar says

    15:53 Ngày 18 tháng 08 năm 2016

    Hi bạn
    Mình hiểu rồi. Mày mò cho chuyển mã sang html cuối cùng rồi cũng được. Nhờ bạn giúp cho vấn đề này nhé.Trên giao diện di động nếu muốn lúc nào cũng 10 bài /trang thì phải vào settings/post cài=10 bài/ trang. Lúc này trên desktop muốn chỉ hiển thị 1 bài thì làm cách nào?
    Cám ơn bạn nhé

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.