[分享] 讓Blogger文章底下，能夠顯示『相關文章』(Related Post)。

當您的Blog文章一多的時候，標籤就是個很重要找文章的路徑。
不同於傳統的樹狀標籤，現在的標籤運用可以一對一，也可以一對多，更可以多對多。

而在分享Blog文章讓人選讀的時候，通常會想要讓人在自己的網站停留更久的時間，
這時候，要是文章底下，能夠自動將相關文章給列示出來，
就可以讓讀者看到其他相同有興趣的文章，更能吸引讀者去閱讀或瀏覽其他的文章。
這個Blogger Hack，是參考自『ABIN'S TECH NOTE』。


我把它紀錄在自己的Blog上，方便以後使用。

在修改之前一定要先『備份』喔！

1. 一樣的打開Blog後台→『設計』→『修改HTML』→勾選『展開小程式範本』。
2. 把下列的JavaScript，加入在〈head〉與〈/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('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>

黃色的部分：就是您要顯示在Blog文章下面，所要顯示的字樣。可以自行修改『Relatd Posts:』變成你想要顯示的文字。
紅色的部分：就是您想要從相關標籤裡面顯示的文章篇數。
                        〈建議是不要太多，因為這樣會讓您的Blog跑的速度變慢。〉

3. 再來就是把上述JavaScript的函數，呼叫出來，顯示在我們的文章後面。
    要先找到標籤的程式碼，就是下述：

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

紅色的程式碼，就是決定要抓取的母體大小，但是這個數字必須大於前面，步驟2紅色的部分。當然，這個部分數字越大，亂數的樣本越大，以前的文章更能找出來，但是相對的耗用的資源就會越大。


4. 再來就是把我們上面的動作，顯示出來。
    把下述程式碼，加在上述〈/b:if〉標籤後面就可以了。

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

這個顯示相關文章效果，在首頁的文章是看不到的，得要點入文章的內頁連結（當然，那篇文章要有加註標籤被分類過），在顯示標籤的後面才會顯示效果哦！