2008/11/14

[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

相關文章 :

58 comments:

Sango 提到...

最近你的blog真的是變成blogger急診室了...

不過!

我喜歡...^^

Skyvee 提到...

Sango,沒那麼厲害啦!關於blogger改版,大概也只有這陣子才有空,以後可能又要繼續偷懶一下.:p

就是愛ㄌㄚˇ噗 提到...

有這麼多的blog教學文章真不錯^^
像我們這種不懂語法的人只能看著教學做了…

謝謝你囉~ 希望你有空的時候可以多多發表這類的文章^^

Skyvee 提到...

別這麼說,其實也是互相交流啦! ^^

Simon Kwok 提到...

大大,
你好
我好喜歡此功能...
但有一些問題出現了,
有亂碼,
你可看我的網
http://kwoksimon.blogspot.com/2008/11/if.html

JIANG JIANG 提到...

剛剛 測試了一下

會出現亂碼的原因 應該是 不支援'中文'的分類標籤....

'英文'的分類標籤可以正常的顯示 ^__^

Simon Kwok 提到...

多謝大大指引...如大家知道中文字可解決後,請貼出跟大家分享.thanks again

a.u.g 提到...

哈哈,我本來要舉手發問,沒想到Simon跟我有同樣的問題耶! [我的亂碼:%E6%B8%AC%E8%A9%A6%E6%96%87]

既然是中文BUG那就沒辦法摟XD 總之,還是謝謝Skyvee!

Skyvee 提到...

可惜了中文顯示的部份,另外有一個相關文章教學文章,也很好用.可參考看看. Abin 的 加入相關文章功能

Skyvee 提到...

謝謝大家,中文標籤會變成亂碼的問題已找到解法, 請參考 步驟1 的那行新增的藍字程式碼, label=decodeURI(label);加了這行,中文就搞定了! ^^

小白 提到...

我也是中文標籤,
試了只有出現標題,
沒有內容...
這個功能很不錯,可惜不能用

小白 提到...

看到更新了
再試一次還是只有標題...

小白 提到...

是不是有什麼符號不能用呢?
我的標籤之ㄧ"【故事】看樹狗"
會出不來~
後來把【】拿掉就可以了

小白 提到...

剛測試【】不能顯示~
- 跟()可以用...

skyvee 提到...

小白,由於需要經過編碼轉碼的過程,所以標籤儘量不要含符號,比較不會有問題,不然就要像你一樣努力去try看看哪些可以解碼了!^^

Simon Kwok 提到...

thx skyvee大大,已解決了..

Skyvee 提到...

Simon, 不客氣,也謝謝你們的反應!!^^

通達人 提到...

謝謝你的分享,因為我比較喜歡你的「相關文章」,如果原來已經有另一個abin的「相關文章」http://abintech.azhai.org/2007/03/related-post.html
是不是要先把它移除呢?

通達人 提到...

再請問一下,如果想在標題後再加上日期的話,要怎麼改呢?

Skyvee 提到...

通達人,先移除比較好囉!否則就算彼此不影響,重覆出現也怪怪的. 這個功能沒有提供顯示日期,如果要改,可能要調整程式碼,不過我目前實在沒太多時間研究哩...真抱歉啊!

Jessie Shu 提到...

請問怎麼設定字體大小顏色呢...如有空再幫我回答囉!!謝謝

Skyvee 提到...

Jessie 想改哪裡的字體大小呢? 每一個地方不太一樣哦, 不然你可以用關鍵字 font 查一下你的範本目前的設定,再進行修改.font-family 是字型, font-size是字體大小, font-color是顏色

Mark 提到...

Skyvee大大:
想請教您,Google Blogger的文章分類標籤可以一次修改嗎?
例如:我本來有數篇文章的分類是歸類為「旅行」的標籤,是否可以在不一篇一篇文章修改的方式下,一次把分類標籤改為「足跡」呢?

請您指教,謝謝!

Skyvee 提到...

Mark, 在[文章]--> [修改文章]--> 左邊有標籤清單, 先點一下你想改的那些文章標籤, 就會只出現 該標籤的所有文章, 然後再選取你想改的文章, 選[標籤動作]-->就能套用舊標籤或是新標籤了

豬出沒注意 提到...

Skyvee你這篇文章是我一直想要找的。
感謝你讓我的Blog終於有相關文章(related posts)功能。
部分內容引用在我的文章內。
http://pigdiscovery.blogspot.com/2009/06/fun-new-run-high-blogger-related-posts.html
ps:放心我有註明引用來源^_^

skyvee 提到...

Hi,謝謝你,我自己也很喜歡這功能,也很高興你也喜歡.^^

阿婷 提到...

你好!這篇文章讓我的blog有相關文章的功能,真的非常方便。^^

但是有個問題想請教,關於相關文章的"字型設定(大小與顏色)"要從那個地方修改呢?
是不是可以在你這段的程式當中加語法?

Skyvee 提到...

阿婷你好,

如果要修改相關文章的字型, 可以在CSS區先設定這個區塊的字型, 然後再套用此CSS設定.

ZoeChen 提到...

Skyvee,您好,
這陣子開始經營blogger之後,發現您的網站真的是佛心來的,超好用。
相關文章這個功能我一開始引用的時候,功能都正常,但是後來突然失效了,我試著用薄弱的電腦知識去看原始碼,而且有重貼一次相關文章的程式碼,但還是抓不到原因....想請問Skyvee有什麼樣的可能性導致這樣的問題呢?
我的網誌:http://happinessatoz.blogspot.com/
感激不盡~*

skyvee 提到...

Zoe您好, 先謝謝您覺得文章有用,:).
我在猜,會不會您的標籤有個特殊字元,"☀",所以無法正常顯示, 請您先移除這個字元, 然後再看看會不會正常?

