[技研]為Blogger 增加延伸閱讀的功能
本文參考 Abin's Tech Note 後修改
一直以來都看著別人的部落格有著延伸閱讀的功能，這兩天稍微上網找了一下，發覺Abin's Tech Note 的 這一篇文章 講的比較好用，於是動手來改看看，在這邊稍微做個記錄，不過我加的位置跟該篇文章所說的位置有點出入，另外原文中會顯示成英文的"延伸閱讀"文字已被我修改成中文了~有興趣的人再仔細看看吧~
OK~開始修改前記得先來備份一下你的樣板(不會備份請自己上網查，沒那麼難吧~)，接著請把下面這一段原始碼放在你的</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, '<')).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('延伸閱讀: <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>
加入了上面的原始碼之後，其實有一個小Bug，就是他會把自己這篇文章也加到延伸閱讀的文章內，所以為了解決這個小Bug，我們還得要加上下面這一段，請往下看下去吧~ 接著我們要找到顯示分類標籤的程式部分，，如下方這一段
<b:if cond='data:post.labels'>
Category:
<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>
在他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=5"' type='text/javascript'/>
</b:if>
<!--研伸閱讀結束-->
整個加上去後大致上會是像下面這樣，在這邊要稍微說明一下，這邊已修改了原始文章中延伸閱讀的顯示篇數為五篇，若是各位想改數量的話，可以找到 "max-results=5""這段原始碼，把5改成其他數字即可
<b:if cond='data:post.labels'>
Category:
<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:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=RelatedLabels&max-results=5"' type='text/javascript'/>
</b:if>
<!--研伸閱讀結束-->
</b:loop>
</b:if>
OK了~我們解決了之前所說的Bug了，最後我們要加上把延伸閱讀顯示出來的部分了，一般來說通常顯示延伸閱讀都是看完文章之後才看延伸閱讀的，所以我們要找到
<data:post.body/>
然後把下面這一段原始碼加在後面就可以了
<!--延伸閱讀開始-->
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
ShowRelatedPosts('<data:post.url/>');
</script>
</b:if>
<!--延伸閱讀結束-->
完成了，大家趕快去測試看看吧~如果各位還有其他的問題，可以上原始網頁去看看喔~
留言