2007-03-05

加入相關文章功能 (Related Post)

Blog 文章一多,分類標籤的運用在找尋特定文章時就很重要。當有些讀者從外面的搜尋引擎或 RSS 連進來看 Blog 特定文章的時候,在文章的後面隨機列出一些相關文章的標題,一方面可以讓讀者找到更多對方可能會感興趣的 Post,另一方面也可以吸引讀者多去瀏覽自己其他的文章。Blogger 系統所有的文章都有靜態連結網址,看起來頁面內容並不是「動態」從資料庫抓出來的(除了那些要去即時收集的模組),所以在單篇文章的後面亂數挑出一些相關的文章表列出來,應該也不會太花時間。

原理其實很簡單,透過文章分類標籤的 RSS Feed,找出一些和該篇文章有相同標籤的文章,它們就是「相關文章」,然後亂數挑出幾篇,過濾內容將標題、連結和日期列出就大功告成了。在網路上找到了一些範例,其實不大滿意,因為有個 bug:相關文章應該是排除本文之外有相同分類標籤的文章,偏偏這些範例挑亂數的時候有可能會挑到本文,這樣就會看到相關文章模組內還有本文標題在裡面的奇怪情況(邏輯上是沒錯啦)。所以看到這些範例除了例行性會去修改增加可讀性外,還要自己去解決這個 Bug。這個 Hack 應該是我 Blog 最後一個大規模的修改,之後除了調整 CSS 和外觀外,差不多想弄得功能都弄完了~

老樣子,要修改之前要先備份樣版。首先,塞入以下這段 Javascript (在 </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, '&lt;')).replace(regex2, '&gt;');
    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>

獨獲創見的部分就是把該篇本文的 URL 當變數傳入 Javascript Function 裡,在剔除重複文章的時候把自己一併從陣列裡刪掉,這樣就解掉上述的 Bug 啦!此外,函示裡紅字的部分,是用來控制相關文章的數量,我預設用五篇,請依個人需要修改。接下來,就是塞入收集相關文章的 Javascript,找到下面這段在文章內容後面顯示分類標籤的程式:

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<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>

在迴圈結束 </b:loop> 前面塞入呼叫收集相關文章的函示,像這樣:

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<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>
    <!-- Fixed for Related Posts -->
    <b:if cond='data:blog.pageType == "item"'>
       <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=RelatedLabels&amp;max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

同樣的,紅色的部分也是用來限制數量,每個標籤抓出最近的幾篇文章來匯總(該數字至少要 >= 上面 Javascript 裡定義顯示的數量。數字加大,可以增加相關文章的亂數樣本,也就是相關文章可以顯示越多舊的相關文章)。抓完文章當然就是找地方顯示囉!只有一個限制:一定放要在文章分類標籤那段的後面(就是一定要呼叫過上面那段,這樣也才會有相關文章可以顯示啊~),所以我就直接放在後面(上面這段 </b:if> 標籤的後面就可以,位置依自己的樣版外觀調整),這部分呼叫顯示相關文章的程式碼如下:

<!-- Fixed for Related Posts -->
<b:if cond='data:blog.pageType == "item"'>
  <script type='text/javascript'>
    ShowRelatedPosts(&#39;<data:post.url/>&#39;);
  </script>
</b:if>

改完儲存再來看效果吧!還記得之前一篇文章提到,if cond='data:blog.pageType == "item"' 這個判斷句代表的意思是什麼吧!就是當目前所在頁面是特定文章的連結內頁才會發生,所以上述的顯示相關文章效果,在首頁是看不到的,要隨便點入一篇文章的內頁連結(當然,那篇文章要有加註標籤被分類過),在顯示標籤的後面才會跑出來。不過最後提醒一下,Blog 文章分類的標籤不要亂用,我知道分類的 Label 可大可小,最簡單的可以只當分類來用,一篇文章只有一個標籤,搞大一點也有人愛亂標標籤,每篇文章都給它搞個七八個 Label,這樣不但會拖慢這個 Hack 的速度,Label 那麼多讀者也很難從你的一堆標籤裡找出適當的分類,這樣不就失去分類的意義嗎?

參考文章:
Blogger相关文章模块升级版
给Blogger添加相关文章功能

回應: 132

異塵行者 提到...

謝謝您精彩的教學。對於不熟悉網頁語法的我來說很容易上手,幫助也很大。

thinkerCKD 提到...

謝謝您的教學,相當實用!有個問題想請教,在我的 blog 裡,相關文章標題後面的日期卻不是我發表的日期,是不是哪邊沒有弄好呢?

Abin 提到...

嗯!你幫我找到了一個 Bug,感謝。
在處理文章標題和連結的時候,卻漏了時間的部分,所以發表的日期會不正確,我已經修正了,如果你有用這個 Hack,修改RemoveDuplicatedPosts() 裡的程式碼就行了。

thinkerCKD 提到...

謝謝您! :)

Apple 提到...

Hi! First, thank you for your teach.

But I can't use your note now, because My blogger is Old Blogger.
My Blog "tag" are not same with your tag.

e.g. My tag>>: style type="text/css"

