[Blogger] 部落格上的相關文章

From: Polin Wei

三個步驟, 讓您的 Blogger 的每一篇文章被點閱時, 可以顯示與這篇文章相關 標籤(Label) 的文章

step 01:

首先在 版面配置->修改 HTML 中的 </head> 標籤前，塞入以下這段 Javascript ()：

<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('Related Posts: <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>

函示裡紅字的部分，是用來控制相關文章的數量，這裡用五篇

Step02:

找到下面這段程式段(在文章內容後面顯示分類標籤的程式)：
<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>

在迴圈結束 </b:loop> 前面塞入呼叫收集相關文章的函示，像下面這樣：
<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>

紅色的部分也是用來限制數量，數字加大，可以增加相關文章的亂數樣本，也就是相關文章可以顯示越多舊的相關文章。

Step 03:
抓完文章當然就是找地方顯示囉！只有一個限制：一定放要在文章分類標籤那段的後面（上面這段 標籤的後面就可以，位置依自己的樣版外觀調整）這部分呼叫顯示相關文章的程式碼如下：
<!-- Fixed for Related Posts -->

<b:if cond='data:blog.pageType == "item"'>

  <script type='text/javascript'>

    ShowRelatedPosts(&#39;<data:post.url/>&#39;);

  </script>

</b:if>


if cond='data:blog.pageType == "item"' 這個判斷句代表: 當目前所在頁面是特定文章的連結內頁才會發生，所以上述的顯示相關文章效果，在首頁是看不到的，要隨便點入一篇文章的內頁連結（當然，那篇文章要有加註標籤被分類過），在顯示標籤的後面才會跑出來。

參考文獻: Abin's Tech Note 加入相關文章功能 (Related Post)