Blogger入門: 加入相關文章功能 (Related Post)

Blog 文章一多，分類標籤的運用在找尋特定文章時就很重要。當有些讀者從外面的搜尋引擎或 RSS 連進來看 Blog 特定文章的時候，在文章的後面隨機列出一些相關文章的標題，一方面可以讓讀者找到更多對方可能會感興趣的 Post，另一方面也可以吸引讀者多去瀏覽自己其他的文章。

首先，塞入以下這段 Javascript (在 </head> 標籤前)：

<script type='text/javascript'>

//<![CDATA[



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, '<')).replace(regex2, '>');

    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>

找到下面這段在文章內容後面顯示分類標籤的程式：

<b:if cond="'data:post.labels'"><data:postlabelslabel/><b:loop values="'data:post.labels'" var="'label'"><a href="'data:label.url'" rel="'tag'"><data:label.name/></a><b:if cond="'data:label.isLast">,</b:if></b:loop></b:if></span>

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

<b:if cond="'data:post.labels'"><data:postlabelslabel/><b:loop values="'data:post.labels'" var="'label'"><a href="'data:label.url'" rel="'tag'"><data:label.name/></a><b:if cond="'data:label.isLast">,</b:if>    <!-- Fixed for Related Posts -->    <b:if cond="'data:blog.pageType">       <script src="'" alt="json-in-script&callback="RelatedLabels&max-results="10" type="'text/javascript'/"></b:if></b:loop></b:if></span>

抓完文章當然就是找地方顯示！只有一個限制：一定放要在文章分類標籤那段的後面（就是一定要呼叫過上面那段，這樣也才會有相關文章可以顯示啊～），所以我就直接放在後面（上面這段 </b:if> 標籤的後面就可以，位置依自己的樣版外觀調整），這部分呼叫顯示相關文章的程式碼如下：

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

2009年5月29日 星期五

加入相關文章功能 (Related Post)

2009年5月29日星期五