Your tag is>>: b:skin![CDATA[.

So, how can i use your script on my old blogger template?

I would like to use your calander, next page/oldest page link & 加入相關文章功能 (Related Post)on my blog.

Thank You =)

Abin 提到...

To apple: Sorry! The Blogger Hack here only could be used for the "New Blogger", not suit for OLD!

Apple 提到...

To Abin,

Thanks for your reply.

Hey, why you can use your own domain name http://abintech.azhai.org
for your blog in google-new blogger tamplate?

I also use my own domain name in google-blogger, but its cannot let me turn to "New Blogger Template", because i uses my own domain name. It cannot use new blogger tamplate.

So, how your blog can "turn to new blogger template"? How to do it?

Abin 提到...

To apple: About the domain name, you can refer the blogger official document, I followed those steps to apply.
And, my blog was not turned from old blogger, I made it since the "Blogger Beta" was launched. So I didn't meet the problem to migrate templates from original blogger.

Apple 提到...

To Abin,
Thank you for your help! =)

Seeing2sea 提到...

很棒的語法!!!謝謝~~~

星子 提到...

這個功能我很久以前就想要了!
謝謝您提供,不到幾分鐘就加好了
傑克,真是神奇啊~~

Ursula 提到...

追隨星子的腳步,我也學了這招。感謝Abin的教學,清晰易懂。感恩~

星子 提到...

不好意思!
想來請教一個問題:
我發現某些頁面「相關文章」出不來
主要是同時使用這兩個標籤時:
土耳其之旅、旅行
一定不會出來
如果有什麼線索,麻煩通報一聲
謝囉!

Abin 提到...

To 星子:「我發現某些頁面相關文章出不來,主要是同時使用這兩個標籤時:土耳其之旅、旅行,一定不會出來」,不過,我剛剛看了一下,像是您這篇土耳其愛物誌,我看相關文章就都有出來呀~我又多翻了幾篇文章,看起來都是正常的。
由於這個 Hack 也是玩 RSS feed 出來的結果隨機挑出相同標籤的文章來顯示,會不會是你在試的時候,Blogger 的 RSS 剛好又不大正常?(之前有發生過很多次喔),所以有類似狀況又發生的時候,你可以檢查 Blogger 關於標籤的 RSS 正不正常,如果不正常的話稍稍等一下就行了。

星子 提到...

真的耶!
原來是blogger RSS不穩的問題嗎?
因為其他文章不會
所以我也沒想那麼多
謝謝你幫我測試這個問題~~

Arthur Yip, 提到...

Thanks! I modified my template by following your tips.

bkstone 提到...

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


我怎麼找不到這些程式碼

bkstone 提到...

我已經在網上找到答案了,要勾選Expand Widget Templates 就可以看到了,希望對有這個問題的人有幫助,謝謝!!

讀書人 提到...

我試好了~~~謝謝您!
不過怎麼讓 Related Posts:
英文改成中文 ?
並且跟相關文章同一行呢?
謝謝您!

讀書人 提到...

搞定囉~~~~再次謝謝您!

雙羊 提到...

要大聲的說:
謝謝你~~~(泣,好感動)

受惠的人留

Violet 提到...

版主你好:

我的問題和之前讀書人類似..
要怎麼樣把"related posts"移到下一行呢?
它現在和我的文章黏在一起了...

另外再請問一下...
這個字體大小如何設定?
因為我做成功之後顯示出來的字非常小...

感謝版主的分享!

Abin 提到...

To Violet: 你的問題有兩個部分,第一個部分是和文章黏在一起,請搜尋程式碼裡的這一段:
document.write('Related Posts: <ul>');
它是產生「相關文章」區段的第一行,我的範例裡面沒加任何 CSS 修飾,目的是希望要用的人自己依照自己的版面調整,如果直接引用就會黏在你插入區段的後面。最簡單的調整法就是加個換行符號,就會分開了,像是這樣:
document.write('<br/>Related Posts: <ul>');
第二個部分其實和第一個問題有關係,如果你沒有根據自己的版面調整,而是直接貼用整段程式碼,則「相關文章」這個區段的樣式會使用你自己文章版面的樣式。所以如果你只要調整「相關文章」的字型大小,你應該針對該區段自行定義一個 CSS 樣式標籤,然後用在該區段的前後。你可以參考我 Blog 的原始碼,我有定義一個 <span class="post-related">,作用就是用來自訂「相關文章」區段的樣式,可以解決黏在一起的問題,也可以自訂該區段的字型大小。(因為這是我個人的樣版,不一定和大家的網頁樣版相容,所以沒有放在範例裡面)

Violet 提到...

謝謝版主ABIN的回答哦!!
對於我這種不是很懂這些的人而言,
真的幫助很大.
感謝!!

lifemirror (笨貓) 提到...

您好~我這裡有個問題, 相關文章在IE下顯示不正常, 而且只有針對《Blogger Hacks》 的標籤, 我試者把標籤移除再重裝, 一樣也不行, 我查不出問題所在, 可以請您幫我看看嗎?謝謝您
http://mymagicalstar.blogspot.com/

ethan 提到...

