2006年12月14日星期四

blogger 3.0:做一个使文章标题分类的页面元素

依然感谢 Hoctro作了这个hack。
此hack的能够做出一个页面元素,根据你的标签来分类你的文章标题的显示页面元素。
效果如下图:

制作这个hack的方法很简单:首先给你的模板增加一个页面元素,然后找到这个页面元素,用下面的代码替换之。


<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 label1 = label.replace("%20", " ");
      var label2 =label1.replace("%20", " ");
      var txt = document.createTextNode(label2);
      var h = document.createElement('h4');
      h.appendChild(txt);
      document.getElementById('data2006').appendChild(h);
      document.getElementById('data2006').appendChild(ul);
    }
  }
}

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>




然后按上面颜色较深的部分的改成你的博客设计即可。

不过此hack有个小问题,你的标签不能太长或是中文,否则会显示出乱码。

2006年12月14日晚上7点21分由GG派首次翻译介绍!转载此文章请注明首次介绍翻译者GG派!

3 评论:

咖啡鱼 说...

不支持中文,在你之前我就看过了

GG 说...

不好意思 ,我在你之前就看过而且知道中文会乱码。你没看见作者都说明了不支持中文因为他用的是链接吗?不过放出来大家依然可以一起研究解决方法。

GG 说...

几好笑饿,我刚刚忙着帮别人做博客去了。没有时间在文章里修改。不过在你去作者博客说不支持中文之前,我早发邮件说了……

作者还要你仔细看作者的文章,早说明了……

的确比我早呢...

发表评论: ☆欢迎灌水☆言论自由☆交流快乐☆