在 Blogger 加入相關文章的功能

1. 在 Blogger 管理頁面 -> 版面配置 -> 修改 HTML，把展開小裝置範本打勾，搜尋「</head>」，並且在上方插入下列程式碼，其中 i <５ 表示相關文章顯示的篇數，紅字的部分，是用來控制相關文章的數量，預設五篇，請依個人需要修改。

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

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 表示每個標籤抓出最近幾篇文章的彙總，該數字必須要 >= 相關文章顯示的篇數，數字越大相關文章的亂數樣本也就越多。

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

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



<!-- Fixed for Related Posts -->

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

<script type='text/javascript'>

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

</script>

</b:if>

引用文章:Abin's Tech Note: 加入相關文章功能 (Related Post)