[ Blogger ] [ XML ] 如何在文章下方加入文字版 Related Posts 相關文章功能

*註：本篇文章的程式碼參考來源為這個部落格，但該篇文章也是參考他人的作法，並非程式碼原作者，而文章內註明的原作者網站已失去連結，所以原作者已不可考，因此程式碼在本站是以 Creative Commons 3.0 釋出。若你是程式碼原作者，認為這侵犯到你的著作權的話，請直接聯絡站長協助修改或撤下這篇文章。

相信大家都有注意到我們文章的下方會有一個 Related Posts 相關文章的功能吧~

這個功能對一個網站來說是非常重要的，假如讀者看完一篇文章後，因為 " 相關文章 " 這個功能又看到了他們有興趣的文章，這樣除了能增加他們停留在網站的時間，對他們也有無比的好處。

Laird Studio 使用的 Related Posts 其運作原理是利用 Blogger 的 " 標籤 " 功能，當一篇文章是使用多個標籤的時候，程式就會從這些標籤中的文章裡面隨機挑選五篇 ( 預設 ) 顯示出來。

而這個功能目前只有文字版本，如果站長想要圖片版本，建議可以使用 Linkwithin 隨機文章小工具即可。

講了那麼多，到底 Related Posts 這個功能是怎麼做出來的呢~

趕快來一睹為快吧~

本文開始~

請到 Blogger 管理介面 -> 範本 -> 編輯 HTML

請複製以下程式碼，然後在 </head> 標籤之前貼上：

<script type='text/javascript'>
//<![CDATA[

var relatedPostsNum = 0;
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedDates = new Array();
function RelatedLabels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedPostsNum] = entry.title.$t;
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>

P.S. while (i < relatedTitles.length && i < 5) 這段就是設定「顯示文章數」為 5 篇，數值是可以依照需求更改的唷！

接著按下鍵盤 Control + F ，搜尋以下字串：（ Mac 請按下： CMD + F ）

<b:if cond='data:post.labels'>

然後在 </b:loop> 前面加入以下  程式碼：


<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=RelatedLabels&max-results=10"' type='text/javascript'/>
</b:if>

P.S. max-results=10 是設定「顯示標籤數」最多為 10 個，一樣可以依照自己的需求更改數值！

最後在你想要顯示的 post-footer-line 加入以下程式碼：


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

*請注意：以下圖為例的話，上面的程式碼是被包含在 <div class='post-footer-line post-footer-line-3'> 這個 Class 裡面，實際上的應用要看你個人的需求，你可以把上面的程式碼放在任何一個 post-footer-line ，或甚至是放在 post-header-line。此外， post-footer-line-3 這個 Class 是多建立出來的，原本是沒有這個 Class 的喔！

按下儲存範本之後，你的文章就會顯示 Related Posts 囉！

題外話，一旦使用這個功能，你就必須特別注意文章標籤的使用，盡量不要一篇文章標了一大堆標籤，不然 Related Posts 會列出「完全不相關」的文章喔！

然而，這篇 Related Posts 的教學是針對電腦版網頁，如果你也想要在行動版網頁加入 Related Posts 的話，請移駕至以下網頁繼續學習：

[ Blogger ] [ XML ] 如何在行動版網頁加入文字版 Related Posts 相關文章功能

如何在文章下方加入文字版 Related Posts 相關文章功能的教學就到這邊~

我們下次見~

Search

2015年7月18日星期六