首先謝謝您的教學!
請問我照上面兩個語法貼回html後,
文章下沒有顯示出東西?這是什麼原因呢?
http://organic-exist.blogspot.com/
不好意思..我對網頁語法不熟悉.

Abin 提到...

To lifemirror & ethan: 這個 Hack 和個人版面有密切的關係,只要你有裝過其他的 Hack,或是對原版面程式碼有過修改,光是剪貼程式碼做些微調整,這個功能不但不會動,甚至可能會影響你安裝的其他功能。
所以,ethan,如果你對程式碼不熟悉,我建議你不要使用,因為一定是要針對自己的版面程式碼修改的。lifemirror,你可以看我的頁面在 IE 是正常的,因此應該是你在套用這個 Hack 時有改錯、或是該做的檢查和調整疏忽了。

Alvin 提到...

您好
感謝您的大方教學
但我在套用之後發現一個問題
也就是文章下方出現了兩次標籤
請問是哪邊出了錯??
謝謝您的指正

Abin 提到...

To Alvin:
看你的網頁原始檔,不是完全照著我的範例去做的(至少註解和插程式碼的地方都不一樣),想必應該自己有根據你的需求調整,我也沒有你的樣板,猜也猜不到,光這樣看也看不出個所以然,Debug 的事情要請你自己處理了。

水瓶企鵝 提到...

你好!

我照你的作法, 在 [/head] 前加入 Javascript

還沒進行第二步驟

可是當我儲存時, 出現錯誤代碼bX-fh2r12請問是甚麼回事?

Abin 提到...

To 水瓶企鵝:
是甚麼回事我不知道,沒碰過,剛剛 Google 了一下你的錯誤碼,好像是 Blogger 儲存樣板時的系統錯誤,和我的程式碼應該沒有關係。

A. HSIANG 提到...

你好!
我想請問一下 我之前相關文章的語法已經成功加入 可是自從我加入某些標籤後 新的標籤就沒辦法顯示"相關文章"了 舊的還是正常顯示 請問這是什麼問題呢? 謝謝你的回答~

Abin 提到...

To A. HSIANG:
相關文章功能是透過去抓 Blogger 提供的標籤 Feed、根據「同類型標籤」找出相關的文章隨機顯示出來,有幾種情況是會顯示不出來,第一,該文章標籤只有自己一篇文章,「當然」不會有相關的文章出現。第二,你加入某些標籤,基本上和原有和新標籤的文章本來就「不相關」,本來就沒有影響才是。第三,因為是「隨機」,不一定看得到你想看到的結果,多試幾次你會發現結果不一樣。第四,Blogger 的 Feed 系統還沒更新(有時後會很慢),關於這一點就只能等待了。
先確定你有沒有看懂我對「相關文章」的定義,所謂的相關文章,就是有用到與本文相同標籤(分類)的同類型文章,並不是什麼神奇的功能、能知道你還有什麼語意與該文相關的都能找出來,假設你一篇文章就只用到一種標籤來分類,相關文章就是隨機列出同標籤文章標題而已。

A. HSIANG 提到...

恩恩 多謝你回答 我想是因為系統更新太慢~

Benson 提到...

Abin 大哥,
謝謝你的技術教學分享 :-)

柏翔 提到...

Hello,在您的網站上看到你的教學與文章,覺得這是個很棒的功能,所以也將程式碼引用到網誌中使用,跟您打聲招呼,另外想請教為何我用IE觀看時,相關文章功能有時候會出現Javascript錯誤的訊息,但只要重新整理個一兩次就會正常?

是否有方法可以解決呢?

Abin 提到...

To 柏翔:

用 IE 觀看常會有 Javascript 錯誤或是不正常的情況,通常都是「安全性」設定的問題,你可以在 工具->網際網路選項->安全性->自訂層級,去調整關於 Javascript 的權限。
如果怎麼弄都搞不定,可能是 IE 有問題,您可以升級到 IE7、或是改用 Firefox,尤其是後者,一定可以解決你的問題。

老人 提到...

不知道為什麼,試了好久在 vista ie7 中看不到此 hack 的效果;但在 ie6, fx 中都可以正常顯示。

Abin 提到...

To 老人:

我可以確定和 IE7 沒關係,因為我現在就是用 XP SP2 + IE7 回覆您的留言,我看到的「相關文章功能」是正常的。
我已經測試過 FF, IE 5.5-7.0,這個功能看起來都是正常的,如果您不正常,請先確定是不是您 IE7 對於 Java 的安全性設定怪怪的,這個 Hack 我相信應該沒有什麼不相容的問題。

CheungKeh.Tsang 提到...

学到了,刚开始使用blogger,感谢大哥精彩的分享。
唯一的遗憾是标签和相关文章前面的小图标在IE中重叠,不过,在FF,SAF,OP中都正常,已无关大雅了,谢谢

通達人 提到...

我發現可能是另一個問題。我的文章標題內有<和>,導致相關文章會出現斷行。請看這個http://prudentman.idv.tw/2008/06/html.html。我想這有可是因為處理變數的型態的關係,因為,右邊的Blog Archive內的標題是正常的。

Abin 提到...

