[Blogger] 依標籤分類的相關文章(related posts)功能

        在 Blogger 中，如果每篇文章下，能夠列出跟這篇文章相同類型的其他文章，對許多讀者來說，能節省更多搜尋時間。因此，相關文章(related posts)的功能是很重要的。只要加入一段程式碼，就可達到效果，讓 Blogger 除了能自設列出文章的相關標籤，還可以將相關文章依標籤來分類。

























        通常一篇文章可能會下很多個標籤，因此依標籤來分類相關文章就顯得其獨特性。

首先，先到版面配置 -->修改HTML --> 打勾展開小裝置範本。

1.然後找到這行程式碼，如果範本中出現不只一處，可參考附圖的相對位置，加入下列這段落落長的程式碼。(紅字部分可自行修改)


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>
<!-- *****************http://hoctro.blogspot.com*****Jan,2007******************
-->
<!-- *****************Related Articles by Labels - Take Two******************
-->

<!--
Modified by JackBook.Com to make it easier to use.
1. Now, users don't need to change anything to use this widget. just copy and
paste, and done!
2. The current article will also be listed, now it's no more.
-->

<div class='widget-content'>
<h3>相關文章</h3>
<div id='data2007'/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
maxNumberOfLabels = 4; //相關文章標籤數
maxNumberOfPostsPerLabel = 10; //文章總數

function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
label=decodeURI(label); //避免中文標籤出現亂碼
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>


如下圖所示 ▼

按下儲存後，就可出現依標籤分類的相關文章了！

相關文章