ZoeChen 提到...

哈哈,skyvee,你真是行家啊,果真是那個特殊字元的關係耶!真是太謝謝你了! ^^b

Han 提到...

skyvee您好,
我從另一個頁面過來這裡,因為我又有問題了
我的部落格http://leehan706.blogspot.com
已安裝好依標籤分類的相關文章,
但是不知道為什麼,我覺得文章底部的相關文章都是一樣的文章在輪迴,無法連到其他的文章,是哪裡出了問題呢?
麻煩您了

謝謝

Skyvee 提到...

Han,

相關文章是抓最近幾篇文章, 所以出現的文章數會覺得重覆是這原因.

Maruko 提到...

skyvee你好,
我成功的安裝了加入相關文章的內容, 但有個小問題
我的文章結尾感覺是跟相關文章連起來的, 不像你的有一條線做區分的,不曉得該怎麼做才不會讓文章看起來跟相關文章是連一起的呢??
謝謝你~~

Skyvee 提到...

Maruko 您好,

我在標題(h3)的CSS裡,有設定加一條線.你可以參考一下我的CSS碼.

.post h3 {
funhp padding-bottom: 3px;
border-bottom: 1px solid #ccc;
font: normal bold 120% 'Trebuchet MS','Lucida Grande';
color: #ff6633;
}

然後再調成你自己想要的.:)

Ryan 提到...

你好
有問題想請教您
想請問相關文章標題前方的"‧"
‧要去哪邊修改成自己要的符號呢?
謝謝

Skyvee 提到...

Ryan,

首先你要先準備自己的圖檔,上傳到某一個網頁空間,取得該圖片的網址後,在 .post{}後,加入這段程式碼.
.post ul li {
margin: 0px 0 3px 30px;
list-style-image: url(圖片網址);
list-style-type: square;
}
就能換成你想要的圖案.

vagabondrenovatio 提到...

請問sky大,
相關文章有辦法讓它變成是抓該篇文章上下的幾篇文章嗎?
因為我的有些文章分類是有(上)(下)
那樣的話會變成相關文章不是那麼的相關...
所以來請教您有沒有解決方法?
感謝大大的回覆<(_ _)>

Denish 提到...

請問可以在相關文章標題後面加日期或時間嗎?
感謝:)

Skyvee 提到...

Denish,日期或時間的功能,可參考Abin的加入相關文章功能的方法喔! :)

skyvee 提到...

Denish,相關文章標題後加日期,可參考abin的加入相關文章功能喔!

Skyvee 提到...

Denish,相關文章標題後加日期,可參考abin的加入相關文章功能喔!

Skyvee 提到...

vagabondrenovatio,
不好意思,現在才看到您的問題.做法是,可以將有上下集相關的標籤設成同一個,這是一個解法,您參考看看.

Code 370 提到...

請問,有辦法把『相關文章:』下面的標籤名稱取消嗎?
謝謝。

Skyvee 提到...

Dear Code,這個功能就是要突顯標籤分類,如果沒有標籤名稱,排起來很奇怪,不是嗎?

十甫寸 提到...

您好,您的文章真棒
請問相關文章可以設定不顯示現在正在看的文章嗎?謝謝

十甫寸 提到...

您好,不好意思再問個問題。
我在BTemplates下載了一個叫DailyNoteBook的範本
(http://btemplates.com/download/3972/)

將本文的code加在1675行的下面
可是結果只會出相「相關文章」的標題,不會秀出標籤及文章。
請問這要怎麼去解決比較好呢?謝謝您:)

Skyvee Tsai 提到...

十甫寸您好,
1. 理論上相關文章的清單裡應該是不會出現正在閱讀的文章, 您可以參考我的部落格. 剛看了一下, 可能跟您目前套用的 template 樣式有關, 每個template 裡的語法, 都有其目的, 您可能要需要花時間進去看, 要怎麼修改

2. 您目前的相關文章, 看起來是功能正常了.

十甫寸 提到...

謝謝您的答覆^^
因為功能不正常,我又把範本改掉了。
現在在另一個網誌上做測試。
持續研究中,也希望您能給我建議,謝謝您

十甫寸 提到...

不好意思沒說清楚,您之前看到的是改掉後的範本
我現在想要改的範本在另一個網誌,長得像筆記本那樣。
謝謝!!

十甫寸 提到...

它突然又有了!好奇怪
我再研究看看,不好意思,謝謝您

Skyvee Tsai 提到...

十甫寸,

自從 blogger 官方開始把重心放在提高"介面友善"的方向後, 我幾乎都以官方提供的 template 為主, 然後, 再自己微調版型, 至於外掛程式, 也儘量精簡.
建議您若想套用非官方提供的 template, 儘量找時間比較近的版本. ^^

十甫寸 提到...

謝謝您:)
目前修改的差不多了,相關文章會出現目前正在讀的文章的問題
官方或非官方的template都會出現!!還在找解決的方法中

Skyvee Tsai 提到...

@十甫寸,

你的 相關文章標籤前, 都會有一個前置符號"/", 是不是跟這個有關?

十甫寸 提到...

有可能喔!我來研究看看,謝謝!!^^

匿名 提到...

請問版大,相關文章的功能,是否可以做到只顯示目前瀏覽文章的前幾筆和後幾筆呢?
例如目前看此標籤分類的第50篇文章,可以只顯示前後5筆的相關文章嗎?而不是顯示最新10文章呢?

匿名 提到...

請問如何在相關文章的側邊放入adsense廣告呢?

匿名 提到...

請問行動網頁的部分怎麼弄呢?

張貼留言

謝謝您願意在此分享心得, 讓文章內容更豐富.