To 通達人:
你的確發現了一個問題:一旦標題內有HTML標籤時,會導致顯示出來的「相關文章標題」,受到這些標籤的影響。
謝謝你的意見,關於這一點我做了修正,也同步更新了本文的原始碼(改了兩行)。原理很簡單,我利用「正規式」去取代「相關文章標題」的每個字串,把 HTML 標籤的起始和終止符號(< 和 >),取代成特殊符號,這樣即使是標籤,都會被顯示成一般字元,我也拿您的網址做了一下驗證,應該沒問題了!
修改處,先找到以下這一行:
function RelatedLabels(json) {
在它下面加兩個正規式字串的宣告:
var regex1=/</g, regex2=/>/g;
然後標題字串那行取代成:
relatedTitles[relatedPostsNum] = (entry.title.$t.replace(regex1, '&lt;')).replace(regex2, '&gt;');
這樣就可以解決以上的問題了(也可以參考修正過的本文)。

Mango 提到...

大大您好,我又來取經了,不過途中遭遇些許小問題想向您請教:
我弄好以後,自己測試了一下,發現只有「推理邏輯」這個標籤下的文章,點進去以後相關文章的功能出不來,其他的分類都沒有問題,甚至「推理邏輯」這標籤裡其中有跨到別的標籤的兩篇文章也可以正常運作,只有單純被分類在「推理邏輯」的文章出問題,不知為何,百思不得其解,遂向您請教;煩心、費時,請見諒。 <(_._)>
http://keysmile.blogspot.com/

Abin 提到...

To Mango:
我想您也不是第一次問這類問題的人了,我連去你的 Blog 一看,你說的問題都沒發生,關鍵還是兩個字:「時間」。
先看這個相關文章模組的原理:它是透過該標籤的 RSS Feed、找出文章並且列出標題,只要這類透過 RSS Feed 做出來的功能,都有一個關鍵狀況:如果系統的 RSS Feed 還沒更新、你就什麼都抓不到。至於多久更新一次、什麼時候更新,這不是使用者能知道和決定的。
所以你特定文章的標籤「相關文章」出不來,不是因為有什麼 Bug、而是系統的 RSS Feed 還沒更新所致,多等個一天兩天吧!狀況會自己解決的。

Mango 提到...

感謝您的回答,現在我懂囉^^

Leogogo 提到...

當我把程式碼放進後,要儲存模板都失敗,回覆問題如下,請問我是哪個不問有誤,謝謝!

我們無法儲存您的模版
請修正下列錯誤,再重新提交您的模版。
我們無法剖析您的範本,因為它的結構不完整。 請確定所有的 XML 元素均已正確關閉。
XML 錯誤訊息: The element type "b:skin" must be terminated by the matching end-tag "".

Abin 提到...

To Leogogo:
錯誤訊息不都告訴你哪裡錯了嗎? b:skin 有起始標籤卻找不到結束標籤,代表你貼原始碼的時候不是漏了、就是貼錯地方。

Apple 提到...

謝謝您這個hack!我有一點想法,假如能夠做到以下的效果就更好了:

狀況:
1. 顯示相關文章的文章有標籤X、Y、Z。
2. 文章A、B同時有標籤X、Y、Z三個標籤,文章C有X、Y兩個標籤,文章D有Y、Z兩個標籤,另外文章E、F、G分別各只有X、Y或Z一個標籤。
3. 顯示相關文章最多顯示5篇。

現時的效果:
文章A、B、C、D、E、F、G隨機抽出5篇顯示。即是有機會將最有關係的文章A、B排除在外。

理想的效果:
能夠判斷文章A、B的相關度最高,必定顯示,也能夠判斷其次是文章C、D,也必定顯示。剩下的一個餘額則是E、F、G隨機抽一篇。

Abin 提到...

To Apple:
我的「相關文章」只是單純用隨機方法找出「有關聯」的文章,沒作到那麼精準、還用相關程度篩選。您的想法很好,但實作起來相當複雜。如果您有興趣,可以看另一位網友水瓶尤加利實作出來的文章:依相關度排序的「相關文章功能」

Chunwei。 提到...

感謝abin大的 詳細教學~

讓我的BLOG更專業了一點...||

還有個問題想請教~

就是最後SHOW出的成果~如何讓

Related Post可以換行呢?

不要接續在標籤後~~

原本是這樣:


張貼者: Chunwei。 位於 13:46

標籤: 吃吃喝喝, 遊記 Related Post:

...

想改成這樣:

張貼者: Chunwei。 位於 13:46

標籤: 吃吃喝喝, 遊記

Related Post:


換行的指令應該加在何處阿?

麻煩有空在為小弟指點迷津^^

Chunwei。 提到...

哈哈~

我自己搞定了^^

再次感謝abin大的教學!

殺手豪 提到...

作者已經移除這則留言。

阿量 提到...

终于完成了!感觉照棒!谢谢你的教程!

MKnight 提到...

請問這語法可以修改成「同分類上/下一篇」(像Pixnet的blog那樣)的功能嗎?(不是隨機而是可以依順序翻頁。)謝謝。

Abin 提到...

To MKnight:
要改成同分類當然可以,問題是,Blogger 沒有「分類」的觀念,只有「標籤」。一般分類只能「一篇文章屬於一種分類」,標籤則可以「一篇文章擁有多個標籤」,如果你想在 Blogger 上把標籤硬搞成分類也行,那就是每篇文章「只能」有一個標籤。
如果是這樣,這個「相關文章」的模組在找相關文章時,就只會列出「同分類的文章」,就能達到你要的效果。
至於隨機的問題,只要修改隨機挑選文章的部份程式碼,就會列出從最新的排列到舊的文章順序。

MKnight 提到...

謝謝回覆。我的目的不是強調「延伸閱讀」,而是「依序翻頁」,讓讀者在進入某一標籤/分類後,能夠一頁一頁絲毫不漏的往下翻閱讀畢。所以我只需要同標籤裡當前文章的「前一篇」與「後一篇」。下面這篇連結的作者也與我有同樣的想法:
http://baronpluto.blogspot.com/2008/09/blogger.html
【在文章中加入「相關文章」功能】

恕我駑鈍,沒有能力自行編寫或修改語法。這篇留言只是反應另一種閱讀網誌的習慣與需求,板主無須擱在心上。但若板主恰好也有興趣,那就是我們的福音了。:D

SODA 提到...

版主你好
目前其實不知道遇到什麼問題,copy code都沒什麼問題,儲存也很順利,但就是什麼都沒顯示,不知道哪裡出錯了?!

Aka Clauris 提到...

Abin版大你好,
我又遇到一些問題不知如何解決,請看:
IE出現的問題
- Tag的小圖失蹤了,還有相關文章下的距離過寬 (not balanced)
FF出現的問題
- Tag的小圖出現了兩次,還有相關文章下的距離過寬 (not balanced)

如果有空的話請去的網誌看看,拜託了,謝謝!

My Blogger

(PS: 因為我在測試當中所以借了你的relatedpost小圖,問題解決後我會換掉:) 不好意思。)

