Mẹo làm Blog với JSON: Mục lục bài viết theo từng thể loại

Bạn mến,

Sau đây tôi sẽ giới thiệu với bạn cách làm một Mục lục bài viết theo từng thể loại.



Cũng cùng mẹo đó nhưng hiển thị trên cột chính:




Trước tiên, theo dõi bài này Cách sửa mã nguồn của Blogger, nhất là ở mục B.4.

Sau đó, chèn dòng lệnh này vào giữa bất kỳ hai thẻ widgets.


<b:widget id='HTML50' locked='false' title='Contents By Category' type='HTML'>
<b:includable id='main'>
<!-- *****************http://hoctro.blogspot.com*****Dec,2006****************** -->
<!-- <b:if cond='data:blog.pageType == "item"'> -->
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
  </b:if>

  <div class='widget-content'>
<div id='data2006'/>
<script type='text/javascript'>
var homeUrl2 = "hoctro.blogspot.com";
var labels = ["Killer Hacks","Simple Hacks",
 "3 Column Templates", "Ajax Hacks","Custom Widgets", "Hacking Techniques"];

function listEntries2(json) {
  var ul = document.createElement('ul');

  for (var i = 0; i &lt; json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    var alturl;

    for (var k = 0; k &lt; entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        alturl = entry.link[k].href;
        break;
      }
    }
    var li = document.createElement('li');
    var a = document.createElement('a');
    a.href = alturl;

    var txt = document.createTextNode(entry.title.$t);
    a.appendChild(txt);
    li.appendChild(a);
    ul.appendChild(li);
  }

  for (var l = 0; l &lt; json.feed.link.length; l++) {
    if (json.feed.link[l].rel == 'alternate') {
      var raw = json.feed.link[l].href;
      var label = raw.substr(homeUrl2.length+21);
      var k;
      for (k=0; k&lt;20; k++)
      label = label.replace("%20", " ");
      var txt = document.createTextNode(label);
      var h = document.createElement('h4');
      h.appendChild(txt);
      var div1 = document.createElement('div');
      div1.appendChild(h);
      div1.appendChild(ul);
      document.getElementById('data2006').appendChild(div1);
    }
  }
}

function search2(query, label) {

var script = document.createElement('script');
script.setAttribute('src', 'http://' + query + '/feeds/posts/default/-/' + label +
'?alt=json-in-script&amp;callback=listEntries2');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}

for (var i=0; i &lt; labels.length; i++) 
  if (labels[i])search2(homeUrl2, labels[i]);
</script>
  </div>

  <b:include name='quickedit'/>
<!-- </b:if> -->
</b:includable>
</b:widget>



Sau đó, bạn cần thay đổi đôi chút để blogger lấy dữ liệu từ trang blog của bạn.

Thay vào những chỗ in đậm tên của blog bạn, và các nhãn bạn cần hiển thị:


var homeUrl2 = "hoctro.blogspot.com";
var labels = ["Killer Hacks","Simple Hacks",
 "3 Column Templates", "Ajax Hacks","Custom Widgets", "Hacking Techniques"];


Dòng thứ hai thực chất là một mảng (array) trong đó các thành tố (nhãn - labels của bạn) nằm trong ngoặc kép, và cách nhau bằng những dấu phẩy.

Lưu Ý:

1. Cách làm trên thực hiện rất thành công trên trang tiếng Anh của tôi cũng như các trang tiếng Anh, Pháp khác, nhưng khi sử dụng các thứ tiếng ngoài bảng ASCII thì lại không dùng được! Vì, tôi dùng data từ JSON feedback để lấy label, các data này encoding dưới dạng ASCII. Để trick Blogger, tôi phải làm thêm labels không có dấu.


Chúc bạn thành công!

Hoctro
12/13/06