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

推文分享

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


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

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

1.然後找到這行程式碼 <p><data:post.body/></p> , 如果範本中出現不只一處,可參考附圖的相對位置.加入下列這段落落長的程式碼.(紅字部分可自行修改)
<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>

如圖所示.


2. 其中出現幾個標籤的相關文章及文章數目是可以自己調整的.
maxNumberOfLabels = 2; //相關文章標籤數
maxNumberOfPostsPerLabel = 5; //相關文章數


3. 按下儲存後, 就可出現依標籤分類的相關文章了!


2008/11/16 更新 : 中文標籤會變成亂碼的問題已解決, 請參考 步驟1的某一行新增的藍字程式碼, label=decodeURI(label);

參考來源:
New and Improved "Related Articles" Widget using the new Google's Ajax Feed API
Related posts on blogger

創用 CC 授權

本創作適用 姓名標示-相同方式分享 2.5 創用 CC 授權，台灣 並依循所適用的授權條款。

相關文章 :