Abin 提到...

To Aka Clauris:
首先,你的問題都是出在調整樣式的語法弄錯,或是調整得不好,導致版面沒辦法顯示成你要的結果,和我這篇的 Hack 沒有關係,手動調整前請先熟悉 CSS 和 HTML 的規則,不然類似的問題還是會發生。
IE tag 小圖消失和 FF 小圖出現兩次,原因是一樣的,你標籤圖示樣式那一段:<span class='post-labels'>,後面結束的 </span> 放錯地方,應該是放在 "標籤:" 的後面,你放到 ShowRelatedPosts() 這個 script 的後面,在顯示上當然會不正常。
至於距離過寬,是因為你用 <br>、又硬設 post-related 的行高 line-height:4em; (我的原始碼裡應該都沒有這些東西吧),建議你修正的方法是,拿掉 <br> 和行高設定,只要在呼叫 ShowRelatedPosts() 的那段 script 前後加上分段的宣告(<p><script>....</script></p>),就可以解決你的問題。

Claire 提到...

親愛的Abin版大你好!!
實在不想拿這簡單問題困擾你..但是實在沒辦法了..因為我的問題跟樓上SODA依樣! IE無法顯示出來.. 但是FireFox是正常的..我用了另一個方法 (現在Blog上的)..依樣! IE一樣出不來 Firefox正常!!! 所以不知道是卡在哪個地方!! 真的要麻煩你了 感謝感謝..

Abin 提到...

To SODA:
你的狀況比較特別,說穿了,是你使用的「文章標籤內容」不能支援。
因為這個 Hack 的「相關文章」,是透過你該篇文章的標籤分類,找出有同標籤的文章,再從這些文章隨機挑幾篇出來。我發現你的標籤命名規則是「英文 // 中文」,發出錯誤的關鍵就是中間那兩條斜線: //,單純做標籤沒問題,但是進到 Javascript 裡面那兩條斜線會和網址裡目錄的斜線混用在一起,script 無法判讀,所以功能會失效。
如果你想用這個相關文章的 Hack,建議有兩種解決辦法:第一,儘量避免用這類保留字作為標籤內容,一勞永逸,不然下次碰到和標籤有關係的 Hack 照樣會出事。第二,就是在呼叫 callback 函式前先轉換特殊字元的字串 (replace),不然網址不認得, callback 函式根本沒辦法進去。

Abin 提到...

To Claire:
你的問題和 SODA 不一樣,人家的狀況是標籤名稱用到了網址的斜線 //,所以不管 IE/FF 都無法顯示。你的標籤名稱沒有問題,而且如果是在 IE 才有狀況,我相信應該是你 CSS 樣式定義用了 IE 不認得的語法,所以 FF 是正常的。請先參考我網頁的原始碼照著改(我的樣式在 IE 有測試過),因為你現在並不是使用我的 Hack,我也無從幫忙起。

Claire 提到...

Abin版大...

感謝你的回覆,我第一次就是用你的Code,發生一樣的狀況(IEx FFok) !! 所以才試用現在這個,我再試試看!!有問題在請教你了...謝謝 !!

ps..我說的一樣是說用"IE顯示不出來" << 誤會我的意思了..抱歉我沒敘述清楚.我想的也是有可能 //的問題..謝謝你了

Claire 提到...

Abin版大..

