在 Blogger 加入相關文章的功能

[ 前言 ]

當文章越發越多，讀者可能沒那麼多時間一一檢視你的文章，但是又想讓讀者可以閱讀其他文章，因此可以在每篇文章的底部隨機列出相關文章標題方便讀者閱讀其他感興趣的文章，是不是很貼心呢，馬上開始動手做吧。

[ 相關文章的使用方法 ]

步驟 1.

在 Blogger 管理頁面 -> 版面配置 -> 修改 HTML，把展開小裝置範本打勾，搜尋</head>，並且在</head>上方插入下列程式碼，其中 i < 5 表示相關文章顯示的篇數。

<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, '<')).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>

步驟 2.

搜尋下列程式碼。

<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>上方加入下列程式碼，其中 max-results=10 表示每個標籤抓出最近幾篇文章的匯總，該數字必須要 >= 相關文章顯示的篇數，數字越大相關文章的亂數樣本也就越多。

<!-- 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>

步驟 3.

最後要插入顯示的位置，一定要把下列程式碼貼在 步驟 2. 程式碼</b:if>後面，只要在 步驟2. 程式碼的後面，隨便你要顯示在哪裡都可以。

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

[ 參考資料 ]

• Abin's Tech Note：加入相關文章功能 (Related Post)