2010年7月21日 星期三

Blogger中加入相關文章功能

image

Blogger中,官方是沒有提供「相關文章」的小工具,但dnowba個人覺得這個功能對寫一些資訊類文章的人蠻有用的,以下為取經後分站給大家的方法。原理上就是應用blogger原有的「標籤」功能,在展開文章後把有一樣標籤的文章給亂數篩選(不會選到自已)並列表出來,最後加上日期與連結。


STEP ①: 至blogger後台 設計→修改html頁,先下載原來的範本避免套用錯誤,再來打開「小裝置範本」(在文字編輯器旁,勾選即可),接下來把下面的程式碼貼在在 </head> 標籤前。

<script type='text/javascript'>
//<![CDATA[
<!-- Script functions for Related Posts: RelatedLabels(), RemoveDuplicatedPosts(), contains(), ShowRelatedPosts()-->
var relatedPostsNum = 0;
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedDates = new Array();

function RelatedLabels(json) {
  var regex1=/</g, regex2=/>/g;
  for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    relatedTitles[relatedPostsNum] = (entry.title.$t.replace(regex1, '&lt;')).replace(regex2, '&gt;');
    relatedDates[relatedPostsNum] = entry.published.$t.substr(0,10);
    for (var j = 0; j < entry.link.length; j++) {
      if (entry.link[j].rel == 'alternate') {
        relatedUrls[relatedPostsNum] = entry.link[j].href;
        relatedPostsNum++;
        break;
      }
    }
  }
}

function RemoveDuplicatedPosts(PostUrl) {
  var tmpUrls = new Array(0);
  var tmpTitles = new Array(0);
  var tmpDates = new Array(0);
  function contains(a, e) {
    for(var j = 0; j < a.length; j++)
      if (a[j]==e)
        return true;
    return false;
  }
  for(var i = 0; i < relatedUrls.length; i++) {
    if(!contains(tmpUrls, relatedUrls[i]) && PostUrl != relatedUrls[i]) {
      tmpUrls.length += 1;
      tmpUrls[tmpUrls.length - 1] = relatedUrls[i];
      tmpTitles.length += 1;
      tmpTitles[tmpTitles.length - 1] = relatedTitles[i];
      tmpDates.length += 1;
      tmpDates[tmpDates.length - 1] = relatedDates[i];
    }
  }
  relatedTitles = tmpTitles;
  relatedUrls = tmpUrls;
  relatedDates = tmpDates;
}

function ShowRelatedPosts(PostUrl) {
  RemoveDuplicatedPosts(PostUrl);
  var r = Math.floor((relatedTitles.length - 1) * Math.random());
  var i = 0;
  if (relatedTitles.length > 0) {
    document.write('相關文章 : <ul>');
    while (i < relatedTitles.length && i < 5) {
      document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a> - ' + relatedDates[r] + '</li>');
      if (r < relatedTitles.length - 1)
        r++;
      else
        r = 0;
      i++;
    }
    document.write('</ul>');
  }
}
//]]>
</script>

行56,while (i < relatedTitles.length && i < 5) ,其中 i<5意思就是最多列出5篇,可以視自已的需求更改。
STEP ②: 再來修改原來的html,先找到程式碼01這個片段,把他修改成程式碼02。

//程式碼01
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
//程式碼02
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<!-- Fixed for Related Posts -->
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=RelatedLabels&amp;max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

這段我們在原來迴圈結束標記 </b:loop> 前面塞入呼叫收集相關文章的函式。程式碼2的行08部分,max-results=10可以修改,理論上數字愈大可以亂數取樣到較舊的文章,建議要視文章性質,文章愈容易淘汰的話就取樣小一點。

STEP ③:最後把這些定義且取樣好的變數給呈現出來。我們直接在上面的html後加入

<!-- Fixed for Related Posts -->
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
ShowRelatedPosts(&#39;<data:post.url/>&#39;);
</script>
</b:if>

4 則留言:

  1. D NOW BA 您好:

    此文章內說〈我們直接在上面的html後加入〉

    是指哪裡呢??

    放上去??請教導??謝謝您了。彌月樂卡片.瓦力是留言

    回覆刪除
  2. 這個標籤的寫法是加了參數的,所以只要標籤完整,加在HTML裡的head標籤中都是可以執行的,只是執行先後順序不同罷了。真要建議的話,因為這個功能通常是比較在頁面下的物件,所以放在最後面是比較適合的。

    回覆刪除
  3. 謝謝您貼心回覆囉,雖然我還是試不成功。...再接再厲中..n____n

    回覆刪除
  4. 成功囉!謝謝D NOW BA的分享。

    回覆刪除

Related Posts Plugin for WordPress, Blogger...
// Dnow Function