我找到問題了。也是標籤符號的問題 我標籤用了[ ] 所以IE認不得!! 感謝感謝

SODA 提到...

Abin版大
感謝你的回覆,不然我大概八百年過後還是不曉得哪裡出了問題

Aka Clauris 提到...

Abin, thanks for your instructions! :)

我一開始設定line-height:4em是因為..時間 / tags 中間的行距非常的接近...又找不到其他的解決方法...
不知道如何設定像你的blog一樣even的行距呢? 而不需要用到我這笨方法呢?

thanks again! :)

匿名 提到...

Finally it's done,thx u so much ~~~
Love & Peace
Natasha

哈种种(miloservic) 提到...

非常好用 谢谢

阿提拉 提到...

謝謝 此功能對鄙人極度有用

匿名 提到...

謝謝你的技術教學分享 :-)

九月 提到...

感謝你的教學^^
我拿去用了
有了這個,以後不用每次編完文章最後還要自己加相關文章了^^

Noid 提到...

常常來這邊取經~當然要留個言給版大請個安囉~

匿名 提到...

正需要這個功能

Sammi 提到...

請問可以改成顯示民國的年嗎?或者年份部份可以只顯示兩碼嗎?如果可以請問該如何修改呢?謝謝

Abin 提到...

To Sammi:
相關文章的日期是由變數 relatedDates 來處理的,程式碼裡有一行:
relatedDates[relatedPostsNum] = entry.published.$t.substr(0,10);
就是從資料來源裡「第零個」字元重開始抓出「十個」字元當作相關文章的年月日(中間有 '-'),所以如果只想顯示兩碼,你只要從「第二個」開始抓「八個」字元,理所當然就能讓年份只顯示兩碼,改成這樣:entry.published.$t.substr(2,8);
如果你想要顯示成民國的年比較麻煩,那要用 Javascript 來做字串處理,像是先把前四個字元抓出來 substr(0,4);,把字串換成整數後再減掉 1911 (就變民國年了),最後再把這個數字轉成字串、和後面的月日字串接起來就行了。

Xavier 提到...

請問一下有辦法把後面的日期拿掉嗎?

Abin 提到...

To Xavier:
只要把這一行:
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a> - ' + relatedDates[r] + '</li>');
改成:
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
日期就可以被拿掉了。

陳巴 提到...

剛開始用BLOGGER, 看了你的文章實在獲益良多, 也慢慢掌握了怎樣修改HTML, 不過這個"相關文章"真的怎也用不到...不知我什麼地方弄錯...

Pstrey 提到...

你好,我在使用你的Hack时会出现图中的情况
试了很多次了,而且不执行第一步,只执行第二步也会这样
请问改如何解决?

另外,那篇文章虽然和您的雷同了,不过真的只是巧合而已......

Abin 提到...

To Pstrey:
首先,本文提到的步驟,前半段是宣告 Javascript,後半段是呼叫執行,不執行第一步,呼叫的函式沒宣告,了不起就不執行而已。光看你的截圖,我看不出什麼端倪(看你一張圖就知道怎麼解決,我沒有那麼神),但感覺得出來是因為你樣板中用了不少模組套件,可能相互干擾下影響了顯示的外觀。先看功能正不正常(相關文章有沒有出來),再去調整外觀樣式。

Pstrey 提到...

相关文章可以显示,但不知为何标签部分总会显示两次

Pstrey 提到...

哦,经过一些修改,问题解决了,谢谢

匿名 提到...

这个好象是用计算的方式找出来的吧,那不会影响速度咩?

Abin 提到...

任何 Hack 都是另外加上 Script 計算找出來的,多少都會影響速度。不過這是用 JSON callback 達成的,多半用的是使用者的瀏覽器計算,絕對比掛什麼 Flash 快多了。

宸羽專業舞蹈教室 提到...

您好:
在我的模組裡面,沒有以下的東西說
b:if cond='data:post.labels'...
怎麼辦呢?

宸羽專業舞蹈教室 提到...

我發現了!不好意思!

Mark 提到...

我也找不到 b:if cond='data:post.labels'
已經來回看了十幾遍,請問Abin大大指點迷津。

註:有人說是應該要“展開小裝置範本”不過我這麼做之後仍然找不到>_<

通達人 提到...

Hi Mark,
可以縮短成 b:if cond='data:或甚至b:if cond=試試看。
這樣能找到接近的if判斷。

Abin 提到...

感謝通達人的代為回答~
每個人使用的樣板都不一樣,相對的樣板程式碼也都不盡相同,如果拘泥於和我範例一模一樣的代碼、或只是單純的複製貼上,那就不是 Hack,我直接出老嫗能解的安裝模組就好了。請先確定看懂這個功能原始碼的作用,如果完全不懂程式,那還是不要貿然使用,改原始碼是有一定風險的。

owlsky 提到...

成功了,非常感谢!

万箭 提到...

Anyway do add a related post hack if my blog is a private blog?

Abin 提到...

To 万箭:
NO! The hack used the "public" RSS feed to grab related post data, if your blog is private, the hack will not work.

kimiko 提到...

因爲有受惠,所以來道謝~~~
對我們這些資質駑鈍的菜鳥來説,
實在太需要像你這樣無私分享的人了~~

改好了,真開心!

万箭 提到...

謝了,在这"相關文章功能"有个不相關这篇文章功能 问题...

Question that "not related to this post" ;)
We can remove or add a nofollow tag on comment section but how do we add a nofollow to only the post content?can we?

Abin 提到...

To 万箭:
No, we can't.

Bansi 提到...

非常感谢,已经修改成功。
教学非常的细致,空了再认真看原理的解析。

提个建议,最后一步可否举个范例说明可以加在什么代码后面,方便对blogger不太熟悉的初学者去实施那一步。

001over

Abin 提到...

To Bansi:
我的 Blog 就是最好的範例了。我的代碼,大多都有套用在自己的 Blog 上,不用什麼說明和貼圖,直接就能用、也看得到效果。聰明一點的人連我網頁的代碼都不用看、直接看網頁原始碼也可以動手來改。

Troy 提到...

兩個步驟都完成後,在部落格文章內文中(非首頁)下什麼動靜也沒有是發生什麼事晴了!?這是第一次動到範本內容,因此裡面應該是相當乾淨的,我也確認步驟跟塞入的位置沒有出錯,請問有可能是什麼問題呢?有哪些東西需要提供讓你方便確認?

http://foodetective.blogspot.com/

Abin 提到...

To Troy:
你目前的網頁原始碼並沒有呼叫 ShowRelatedPosts() 這個函式的代碼。再者,你用了 LinkWithin 的相關文章外掛,說不定也有影響。

Roy 提到...

拜讀了大大不少的教學文
可否請問是否有跟這樣類似的code可以顯示"歷史上的今天"。

我指的是可在文章下顯示出發佈文章同天但不一定是同一年的相關文章,當然可以在label下另打開專屬的地方顯示。

跟label一樣,只是用的時間跟文章po文的時間來比對...

不知有沒有相關類似的..~^^""

感謝~^^"

Abin 提到...

To Roy:
你的想法之前我有想過,不過因為自己沒需求、加上 Blogger 有的限制,所以沒有付諸實現。
如果要實現這個功能,因為 Blogger 不讓你直接碰資料庫,只得從 RSS 的文章搜尋著手,可是搜尋功能在時間的指定上只能限定一段區間,搜尋參數沒法指定特定月份和日期,硬要做就要抓出所有文章根據日期來過濾,這樣又相當耗時間和資源。所以在發現搜尋有沒有其他用法之前,這個功能要做出來有一些先天上的限制。

敖犬 提到...

請問一下,相關文章必須顯示在標籤後面的嗎?
因為模版的關係,我覺得這樣不太美觀,
我想將相關文章顯示在標籤的上面,
可以做到嗎?如果不可以就算了,
還是謝謝你提供這麼好的教學。

Abin 提到...

To 敖犬:
我想我第二段就講得很清楚了。相關文章是利用現有的標籤機制來搜尋歸類、找出相關度高的文章,前後順序是有關聯的,調動位置會影響功能的使用,你調整你模板外觀會比較簡單吧。

文欣 提到...

已经拜读Abin版主的多篇文章,章章收益,谢谢。
请教一个小问题,按文中的方法成功加入此功能,只是显示的相关文章的标题都是从中间开始的,而我希望能左对齐,不知如何处理,请指教。

Abin 提到...

To 文欣:
你的問題是因為你樣板原始碼裡部份「靠右」的語法被套用到相關文章模組,所以這些標題統統都「靠右」、從中間開始。比較好的解決方法是找出讓相關文章這些 li 的元件靠右的標籤為何,調整這些標籤的位置、不要影響到相關文章模組的顯示(預設就是靠左)。比較不好的方法是硬用標籤和 CSS 語法把它調到靠左,像你原始碼裡有 <p align=left>,這樣不會有作用,硬要改的話你可以修改 Javascript 裡面 ShowRelatedPosts() 函式裡的 <ul>,改成 <ul style="text-align:left">,這樣可以靠左,但我還是建議你去找出影響靠右的標籤並調整順序比較一勞永逸。

文欣 提到...

谢谢版主的指点。原因找到了,但是对于我这只代码菜鸟,不知如何才能找出影响靠右的标签并调整顺序,版主能否再具体知会一两招?不胜感激。

文欣 提到...

我找到了,已经改好了,多谢帮助,欢迎有空到我的博客来看看。

Lynn 提到...

大大你好~
我套用你的方法後
卻出現兩個相同的標籤
該如何解決
麻煩妳了
謝謝

Abin 提到...

To Lynn:
你出現兩個標籤,和套用我的方法沒有關係,應該是你在複製貼上時重複貼了顯示標籤用的樣板原始碼(因為你連首頁都出現兩個標籤、而且上面套用過的網友都沒發生過你的狀況)。
檢查你原始碼裡,<p class='post-footer-line post-footer-line-2'>後面,是不是貼了兩句一樣顯示標籤用的語法:<data:postLabelsLabel/>。

flower 提到...

Abin, 請教你一個問題,
我在我的部落格加了一個每次會自動出現"span id=fullpost" 的語法之後,
相關文章的功能就失去了,能不能請你有空時幫我看一下,是不是兩個語法有衝到?能否解決?

先謝謝你。...^^

Abin 提到...

To flower:
自動出現一個 span 標籤塞入內文是風險很高的事。我知道你嫌要手動塞入這段 span 標籤很麻煩,如果可以用程式加入、還可以節錄自己想要的字元數,當然是最好(我也想過)。
手動加入一個 span 標籤很簡單、只要在文章最後面加一個結束的 span 結尾也很容易,但問題在,當你在節錄自己想要的字元數時,程式插入標籤,是不會管你插在哪裡,如果你插的位置很不幸剛好在某些標籤裡面,而且湊巧也是 span,別說其他外掛模組,就連版面也會整個亂掉。你用的那個「EasyReadMore」我沒用過,我也沒時間幫這個程式去 debug,你可以去問開發這個模組的作者比較快。
據說 Blogger 官方也正在開發「繼續閱讀」的功能(看這個消息),我想我的 Hack 應該會等官方功能發表後再進行修正吧!

flower 提到...

哦,原來。我插進來的語法是從別的模組copy過來的,的確是圖它方便。...^^
謝謝你的解說,我看我也等官方的新功能出來,再作調整好了。
Thanks.

烏衣行 提到...

感恩!真不錯!
不過最後一段程式碼,
倒是讓我嘗試了好久才放對位置!謝謝!

jijiong 提到...

不好意思,版大於6/16更新此篇文章,想請問是更新了那裡呢?(因之前也有參考過此hack)

Abin 提到...

To jijiong:
6/16 其實只有更新文章連結網址, Hack 的 code 並沒有修正。

shomosun 小毛桑 提到...

不好意思請問版主,1.如何讓相關文章出現在整篇文章的最底下呢? 2.還有如何打上[相關文章]的標題?謝謝唷。

ㄚ晟 提到...

您好,我參考了您這篇文章,真的收穫很多.
不過對blogger的位置擺放真的一竅不通,依照了您的方法,卻發現我的相關文章跑去文章的最上面了
不知道該怎麼辦,可以請您看一下嗎?
另外,我的較新的文章 較舊的文章 與首頁 的連結 位置也都跑掉了 該怎麼辦?

請賜教 謝謝

範例文章- http://it.notes.tw/2009/08/free-memorize-software.html

麻煩您了

Malaysialogo 提到...

谢谢您的文章,但是我没有找到第二步和第三步的代码,我用的是blogspot官方的模板,是不是因为官方更新了模板了呢?

因为,我在模板HTML里面,都找不到1句包含 b:if 的代码!

Malaysialogo 提到...

我已经找到第二步和第三步的代码了。
原来在修改模板的html的时候,一定要勾选“扩展窗口小部件模版”才会显示出全部的代码。

Winson 提到...

Hi, 我成功將你寫的語法複製到我的bloggeru,網站也正確的顯示出"Related Posts",但位置不論我如何移動,"它"始終保持在文章分類的同一列之後..能否請教你,我該如何修改?謝謝

Abin 提到...

To Winson:
顯示文章分類是這段程式:<data:postLabelsLabel/>
如果「相關文章」模組和文章分類同行,你在上面那段程式後面加個換行標籤,像是<br/>,就會換行了。我的作法是定義了另一個段落 (p class='post-footer-line post-footer-line-3'),自然就會分段換行(可以參考我的網頁原始碼)。

Winson 提到...

To Abin,
我搞定了,謝謝你的提醒

Peeress 提到...

呵呵 初學者的我
重複看了好幾次大大的文

終於弄好了
真的非常感謝呢 這功能很好用!!

Ryan 提到...

我也成功了
不過想再請教您
如果要修改前面的"‧"
這個逗點
要去哪裡修改成自己要的圖案呢?

謝謝你

雪降之风景 提到...

谢谢,非常有用。

匿名 提到...

I love u~ it works great

Nicholas Kuo 提到...

謝謝Abin版主的分享,
裡面許多Blogger的技巧,
真的都很實用。謝謝您。

Allen 提到...

你好...
我用了你這個方法,不過文章的日期不順序的,而你回覆某位讀者說只要修改RemoveDuplicatedPosts()裡的程式碼就可以啦.
想問一下究竟要修改什麼呢????或是刪除上述的句子???
請你可否幫一幫我....

小盧 提到...

http://applelifetw.blogspot.com/

請您幫忙看看我的部落格,我按照您的方式進行編寫,但是沒有出現效果。

小小猴 提到...

Abin大大..
請教一下,我也照做了..可是為什麼也沒出現呢?
我的blog:http://monkeybase.blogspot.com
謝謝

小小猴 提到...

Abin大大
我自行解決了..謝謝

彥志 提到...

Abin 你好 ! 我是從 Google 搜尋到您的網站的,
想請問是否有辦法可以只顯示相關文章,不要顯示標籤的欄位,

謝謝你 !

張貼留言

歡迎留言或發表意見,不過要理性不做人身攻擊。匿名的朋友得到回應的速度會比較慢喔~
發問相關的禮貌和規矩請先參考這篇文章,不當留言、和本文無關的回應可能會被直接刪除無視喔!